overscroll-behavior-x
In the ever-evolving world of web development, ensuring a smooth and intuitive user experience is always a top priority. One of the features helping develope...
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
layer
In March 2022, the CSS Working Group introduced an exciting new feature called CSS layers, aiming to provide developers with a powerful tool to manage the ca...
scroll-timeline-offset
As web development constantly evolves, CSS’s ability to handle complex visual effects has seen significant enhancements. One of the more recent innovations i...
focus-within
In the ever-evolving world of CSS, staying updated with new features that can optimize user experience and enhance design implementation is crucial for web d...
font-synthesis
In the ever-evolving landscape of CSS, the “font-synthesis” property stands out as a nuanced feature that grants web developers more control over font stylin...
ch-unit
The ch unit in CSS is a relatively lesser-known feature that deserves more attention for its practical utility in web design. Introduced as part of the CSS V...
motion-reduce
In an ever-evolving landscape of web design and development, accessibility remains a crucial aspect not to be overlooked. Among the suite of accessibility fe...
CSS Masking
CSS Masking is a powerful feature that expands the creative potential of web developers by allowing them to control the visibility of elements through the us...
accent-color-auto
In the evolving world of web development, ensuring your site is both functional and aesthetically pleasing is crucial. An often overlooked aspect of this is ...
mix() function
In the ever-evolving landscape of web development, CSS continues to expand its capabilities, making it easier for developers to create visually compelling an...
offset-distance
The introduction of “offset-distance” was a welcome addition to the CSS landscape with the introduction of the CSS Motion Path module. Introduced into modern...
env(safe-area-inset)
In the ever-evolving landscape of web development, creating web pages that adapt seamlessly to various devices and layouts is a fundamental objective. One CS...
position: sticky
Introduced in the CSS Positioning Module Level 3, “position: sticky” is a powerful yet often underutilized feature that allows web developers to create eleme...
text-overflow: clamp
Among the many new and exciting developments in CSS, a feature that has been garnering attention is text-overflow: clamp. Introduced as a more refined way to...
accent-color-contrast
The CSS feature accent-color-contrast is a recent advancement in the realm of web styling that has made significant strides since its introduction in mid-202...
encapsulation
CSS encapsulation is a relatively recent addition to the CSS toolkit, introduced as part of the evolving Web Components standard. This feature aims to solve ...
marker
In the evolving landscape of CSS, the “marker” property stands out as a powerful yet often overlooked feature that lends greater control over list item marke...
CSS Variables
CSS Variables, also known as CSS Custom Properties, have revolutionized the way developers manage stylesheets. Introduced with the advent of CSS Variables Mo...
snap-size
In the ever-evolving landscape of web development, CSS continues to gain new features that enhance the user experience and make development more straightforw...
round()
Introduced in 2020 as part of the CSS Values and Units Module Level 4, the round() function brings enhanced precision control to a web developer’s toolkit. T...
container-name
Introduced as part of the CSS Containment feature, “container-name” is an intriguing addition to the CSS toolbox. First brought to developers’ attention in 2...
overscroll-behavior-block
In the ever-evolving landscape of web development, the CSS property overscroll-behavior-block is an invaluable tool that enhances user experience by controll...
CSS Grid Template Areas
Introduced to the web development community with the CSS Grid Layout Module Level 1, which became a Candidate Recommendation in March 2017, CSS Grid Template...
scroll-timeline-duration
In the realm of CSS, transitioning and animating properties based on user-driven events has greatly evolved over the years. Among the newer additions to this...
hyphenate-limit-chars
In the realm of modern web design, maintaining good readability and aesthetic alignment of text is crucial. One CSS feature that assists in achieving this is...
scroll-driven animations
In the ever-evolving landscape of CSS, scroll-driven animations stand out as a contemporary feature that’s gaining traction among web developers. Introduced ...
accent-color-scheme
CSS continues to evolve, offering developers enhanced capabilities for improving web accessibility and user experience. A lesser-known, yet impactful feature...
math-style
The modern web landscape is consistently evolving, and CSS advancements play a crucial role in its dynamic progression. Among the recent additions to CSS is ...
anchor()
Introduced in 2022, the CSS anchor() function marked an exciting change in responsive web design by enabling developers to create intricate, context-aware la...
focus-visible
The CSS pseudo-class :focus-visible is a powerful tool for web developers looking to improve accessibility and user experience on their sites. Introduced as ...
container-type
In the continuously evolving landscape of web design, CSS Container Queries have emerged as a game-changing feature, and at their core is the essential prope...
has() pseudo-class
In the ever-evolving world of web development, CSS continues to bring more powerful tools to the table, and the :has() pseudo-class is among the most excitin...
media query ranges
In the ever-evolving world of web development, CSS continues to mature with each iteration, providing developers with more efficient tools to create responsi...
accent-color-adjust
The introduction of the “accent-color-adjust” property in CSS is a testament to the ever-evolving nature of web development, continuously driven by the deman...
grid-template-columns
The CSS Grid Layout, introduced in April 2017 with the CSS Grid Layout Module Level 1, revolutionized how web developers approach layout design. One of the c...
paint-order
The evolution of CSS has continuously provided developers with more control over the aesthetic details of their designs. One of the lesser-known yet powerful...
container-style queries
As web development continues to evolve, responsive design remains at the forefront of delivering optimal user experiences. Historically, media queries have b...
layer
The CSS “layer” feature, introduced in 2021 with the CSS Cascade Layers specification, represents a transformative addition to CSS, offering web developers a...
motion-path
The “motion-path” CSS feature, introduced as part of the CSS Motion Path Module Level 1, has opened new creative possibilities for web developers by allowing...
min() pseudo-class
In the ever-evolving world of web development, CSS continues to push the boundaries of what we can achieve with styling. One of the powerful tools at our dis...
motion()
In recent years, CSS has steadily evolved to incorporate more dynamic elements, bringing more powerful animations and interactions directly into the web styl...
when rule
In the ever-evolving world of CSS, new features are constantly introduced to streamline web development and innovate how styles are applied. One of the more ...
scroll-timeline-phase
The evolution of CSS continues to push the boundaries of what developers can achieve natively within the browser, and the “scroll-timeline-phase” is one such...
place-self
In the rapidly evolving landscape of front-end development, the “place-self” property in CSS is a significant addition that offers developers more concise an...
layer
In the evolving landscape of web development, CSS continues to introduce features that streamline design processes and enhance styling capabilities. One such...
scrollbar-color
CSS is a language that continuously evolves to meet the needs of web developers and designers, offering more flexibility and control over aesthetics. One suc...
view-transition
Introduced as part of the evolving suite of CSS features, the “view-transition” property made its debut in late 2022. Tailored for the modern web, this prope...
has() pseudo-class
As web developers continually seek ways to enhance user interfaces and boost the user experience, CSS has evolved, offering more sophisticated and dynamic st...
cascade()
In the ever-evolving world of web development, CSS continues to introduce new features that make styling more intuitive and efficient. One such notable featu...
accent-color-schemes
In today’s fast-paced world of web design, creating visually appealing and accessible user interfaces is more important than ever. One of the CSS properties ...
layer
As web development evolves, CSS continues to offer tools that enhance style control and manageability in complex projects. The introduction of CSS layers, a ...
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...
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...