Skip to content

The State of CSS 2021

[en-US] general.back_to_intro

Other Features

Other CSS features.

CSS Variables (Custom Properties)

Customize Data
CSS Custom Properties for Cascading Variables is a CSS module that allows for the creation of custom properties that can be used over and over.
Never heard of it
Know about it
Have used it
2019
2020
2021

Feature Support Queries (@supports)

Customize Data
The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.
Never heard of it
Know about it
Have used it
2019
2020
2021

CSS Containment

Customize Data
The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.
Never heard of it
Know about it
Have used it
2019
2020
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: Stephanie Eckles

I'm constantly blown away by Stephanie's continued initiatives to help share her knowledge of modern CSS techniques, as well as her contagious enthusiasm for CSS.

We asked members of the CSS community to share their “pick of the year”

Kevin Powell

CSS Evangelist

will-change

Customize Data
The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.
Never heard of it
Know about it
Have used it
2019
2020
2021

calc()

Customize Data
Never heard of it
Know about it
Have used it
2019
2020
2021

Houdini

Customize Data
Never heard of it
Know about it
Have used it
2020
2021

CSS Comparison Functions

Customize Data
<code>min()</code>, <code>max()</code>, and <code>clamp()</code>
Never heard of it
Know about it
Have used it
2020
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: “Building a Color Scheme” by Adam Argyle

I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables.

We asked members of the CSS community to share their “pick of the year”

Michelle Barker

Senior Front End Developer

Houdini Custom Properties

Customize Data
The @property CSS at-rule is part of the CSS Houdini umbrella of APIs, it allows developers to explicitly define their css custom properties, allowing for property type checking, setting default values, and define whether a property can inherit values or not.
Never heard of it
Know about it
Have used it
2021

::marker pseudo-element

Customize Data
The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.
Never heard of it
Know about it
Have used it
2021

Recommended Resources

Dynamic CSS with Custom Properties (aka CSS Variables)

Dynamic CSS with Custom Properties (aka CSS Variables)

Modern browsers ship with CSS Custom Properties, also known as “CSS variables”, a superpower that enables us to create reusable components without any JavaScript dependencies needed – using only vanilla CSS!
Thanks to our partners for supporting us! Learn more.