Results of State of CSS 2022 Browser Incompatibilities

[foolip]

State of CSS 2022 had this question:

Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?

There were 1995 responses to this question, out of 14114 survey takers in total.

The results site is still WIP, but the results will be here eventually:
https://2022.stateofcss.com/en-US/usage/#interoperability_features_freeform

In the meantime, I've gone through the initial patterns-based categorization from @SachaG and reviewed+fixed the categorization by hand, to produce this table:

Category	Percent	Responses	Example
has_selector	19.3%	386	":has selector"
at_container	18.4%	368	"Container Queries"
subgrid	16.0%	320	"Sub grid for now and it’s sad"
safari	13.3%	266	"Pre v16 Safari"
flexbox_gap	6.1%	121	"gap for flex"
firefox	5.1%	102	":has() missing from Firefox"
grid	5.1%	102	"grid layout"
other	5.1%	102	"Standardized CSS Module Scripts"
css_nesting	4.7%	93	"I wish nesting was more like SASS."
general	4.6%	91	"Almost every feature in this survey."
aspect_ratio	4.4%	88	"aspect ratio for picture is still missing and requires hacks"
scrollbar	4.2%	83	"scrollbar styling"
flexbox	3.9%	77	"Latest flexbox and grid features."
gap	3.4%	67	"gap on flex for a while, think it's ok now"
color_function	3.2%	64	"OKLab support"
backdrop_filter	3.2%	64	"backdrop-filter: blur()"
viewport_units	2.4%	47	"dvh and many of the features from this survey"
ios	2.2%	43	"Soft keyboard differences between Android/iOS"
at_property	2.2%	43	"Custom properties due to inability to use within media query declarations (i.e. @media (min-width: var(--small))"
chrome	2.1%	41	"content-visibility in Chrome (breaks a11y tree, reported)"
at_layer	1.9%	37	"CSS LAYERS"
browser_support	1.8%	36	Generic, I've suggested dropping this
line_clamp	1.6%	31	"--webkit-box and line-clamp"
is_where	1.5%	30	":where, :is"
scrolling	1.5%	29	"Smooth scrolling"
overflow	1.4%	28	"Sticky elements inside overflow hidden parent. Why? :("
input_styling	1.4%	27	"Input styling is still a mess"
svg	1.3%	26	"mix blend mode with SVGs"
logical_properties	1.3%	26	"Logical properties"
internet_explorer	1.3%	26	"All of them. I'm stuck supporting IE11 for Medical facilities."
scroll_snap	1.3%	25	"Scroll-snap-stop"
html	1.3%	25	"dialog element (I use a11y-dialog)"
typography	1.1%	21	"drop cap / ::first-letter"
color_mix	1.1%	21	"All the new color mixing features"
color_contrast	1.0%	20	"color-contrast()"

Categories with fewer responses than 20 aren't included here, but I went down to buckets of ~5 responses. A few things to note:

• The categorization of color issues isn't perfect. In total there are over 100 responses mentioning "color" or "colour". I've suggested improvements to this.
• Flexbox vs. gap needs some fixing. In total 192 responses include "flex"
• Form-related stuff could be grouped better. There's a lot of form styling complaints, as usual in surveys.
• "general" means a general expression of the problem without pointing to a specific example
• "other" means a specific feature which was mentioned less than a handful of times (to get them out of my review list)

[foolip]

Top responses that aren't part of Interop 2022 or any proposal for 2023:

• Nesting (implementation in progress)
• line-clamp (stuck in spec discussion)
• :is() and :where() (already shipped)
• Overflow and clipping issues (a mix of issues, similar to scrolling)
• Form control styling (the 2022 focus area is mainly about the API surface)
• Logical properties (already implemented, but would be worth taking a look at why inset was often mentioned)
• Typography (some bits in Interop 2022, but this is a cluster of issues)
• color-contrast(), which was dropped from Interop 2022

[foolip]

Interop 2023 launched yesterday, so closing this.