Other Features

At the end of the day, the bulk of CSS is made up not of sexy, fancy features like Grid or animations; but of small, often niche properties that may at first seem useless, but then end up one day saving you dozens of hours of work.

CSS variables and support queries fit in that category: they'll take a little while to grow on you, but once you grasp their full potential you'll wonder how you ever managed without them.

The size of the outer circle corresponds to the total number of users who know about a feature, while the inner one represents those who have actually used it.

Hover on each node to view detailed data along with an overlay representing the total number of survey respondents.

The “overall” column shows overall usage for each feature (respondents who selected “have used it”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience
overall
<1
1~2
2~5
5~10
10~20
>20
calc()
79.83%
56.83%
75.76%
85.87%
89.09%
88.15%
83.29%
Variables
58.83%
51.98%
62.49%
60.03%
59.86%
57.41%
61.18%
@supports
33.93%
21.59%
23.72%
31.86%
38.78%
43.15%
44.47%
will-change
18.6%
5.29%
11.18%
19.23%
28.64%
27.74%
19.53%
Contain
4.4%
2.2%
3.66%
3.8%
5.01%
5.61%
6.12%
Difference from overall usage:
-20%-10%0+10%+20%

Variables

Completion Percentage: 99.33% (11241)
Completion Percentage: 99.33% (11241)
Percents%CountΣ
Have used it59.11%
Know what it is, but haven't used it35.02%
Never heard of it/Not sure what it is5.2%

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.

@supports

Completion Percentage: 99.38% (11247)
Completion Percentage: 99.38% (11247)
Percents%CountΣ
Have used it36.63%
Know what it is, but haven't used it35.97%
Never heard of it/Not sure what it is26.78%

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.

Contain

Completion Percentage: 99.17% (11223)
Completion Percentage: 99.17% (11223)
Percents%CountΣ
Have used it4.73%
Know what it is, but haven't used it12.15%
Never heard of it/Not sure what it is82.29%

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.

Learn More

will-change

Completion Percentage: 99.24% (11231)
Completion Percentage: 99.24% (11231)
Percents%CountΣ
Have used it23.59%
Know what it is, but haven't used it17.84%
Never heard of it/Not sure what it is57.81%

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.

calc()

Completion Percentage: 99.44% (11254)
Completion Percentage: 99.44% (11254)
Percents%CountΣ
Have used it85.62%
Know what it is, but haven't used it9.22%
Never heard of it/Not sure what it is4.6%

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

70 hours of content for CSS, Javascript

Design+Code video courses to learn UI design, CSS, SwiftUI, React, React Native, Vue
Thanks to our partners for supporting us! Learn more.