The State of CSS

Interledger Foundation — https://interledger.org

That was a segue back to what I'm here to talk about. CSS! Or more specifically, the state of CSS, both in general, and also the survey that I helped out with last year.

How many of you fine folks have heard of or participated in any of the State Of surveys before? Only last week, I realised there are a some of State Of surveys run by different organisations as well, but nobody has a monopoly on the term “State Of”. And rightfully so, otherwise all the wonderful speakers later today would have had to rename their talks.

So the series which the State of CSS surveys belong to started back in 2016 with Sacha Grief (spelled G-R-E-I-F) feeling confused about what Javascript technologies to spend his time learning, so he decided to crowdsource an answer by starting a State of JS survey.

https://www.devographics.com

Chart showing rates of usage of highest-rating CSS properties over time

Join us on Discord.

Check out the code on GitHub.

The survey itself is an application that gets less attention than the survey questions and results, but work is consistently done to improve its features and user experience. For example, The State Of surveys from 2019 onwards had started to allow users to customise data queries via GraphQL. Eventually, you could also update the charts to reflect the new query.

This allows folks who are versed in the ways of data analytics to explore even more insights and dive deeper into the data if they so wished. The 2023 version also introduced the concept of a reading list, such that folks going through the survey and found a property they wanted to learn more about, they could add it to their reading list and come back to it later.

If you too are interested to contribute in any way at all, you can join us on Discord or go check out the code on Github.

https://wpt.fyi/interop-2024

https://web.dev/baseline

CSS is a lot more than layouts. As of last week when I checked, there are 589 distinct property names from 81 technical reports and 83 editors' drafts. My personal opinion is that for the average web developer, there is really no practical reason to know each and every one of these properties and what they do, although I'm sure somebody does.

My take on things is to have a vague idea that something exists and can be used to do a thing. You don't have to know exactly how the property works, all its values etc. until you encounter an use-case where that something might be useful.

Like, I'm clearly not from here, I've heard of the AFL. And this might sound blasphemous but I don't know the rules, nor any of the teams or players. Now, my friend Chris suggested we go watch a game this evening, and if I do decide to go, then I'm going to sneak off later to at least learn what the rules are. As of now, ¯\_(ツ)_/¯

The survey has evolved over the past 5 years based on external feedback as well as internal reflection. For the 2023 edition, it started with Sacha and myself going through the list of CSS properties from the 2022 survey to figure out if we still wanted to keep them for 2023. Generally, we want to observe trends around new CSS features. Take Flex, for example, after 3 straight years of more than 95% usage numbers, we figured there wasn't much insight to be gleaned.

Another reason why features are "graduated" is to make room for new ones, because we also understand that if the survey grows beyond a certain number of questions, nobody is going to finish it. Which brought us to the next bit, of which new features to add. Our criteria was that the feature had to be usable by developers, so those that did not have implementations were not considered.

Awareness of the blend-mode property over the past 4 years

Awareness of the overscroll-behavior property over the past 4 years

Generally, we expect the awareness of new CSS properties to gradually increase over time, usually it's the rate of increase that varies. Then, at some point, properties relate to more specific or narrow use-cases will see some sort of plateau, because if you never encounter a scenario that requires those properties, you probably will never learn it, much less use it.

Like blend-mode for example, which is used to determine how 2 colours are mixed when overlaid one on top of another. That is a rather specific use-case, which is why I think the awareness and usage has been stable over time.

Same goes for overscroll-behavior, which allows developers to deal with the default behaviour of scroll chaining, where scrolling is propagated from one scroll container to another. It is one of those properties where it's meant to change the default behaviour, which most of the time is an acceptable experience.

Awareness of the content-visiblity property over the past 4 years

The only property that bucked the trend was content-visibility. It is a property that controls whether or not an element renders its contents at all. As part of the bigger concept of containment, you can think of it as belonging to the performance optimisation category of CSS features.

❗️ Caution: The browser is only able to skip rendering work if you are also careful not to call any DOM API that forces some of rendering to occur on one of the skipped subtrees. If you're using content-visibility to improve performance, audit your code to make sure these APIs are not getting called.
–content-visibility: the new CSS property that boosts your rendering performance

content-visibility in the CSS Containment Module Level 2

The content-visibility property sits in the CSS Containment Module Level 2. This specification was meant for the contain property, used to indicate that an element's subtree is independent from the rest of the page. Such a feature would allow user agents to use stronger optimisations during page rendering, provided contain was used properly.

Awareness of container queries from the State of CSS 2023 survey

CSS is awesome

contain: inline-size

Proposed in Thoughts on an implementable path forward for Container Queries

But anyway, for container queries to become a reality, the discussion turned toward containment in a single dimension, specifically the inline axis. A new value had to be introduced to the contain property, namely inline-size, which prevents the inline-size of an element from directly depending on its contents.

CanIUse chart for size container queries

CSS Container Queries (Size)

I'm the container!

Pretend this is a responsive image

Cards need headers

Most cards have blurbs. This is the epitome of a generic example. Oh well…

See the Pen Container Query Bookstore by Max Böck (@mxbck) on CodePen.

Container Query Bookstore by Max Böck

Colour in CSS

Visualisation of the color features section of the State of CSS 2023 survey

`currentColor`

Icon by DaeSung LEE

`accent-color`

accent-color is genuinely newer, and hence less surprisingly that half our respondents never heard of it. But basically it allows us to change to the colour of these 4 input elements. And I know people want more customisability on input elements in general, but I think this is a good low-effort tweak we can make use of right now.

HSL colours

And we have come to the point in the talk where I might lose people because we're going to gently touch on colour spaces, which is a way we organise colours in the digital world.

sRGB (standard Red Green Blue) is an RGB colour space created by HP and Microsoft for monitors, printers and the Web. Even though there were better systems available at the time, RGB was deemed “good enough” and colours in CSS ended up being first specified in this format.

HSL is an alternative representation of the RGB colour model, but utilises a cylindrical geometry, with hue being in the angular dimension, saturation along the radial direction and lightness from top to bottom.

It's based on the organisation and conceptualisation of colours in human vision and was added to CSS in 2002 from the desire to have some sort of hue wheel system. But due to the cylindrical nature of the HSL colour space, it does not account for the complexity of how our eyes perceive maximum saturations for different colour hues.

HSL colours

hsl(60 100% 25%)

hsl(240 100% 25%)

hsl(60 100% 50%)

hsl(240 100% 50%)

hsl(60 100% 80%)

hsl(240 100% 80%)

LAB and LCH

Sadly drawn visualisation of LAB colour space

Sadly drawn visualisation of LCH colour space

The CIELAB colour space was defined by the International Commission on Illumination in 1976 and was meant to approximate human vision and aspires to perceptual uniformity. Without going into the details of colour science which I am not qualified to do, the long and short of it, is that LCH and LAB have theoretically unbounded chroma values, and should be able to represent the entire spectrum of human vision.

TLDR: more colours. And also, a lightness component that is more intuitive to humans. The only issue was a bug in the math that resulted in an unexpected hue shift on chroma and lightness changes in blue colors. A Swedish software engineer, Björn Ottosson, created the OKLab colour space to resolve the bug and improve upon the math behind the colour axes.

OKLCH colours

oklch(60% 0.3 110)

oklch(60% 0.3 260)

oklch(80% 0.3 110)

oklch(80% 0.3 260)

oklch(100% 0.3 110)

oklch(100% 0.3 260)

Interpolation differences

black to white

sRGB

HSL

LAB

okLAB

LCH

okLCH

red to white

sRGB

HSL

LAB

okLAB

LCH

okLCH

blue to white

sRGB

HSL

LAB

okLAB

LCH

okLCH

blue to black

sRGB

HSL

LAB

okLAB

LCH

okLCH

red to green

sRGB

HSL

LAB

okLAB

LCH

okLCH

purple to gold

sRGB

HSL

LAB

okLAB

LCH

okLCH

blue to red

sRGB

HSL

LAB

okLAB

LCH

okLCH

mediumvioletred to gold

sRGB

HSL

LAB

okLAB

LCH

okLCH

indigo to lightseagreen

sRGB

HSL

LAB

okLAB

LCH

okLCH

same perceptual lightness origins

sRGB

HSL

LAB

okLAB

LCH

okLCH

Max LCH chroma

sRGB

HSL

LAB

okLAB

LCH

okLCH

Adapted from Gradient Color Spaces Exploration by Adam Argyle

Relative colours with CSS

Pending Firefox: Implement CSS Color 5 Relative Color Syntax

Opacity adjustments

Input colour

HSL

OKLAB

OKLCH

Pending Firefox: Implement CSS Color 5 Relative Color Syntax

Programmatically generate colours

Input colour

50% darker

40% darker

30% darker

20% darker

10% darker

Base

10% lighter

20% lighter

30% lighter

40% lighter

50% lighter

Pending Firefox: Implement CSS Color 5 Relative Color Syntax

Awareness of :has() from the State of CSS 2023 survey

We do an Awards section at the end of every survey just for fun, and the feature that won "Most Adopted Feature", which is awarded to the feature with the largest year-over-year ”have used” progression was the :has() selector.

The :has() selector sits in the Selectors Level 4 specification under the Logical Combinations section, and it has been in there since around early 2018. But we only added it to the survey in 2022 because that was when browsers started shipping it.

Parent selectors have been requested for years, and it is not for the lack of trying. If I did not lose you during the container queries explanation, this is a rather similar situation where the challenge for browser implementers is how to manage the performance implications.

I have included links to some history in the references, but to summarise, Igalia finally made some forays into a workable prototype in 2021, and things started to move forward from there.

:has() reached Baseline newly available in December 2023, and folks from the browser side of things are trying to encourage developers to think of :has() as more than just a parent selector.

The `:has()` selector

            /* Matches menu items with submenus in them */
nav li:has(menu) a::after { … }

/* Matches <h1> elements only if they have a <p> element directly after */
h1:has(+ p) { … }

/* Matches all <section> elements that do NOT contain headings */
section:not(:has(h1, h2, h3, h4, h5, h6)) { … }

/* Matches all <section> elements that have empty <div>s */
section:has(div:empty) { … }

No CSS class? No problem

Missing features in CSS from State of CSS 2023

Animating grid rows or grid columns

♟

Also see CSS Fool's Mate on CodePen.

Animating `0fr` to `1fr`

Show content

Content that is meant to hidden

For all intents and purposes

Let's have multi-line content

Content that is meant to always shown

For all intents and purposes

Let's have multi-line content

Animate to `auto`

Have to enable “Experimental Web Platform features” from chrome://flags on Chrome Canary

Show content

Content that is meant to hidden

For all intents and purposes

Let's have multi-line content

Content that is meant to always shown

For all intents and purposes

Let's have multi-line content

The issue with interpolating to or from auto, is that there must be some way to describe the interpolation states in between. In the CSSWG discussions, it was suggested that calc() could be used for this purpose, except that currently calc() does not support auto as an argument. Interested parties can read the 177 comment thread on GitHub, but the resolution was to add a new math function that can take auto as an argument, final syntax yet to be determined.

https://stateofcss.com

References

Thank you

https://chenhuijing.com

@huijing

@huijing@tech.lgbt

@huijing

Font is Inclusive Sans by Olivia King.

The State of CSS

CSS Container Queries (Size)

Cards need headers

Colour in CSS

currentColor

accent-color

HSL colours

HSL colours

LAB and LCH

OKLCH colours

Interpolation differences

Relative colours with CSS

Opacity adjustments

Programmatically generate colours

The :has() selector

No CSS class? No problem

Some form

Animating grid rows or grid columns

Animating 0fr to 1fr

Animate to auto

References

Thank you

`currentColor`

`accent-color`

The `:has()` selector

Animating `0fr` to `1fr`

Animate to `auto`