font-display
Introduced in the CSS Fonts Module Level 4 specification, “font-display” is a vital property for web developers who aim to enhance the performance and aesthe...
Modern CSS Daily
Every year I take the State of CSS survey.
And every year, I’m reminded that the vast majority of my CSS knowledge is stuck somewhere in the early 2000s. The only reason that my websites look vaguely acceptable is because I use a theme or (more often than not) Bootstrap.
After taking the 2025 survey, and realising I’d heard of almost none of the features they asked about, I decided to do something about it. And with the help of Jekyll, Minimal Mistakes, the OpenAI API and a bit of Perl code to glue it all together, I built this site.
Each day, we’ll have a new article about a CSS feature that has been added since I stopped taking notice about twenty years ago. There’s an RSS feed for those of you old enough to remember web feeds.
I built this purely for me. But I guess there’s a good chance that others might be in the same situation. Let me know if you find it useful too.
Cheers,
Recent Posts
place-content
In the ever-evolving landscape of CSS, the place-content property has emerged as a powerful tool for aligning items in a flexible container. Introduced as pa...
accent-color-adjust
In the evolving landscape of web development, CSS keeps introducing enhancements that aim to provide more control and accessibility to developers. One such a...
trigonometric functions
Introduced in the CSS Values and Units Module Level 4, modern CSS now boasts trigonometric functions, bringing math functions such as sin(), cos(), and tan()...
scrollbar-width
Introduced as part of the CSS Scrollbars Module Level 1, scrollbar-width is a relatively new CSS property that empowers developers with the ability to custom...
has() pseudo-class
The has() pseudo-class is a noteworthy enhancement to modern CSS, introduced as part of the CSS4 Selectors specification. It offers a powerful way to style e...
style queries
In the ever-evolving landscape of CSS, developers are constantly seeking ways to create more responsive and adaptable designs. One of the newer features intr...
accent-color-scheme
In the ever-evolving world of web development, CSS continues to introduce features that enhance user experience and streamline design processes. One such fea...
is() pseudo-class
The is() pseudo-class is an enticing addition to modern CSS, rolled out in 2021 as part of the CSS Selectors Level 4 specification. It represents a significa...
overscroll-behavior-inline
In the ever-evolving world of web development, ensuring seamless and user-friendly interfaces is key. Among the latest CSS enhancements aimed at refining scr...
col-span
In the continual evolution of CSS Grid, the introduction of col-span in 2023 has been a noteworthy advancement for web developers. As CSS Grid solidifies its...
scroll-snap-stop
In the realm of modern web design, creating a seamless and intuitive scrolling experience is critical, particularly on touch devices. CSS Scroll Snap Points,...
line-height-step
As web design continues to evolve, developers constantly seek ways to ensure superior readability and aesthetic alignment across different layouts. With the ...
text-wrap
In the ever-evolving world of web design, CSS continues to provide new and improved features that enhance the flexibility and creativity of web developers. A...
mask-image
The “mask-image” feature is a CSS property that has steadily evolved into a versatile tool for web developers looking to create striking visual effects while...
scroll-timeline-name
As web development continues to evolve, CSS introduces new features that empower developers to create richer, more interactive user experiences. One such fea...
layer
In recent years, CSS has continuously evolved to offer more advanced capabilities for web developers. One of the newer features in this evolving toolkit is t...
scrollend event
Introduced as part of the evolving landscape of web standards, the scrollend event is a relatively recent addition to CSS, making its debut in modern browser...
grid-template-rows
The “grid-template-rows” property in CSS is a game-changer for developers looking to create more structured and manageable layouts. Introduced in CSS Grid La...
scroll-margin
In the world of web development, ensuring a smooth and intuitive user experience is paramount. One noteworthy CSS feature that aids in achieving this is “scr...
has() pseudo-class
CSS has continually evolved to provide more powerful tools for web developers, and one of the most exciting additions to the CSS specification in recent year...
scroll-anchoring
In the ever-evolving world of web development, maintaining smooth and user-friendly interfaces is key. One CSS feature that aids in this endeavor is scroll a...
container
CSS “container” is a progressive enhancement feature introduced to give web developers more control over responsive design, effectively complementing the wid...
math functions
CSS math functions are a relatively modern addition to the CSS toolkit, introduced within the CSS Values and Units Module Level 4. Though developments in CSS...
mix-blend-mode
The CSS mix-blend-mode property, introduced in the CSS Compositing and Blending Level 1 specification, has been around since the early 2010s. It allows for a...
motion-path
The CSS motion-path property, introduced as part of the CSS Motion Path Module Level 1, offers web developers an exciting capability to animate elements alon...
accent-color
In recent years, CSS has continued to evolve, offering web developers powerful new tools for design customization. One such feature that has garnered attenti...
property
The CSS feature property() is an interesting addition to the ever-evolving landscape of web styling that has been gaining attention since its discussion in t...
focus-within
In the ever-evolving landscape of CSS, new features continuously enhance the capabilities of web developers to create robust, interactive, and accessible web...
round()
In the ever-evolving world of CSS, the introduction of new features often sparks excitement among web developers, promising enhanced control and flexibility ...
layer
In the ever-evolving landscape of web development, CSS has proven to be a powerful and essential cornerstone for creating visually engaging web pages. One of...
CSS Paint API
In the rapidly evolving world of web development, new CSS features often open up exciting possibilities for designers and developers alike. One such feature ...
scrollbar-gutter
Introduced in 2021 with the rollout of the CSS Scrollbars Module Level 1, the scrollbar-gutter property is an exciting addition for web developers looking to...
ch()
In the ever-evolving world of web development, CSS continues to receive updates that enhance the flexibility and efficiency of styling web pages. One such fe...
break-before
In the ever-evolving landscape of web development, CSS continues to expand its repertoire, offering tools that grant developers greater control over the visu...
overscroll-block
Introduced as part of the CSS Overscroll Behavior Module, the overscroll-block property has quickly become a crucial tool for modern web developers seeking t...
overscroll-inline
CSS continues to evolve, offering developers enhanced control over web page behavior and aesthetics. One of the newer, compelling features that have come int...
anchor-position
The CSS feature “anchor-position” is a relatively new addition to the stylist’s toolkit, introduced to the web development scene with CSS ‘Containment Layout...
overscroll-behavior
In the realm of modern web design, offering a seamless user experience is paramount. One often overlooked aspect of this is how content behaves during scroll...
accent-color
Introduced in 2021, the accent-color CSS property is a game-changer for web developers aiming to streamline the aesthetic cohesion of their form elements. Pa...
object-fit
The CSS feature “object-fit” was introduced to the CSS specification in 2014. It brought a straightforward and effective way to handle responsive images and ...
break-after
The “break-after” CSS property, introduced in the CSS Fragmentation Module Level 3, provides web developers with a powerful tool to control how content is pa...
place-items
CSS has continued to evolve, offering developers more concise and efficient ways to manage layout and style. One of the features that has garnered attention ...
not() pseudo-class
Introduced in CSS Selectors Level 3 and further enhanced in Selectors Level 4, the :not() pseudo-class is a powerful tool in a web developer’s toolkit for cr...
offset-anchor
In the ever-evolving landscape of web development, staying updated with the latest CSS features is crucial. One such feature is the offset-anchor, a relative...
scroll-timeline
In early development stages, the CSS feature known as “scroll-timeline” is on its way to revolutionize how animations are connected to scrolling activity on ...
focus-visible
In the ever-evolving world of web development, ensuring accessibility while maintaining a polished user interface continues to be a significant challenge. In...
color-scheme
The color-scheme CSS property was introduced as a means to better support the growing trend of dark mode across various websites and applications. It was bro...
layer
The introduction of the CSS “layer()” feature marked an exciting evolution in the styling of web pages. Officially introduced as part of the CSS Cascade Leve...
scroll-padding
In the ever-evolving world of CSS, “scroll-padding” is a modern feature introduced as part of the CSS Scroll Snap module. This feature, first widely supporte...
has() pseudo-class
In the ever-evolving world of front-end development, CSS continues to surprise with innovative features that push the boundaries of what can be done without ...
text-decoration-skip-ink
In the ever-evolving world of CSS, new features are continually introduced to enhance the visual presentation and maintainability of web content. One such fe...
contain-intrinsic-size
The “contain-intrinsic-size” feature in CSS is a relatively new addition to the web developer’s toolkit, introduced to the broader web platform in 2020. This...
filter()
Introduced in the mid-2010s with significant support from CSS3, the filter() function brought a new level of visual enhancement and creativity to web design....
line-clamp
The CSS line-clamp property has become a vital tool for web developers seeking to manage content overflow in a concise and aesthetically pleasing manner. Int...
damping()
In the ever-evolving landscape of web development, CSS continues to empower developers with tools that enhance the user experience. One such innovative featu...
nesting
As front-end development continues to evolve, the CSS landscape is embracing more advanced features to enhance developer productivity and maintainability. On...
scroll-behavior
In the world of web development, enhancing user experience is paramount. One of the CSS properties introduced to support this goal is “scroll-behavior.” Debu...
chaining()
The CSS feature “chaining()” was introduced in [hypothetical version], and it’s been making waves ever since in the world of web development. While the conce...
layer
In the evolving landscape of CSS, the introduction of the “layer” feature marks a significant milestone, offering enhanced control over how cascading styles ...
variable fonts
In the realm of web development, typography plays an indispensable role in enhancing the user experience and defining a website’s visual tone. One of the sig...
subgrid
Introduced alongside CSS Grid in late 2017, “subgrid” was officially implemented in Firefox 71 in late 2019 with anticipation for broader adoption in other b...
is() pseudo-class
In the ever-evolving landscape of CSS, the introduction of the is() pseudo-class marked a notable step forward in simplifying and enhancing stylesheets. This...
conic-gradient()
The CSS conic-gradient() function was introduced as part of the CSS Images Module Level 4, gaining broader recognition and adoption in the late 2010s. It bri...
env()
The env() function in CSS provides web developers a way to utilize environment-specific parameters within their stylesheets. Introduced by the CSS Working Gr...
accent-color
Introduced in late 2021, the accent-color CSS property presents an exciting evolution for styling web interfaces by allowing developers to modify the appeara...
color-mix()
Color manipulation in web design has always been a critical aspect for developers who aim to create visually appealing and accessible interfaces. The introdu...
gap
The CSS property “gap” has become an important tool in the developer’s toolkit, particularly when working with Flexbox and Grid layouts. Introduced as part o...
has() selector
The has() selector, part of the CSS Selectors Level 4 specification, has become a celebrated addition to the modern web developer’s toolkit. Officially intro...
content-visibility
Introduced in 2020, content-visibility is a CSS feature that offers developers a more efficient way to control the rendering behavior of elements, providing ...
backface-visibility
In the ever-evolving world of web development, CSS continues to introduce features that push the boundaries of creative design and user experience. One such ...
logical properties
In the evolving landscape of CSS, logical properties have become an indispensable tool for web developers aiming to build versatile, culturally inclusive, an...
scroll-linked animations
Scroll-linked animations have emerged as a game-changer in the realm of web design, transforming static content into dynamic, interactive experiences. This i...
content-visibility
In the ever-evolving world of web development, optimizing performance is a perennial priority. One CSS feature that has garnered attention since its introduc...
shape-outside
In the ever-evolving world of CSS, the feature of “shape-outside” stands out as a notable enhancement for creative web layout design. Introduced as a part of...
viewports units
In the ever-evolving world of web design, CSS continues to introduce features that help developers better manage responsive layouts. One such feature is view...
box-decoration-break
The CSS property box-decoration-break was introduced as part of the CSS Fragmentation Module Level 3, providing developers with finer control over how box de...
cascade layers
CSS continues to evolve to meet the needs of developers, and one of the more recent enhancements is “cascade layers,” introduced as part of the CSS Cascade L...
CSS Houdini
CSS Houdini is a game-changing set of APIs introduced to the world of web development in 2015. This suite of low-level APIs allows developers to break free f...
backdrop-filter
The “backdrop-filter” CSS property, introduced in the CSS Filter Effects Module Level 2, made its first real-world appearance in browsers around 2015. It’s a...
CSS Shapes
In the fast-evolving world of web development, providing aesthetically pleasing designs has always been a paramount goal. Introduced as part of the CSS Regio...
will-change
The CSS will-change property is a powerful tool introduced during the progression towards CSS3, gaining significant traction as modern browsers evolved. Over...
calc()
Introduced as part of the CSS3 specifications, the calc() function revolutionized the way developers handle lengths, percentages, and arithmetic operations i...
scroll-timeline
In the ever-evolving landscape of web development, CSS continues to introduce exciting features that empower developers to create dynamic user experiences. O...
scroll-snap
The CSS scroll-snap feature has become a staple for web developers looking for precise control over scrolling behavior. Introduced in the CSS Scroll Snap Mod...
aspect-ratio
In the world of web development, presenting images and other media in a consistent and responsive manner can often pose significant challenges. The introduct...
clamp()
The CSS clamp() function is a relatively recent addition to the toolkit available to web developers, having been introduced as part of the CSS Values and Uni...
container queries
The web development landscape has significantly evolved since the introduction of CSS container queries in 2022. This powerful addition to CSS allows develop...
custom properties
In the ever-evolving landscape of CSS, custom properties—commonly known as CSS variables—have become an indispensable feature for modern web developers. Intr...
animations
CSS animations have become a staple in modern web development, breathing life into otherwise static web pages. Introduced in 2011 with the advent of CSS3, an...
subgrid
In the ever-evolving landscape of web development, CSS Grid has revolutionized layout design by providing a robust tool for creating complex, responsive web ...
grid
In the realm of modern web development, CSS Grid stands out as a transformative feature, reshaping how developers approach layout design. Introduced as a fou...
flexbox
Flexbox, short for the Flexible Box Layout Module, revolutionized web design when it was introduced in 2009. As part of the broader range of CSS layout modul...