State of CSS 2021: differences between browsers

[foolip]

Not a feature proposal. This is sharing data.

The State of CSS 2021 survey has closed now, and while the public results site is not yet up, @SachaG has kindly provided me with a copy of the results, which I've partially exported as State of CSS 2021 free-form text analysis.

For this issue I've looked at "Are there any CSS features you have difficulties using because of differences between browsers?" which I suggested adding to the survey with Interop 2022 in mind. There were 1,118 responses to this question, out of 8,551 survey takers in total.

I've manually categorized each response in up to 5 categories. For example, "CSS Grid, background blur" became Grid + backdrop-filter. I've probably made a few mistakes, but I think I've captured the general picture.

Here are the features (not browsers) that had more than 10 responses attributed to it:

Feature	Count
gap (almost all about Flex)	156
Grid	147
Subgrid	99
Flex (beyond gap)	80
aspect-ratio	77
Scrolling	54
backdrop-filter	53
Scrollbars	53
Forms	51
Container Queries	34
Viewport	31
:focus-visible	27
position:sticky	24
Typography	23
Custom Properties	20
line-clamp	17
Houdini	16
SVG	13
Animations	11
Logical Properties	10
Gradients	10
object-fit	10

[foolip]

One thing to keep in mind with this list is that the survey asked about awareness of many features, but certainly not all features. There's most likely a priming effect, where any feature that was part of the survey gets a bit of a bump in a question like this. I haven't gone though and marked which those features are, but might update the table with that later.

[jensimmons]

Thanks for pulling together this summary @foolip — it's much easier to properly understand than scrolling through the raw data! (While we wait for the survey report.)

[karlcow]

Thanks @foolip
I was trying to dig with a bit of mix of canIuse and what I remember about implementations.
There are things which are not ready because under a prefix, or with different subtleties, hence ⛑
But what I find fascinating in the list you put together it's when there is 3 green checkmarks. It means that people have difficulties with something which is supposed to be implemented across the board.

Probably things like

• paper cuts, slight differences in the way this is implemented. (core engine bugs)
• support for older versions of the browsers, where it's not available. (business requirements).
  • For this I wonder if there's an opportunity for a question about the version of each browser they need to support. In the collected Webcompat issues, we often issues triggered by support matrix / user-agent sniffing. I wonder if the frustration comes from, for example, "gap usable in the latest versions, but broken in older versions so we can't really use it… because in our analytics… blah"
• Misunderstanding of the technology? (devrel opportunity)

At least that's cool, it helps understand where it is painful.

Feature	Count	Blink	Gecko	WebKit
gap (almost all about Flex)	156	✅	✅	✅
Grid	147	✅	✅	✅
Subgrid	99	⛑	✅	⛑
Flex (beyond gap)	80	✅	✅	✅
aspect-ratio	77	✅	✅	✅
Scrolling	54	✅	✅	⛑
backdrop-filter	53	✅	⛑	✅
Scrollbars	53	⛑	⛑	⛑
Forms	51	✅	⛑	⛑
Container Queries	34	⛑	⛑	⛑
Viewport	31	⛑	⛑	⛑
:focus-visible	27	✅	✅	⛑
position:sticky	24	✅	✅	✅
Typography	23	⛑	⛑	⛑
Custom Properties	20	✅	✅	✅
line-clamp	17	⛑	⛑	⛑
Houdini	16	✅	⛑	⛑
SVG	13	✅	✅	✅
Animations	11	✅	✅	✅
Logical Properties	10	✅	✅	✅
Gradients	10	⛑	⛑	⛑
object-fit	10	✅	✅	✅

[karlcow]

Also sometimes the specific issue is very broad.
Looking at the raw data… There are quite a couple of IE10 and IE11.
https://caniuse.com/?compare=ie+11,edge+95,firefox+94,chrome+95,safari+15&compareCats=all
And indeed if we add IE11 into the mix. This is painful.
The gap in between IE11 and Edge 95 must be very frustrating for web developers.

• 62 mentions of IE11
• 24 mentions of IE
• 1 mention of IE10

example:

Grid and everything newer that doesn't work in IE11

Grid layout (because of IE10 and IE11), clip-path, :nth-child(): of syntax

Inconsistent font-weight rendering in Firefox. Better compatibility with CSS grid in IE11.

Here the sentence is almost like they are expecting that IE will be updated.

The bright light at the end of the tunnel is that people are mentioning they have just dropped or will drop soon IE

So yes there should be a question about the support matrix. Browser x Version Number. I feel the pain for the webdevs

[gsnedders]

Misunderstanding of the technology? (devrel opportunity)

At least in a fair number of cases, anecdotally, many developers seem unaware that Safari 14.1 and later (shipped April 2021) has support.

[foolip]

@karlcow thanks for putting that table together, awesome! A few corrections I'd suggest:

• Scrollbars isn't a single thing, and I think some scrollbar styling is possible in some browsers. I think the key desire is custom scrollbars that look just like the developer wants, to avoid having to implement a custom one.
• Viewport is also a collection of things, not just the new bits in Viewport Measurement (including new Viewport Units) #4 but also some existing behaviors that probably still aren't interoperable enough.
• Typography is also a collection of things.
• line-clamp is supported as -webkit-line-clamp. Unclear if the prefix is the only problem, or if there are also important differences in behavior.
• Gradients is a collection of things.

Maybe ☂ or 🎁 for these umbrella/collection issues?

When it comes to support in older browsers, one can get the general shape of it from a sample of comments:

• I basically ignore whatever the latest new CSS features are because I know that a significant portion of my userbase uses such old browsers.
• Flex/Grid for old IE
• Everything that is not supported in IE11 and Safari 9
• It's not so much difference between browsers but rather the users' browser which might not be up to date, or they can only use an old one, etc.
• Mostly layouts when dealing with IE11 and older iOS Safari and Samsung Browser versions (flex gap, grid, clamp)
• flexbox gap - need to support older safari :-( and can't use @supports to detect support :-(
• have to encapsulate flexbox gap properties for old Safari browsers w/@supports (aspect-ratio) and all the hell of still needing to support IE11 for our clients still in dark ages.

I think the opportunity here would be anything that we can collectively do to speed up the upgrade pace of existing browsers. Also anything to phase out IE, or to give web developers ammunition about why they don't need to support it. https://canistop.net/ is one thing I'm aware of in that space.

[karlcow]

Maybe ☂ or 🎁 for these umbrella/collection issues?

love it. :) yes about collections of things. It's why I was using the medical red hat. As things to take care off. Because the evil is in the details. I wish I could talk with every single devs here to understand what they meant. :)

we can collectively do to speed up the upgrade pace of existing browsers

note that some people can NOT upgrade their browsers, because the OS on the laptop is too old. Or the mobile device is end of life. We have a tendency to forget (in the industry) that people keep sometimes their computer a lot longer than us. (Someone in my family has a 9 years old computer.)

[karlcow]

@foolip Discussing with @jgraham I wonder if there are subcategories in these answers. Such as example people answering issues about IE11 are beginners or not. Working in big companies or not.

[SebastianZ]

• line-clamp is supported as -webkit-line-clamp. Unclear if the prefix is the only problem, or if there are also important differences in behavior.

-webkit-line-clamp and line-clamp differ quite a lot. -webkit-line-clamp only defines the number of lines similar to max-lines and besides that requires display: -webkit-box; and -webkit-box-orient: vertical; to be set. line-clamp is defined as a shorthand for max-lines, block-ellipsis, and continue.

Sebastian

[foolip]

Thanks for clarifying, @SebastianZ! I also learned while discussing this proposal with colleagues that even though the -webkit-line-clamp is specified as an alias of line-clamp, it's not just a simple matter of shipping that, since line-clamp has additional requirements which aren't implemented for the prefixed variant yet.

This proposal ended up not included in Interop 2022, but I'd like to revisit it next year.