Results of MDN CSS & HTML survey

[foolip]

These are the results of one of the surveys designed in #196. 10% of visitors to the CSS and HTML sections of MDN were shown this survey between Oct 31 and Nov 7, and there were 659 responses. It was possible to select up to 5 options. The question was:

For your needs as a developer, which features should be improved across browsers in the coming year? This means enabling support or fixing bugs. Please select up to 5. (This is not a complete list, other features may also be planned.)

Value	Percent	Responses
CSS media queries range syntax (example: @media screen and (428px < width < 744px))	36.9%	236
CSS custom properties (@property)	28.3%	181
CSS attribute references (attr() function)	27.2%	174
CSS math functions (round(), sin(), pow(), abs(), etc.)	27.0%	173
CSS color spaces and functions (color(), lab(), gradients, etc.)	24.8%	159
CSS :nth-child() pseudo-class with selector-list argument	23.0%	147
CSS backdrop-filter property	21.1%	135
CSS images (border-image, image(), image-set())	19.8%	127
CSS containment (contain, contain-intrinsic-size, content-visibility)	19.4%	124
CSS :blank and :empty pseudo-classes	19.2%	123
CSS scoping (@scope at-rule)	16.4%	105
CSS mask property (mask-image, mask-mode, etc.)	15.8%	101
CSS outline property (including outline-color)	14.5%	93
CSS :user-invalid and :user-valid pseudo-classes	10.9%	70
Custom Paint API (Paint Worklet)	10.9%	70
CSS Typed Object Model (computedStyleMap() API)	9.4%	60
CSS color font feature detection and palettes	8.9%	57
CSS motion path (offset-path, offset-distance, etc.)	6.9%	44
CSS leading-trim property	5.8%	37
CSS :dir() pseudo-class	5.0%	32

[foolip]

Also sharing a figure from the PDF for this. It's hard to read, but makes it visually obvious that some options are very close, and the relative order of them isn't very meaningful:

[foolip]

I've used https://www.surveysystem.com/sscalc.htm to get an idea about the confidence intervals for these numbers, using a Sample Size of 659, population of 20 million, and percentages from the table above. At 95% CI, the largest interval you get is 3.68%, which would mean ~37±3.7% for CSS media queries range syntax.

The meaning of this is something like "if the sample is representative of all web developers, what proportion of all web developers are we 95% confident would pick CSS media queries range syntax as one of their 5 features given these choices?" The first "if" is very important of course.

This is to illustrate that many adjacent options in the ranking have overlapping confidence intervals. I'll be commenting on proposals but not using a rank number, but instead talk about top/middle/bottom third of the ranking, to somewhat mitigate this. (The boundary between each third is still uncertain.)

[foolip]

Interop 2023 launched yesterday, so closing this.

[SachaG]

I just stumbled on this issue, very interesting! I hadn't seen those survey results before.

FYI here's the options we are considering for our current version of a similar question for CSS 2023 (based on the freeform data from CSS 2022):

### Browser Incompatibilities

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

:has()

@container

Subgrid

Flexbox gap

Grid

CSS Nesting

aspect-ratio

Scrollbar Styling

backdrop-filter

Flexbox

There are some items in there like Grid and Flexbox that we might remove even if they were popular picks (presumably people are under the mistaken impression that these aren't well-supported by modern browsers, and we don't want to reinforce that impression).

Also, as you can see the two lists are quite different, I was wondering why items like subgrid, has, @container, etc. were not included in the MDN survey? Is it just because they are not items that were under consideration for interop 2023 for whatever reason?

[foolip]

@SachaG we dropped a few options from the MDN short survey because we fully expected them to be the top picks and we'd get less signal about the remaining areas. IIRC, that included at least :has() and @container, both of which we included in Interop 2023. And Subgrid was in Interop 2022, so we didn't need to ask about it again.

Are you still planning a freeform question for State of CSS 2023, or just a multiple choice one?

[SachaG]

Ok that's what I thought, that makes sense. Our current plan is to have multiple choice questions with an "other…" option for browser compatibility issues and missing CSS features, and then probably just a freeform textfield for "other CSS pain points".

[foolip]

I think that if there's only one question, freeform as in https://2022.stateofcss.com/en-US/usage/#interoperability_features_freeform seems like a safer bet. Or are you making the same change to all surveys?