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