Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Results of State of CSS 2022 Browser Incompatibilities #248

Closed
foolip opened this issue Nov 10, 2022 · 2 comments
Closed

Results of State of CSS 2022 Browser Incompatibilities #248

foolip opened this issue Nov 10, 2022 · 2 comments

Comments

@foolip
Copy link
Member

foolip commented Nov 10, 2022

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
Copy link
Member Author

foolip commented Nov 11, 2022

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
Copy link
Member Author

foolip commented Feb 2, 2023

Interop 2023 launched yesterday, so closing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant