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...
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
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...