State of CSS 2023 Questions Feedback

[SachaG]

You can now preview the upcoming 2023 edition of the State of CSS survey:

https://survey.devographics.com/en-US/survey/state-of-css/2023/

We will be accepting feedback for a 1-month period until the end of May, and then field the survey (start collecting answers) after that.

Here are the new changes @huijing and I have added so far:

• Added the text-wrap: balance feature
• Added the individual transform properties feature

[Kilian]

new colors look great!

• Gap for flexbox has been generally available since early 2021, should it still be included?
• "Viewport-Percentage Length Units" might need additional explanation that it's about lvh/svh etc?
• Asking about multi keyword values for display could be interesting. It's safari/firefox only at the moment: https://caniuse.com/mdn-css_properties_display_multi-keyword_values
• typography: leading-trim/text-box-trim is a potential interesting one to ask about
• Accessibility: prefers-reduced-transparency is landing in Firefox soon, could be included
• The CSS Nesting example still includes @nest but that's no longer part of the spec
• For the show more, if there's just a few more options, don't clamp. Now "show more" shows when there are more than 10 options, but "Testing Environments" has 12. It'd be nicer to just show those twelve. I'd code it as "when there are more than 15 options, clamp to 10 and add a button to show more.
• "What do you mainly use CSS for?" could have a "desktop apps" option.

That's it, looking good!

[argyleink]

some ideas!

• color-mix()
• hwb, oklch, lch, oklab, lab, etc
• linear()
• animation-composition: add
• constructible stylesheets
• view transitions
• style queries
• @scope
• gradient color spaces

[SachaG]

Thanks for all the great suggestions! A quick note about something:

Gap for flexbox has been generally available since early 2021, should it still be included?

Talking with @huijing (who is the lead survey designer this year btw), we decided to keep a few "easy wins" in the survey, because if we only ask about cutting edge features it creates the experience of clicking "I don't know this" over and over again for the average respondent, which is pretty bad for morale…

[SachaG]

https://keithjgrant.com/posts/2023/04/scoped-css-is-back/

[huijing]

For now, we will be leaving off @scope because it's really early days, given it's still under an experimental flag in Chrome and not in other browsers.

Research notes

• a scope is defined as the subtree or fragment of a document, which can be used by selectors for more targeted matching
• the @scope block declares a scoping root and optional scoping limits associated with a set of style rules
• part of [CSS Cascading and Inheritance Level 6](https://drafts.csswg.org/css-cascade-6/#scope-atrule)
• https://keithjgrant.com/posts/2023/04/scoped-css-is-back/
• currently behind an experimental feature flag since Chromium 104
• Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1280240
  • Devtools issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1337777
• Firefox issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1830512
• Webkit issue: https://bugs.webkit.org/show_bug.cgi?id=101312 (unclear if this is the relevant one)

[SachaG]

Good post about linear(): https://fullystacked.net/posts/linear/

[foolip]

My feedback:

• I'm wondering about Viewport-Percentage Length Units, with 100dvh being the example. I wonder if this is the name of the feature in the mind of most web developers? https://web.dev/viewport-units/ and https://caniuse.com/viewport-unit-variants call it "small, large, and dynamic viewport units."
• For blend-mode, the feature is called blend-mode, but the example is using mix-blend-mode. Since there's no blend-mode property, how about renaming the feature to "Blend Modes"? I don't know the feature, but see that title on https://web.dev/learn/css/blend-modes/.
• features.linear_easing_function and some other features are missing a human readable name.
• touch-action is missing a code example
• text-box-trim is only implemented in STP, under a different name, so it seems too early to include.
• color-contrast() is behind a flag in Safari, but not shipping in any browser. Too early?
• CSS Comparison Functions as a name for clamp() (or min() or max()) is surprising to me, is this what developers call it? I'd call them math functions, but the problem is there are a bunch of other math functions too. Just call it "clamp(), min(), and max()"?

I can't proceed beyond CSS Frameworks in the survey, when trying to continue to CSS-in-JS I get "client_data_validation_error: Encountered an error while validating client data during update".

[SachaG]

Sounds good, I think we can leave out text-box-trim for now then. As for color-contrast(), it's already been included for a couple years so I think we can leave it, as I don't want to remove something and then have to add it again in the future. I've fixed the other issues.

[foolip]

Ah, I didn't realize color-contrast() was included in the past. I agree about keeping it since it will eventually ship everywhere I think.

[argyleink]

I agree about keeping it since it will eventually ship everywhere I think.

it's been renamed to contrast-color() and I'd recommend not listing it as it's not likely to ship anywhere soon. it's got a few big issues that need resolved before it can move forward.

it did get prototyped by chromium and safari tho, so it felt near, but it's regressed heavily in the spec process. DM me if you want more details.

[SachaG]

OK, if it's been renamed we can remove it and re-include it under the new name when it's ready.

[rachelandrew]

Just a few comments on the draft:

The definition of subgrid isn't really accurate, as it's not about nesting grids. A better definition might be "Inherit the track number and sizing from the parent grid into a nested grid."

@container should we separate size and style queries? I imagine when people think about container queries they are thinking size.

"Intrinsic sizing", I think this should be "Intrinsic sizing keywords" as there are other places you might be using intrinsic sizing without using the keywords specifically.

[SachaG]

@rachelandrew thanks for the feedback!

• Should we just remove the definition for subgrid? I don't think there's much confusion as to what the term means anyway.
• I thought about that but we don't usually differentiate for different uses of the same feature. I agree it'd be good to let people know that style queries exist, I'll think about it.
• Good note about Intrinsic sizing.

[foolip]

More feedback:

• In Other Tools, the prompt is "just check the ones that you use regularly", but I think given all the preceding questions that include "heard of it" as an option, I think it's important to stress that we're now asking about regular use. How about changing "Utilities that augment CSS" to "Which pre- or post-processors do you regularly use?"
• In Testing Environments, one option is "Desktop Applications" which I think will be misunderstood as Electron apps or possible desktop PWAs. How about just "Desktop"?

[foolip]

The Browser Incompatibilities question is the most important one for Interop 2024 planning, and I'm worried that it's mostly features we already know about, with not much opportunity for new things to surface. Comments on some specific features listed:

• attr() is mostly interoperable, what developers want is a new capability that doesn't exist in any browser yet, see [css-values] Security concerns regarding attr() w3c/csswg-drafts#5092
• Flexbox gap is shipped everywhere, well tested and broadly available per https://caniuse.com/flexbox-gap. Any remaining concern about it are mostly likely about user upgrade speed, not the feature implementation quality
• aspect-ratio also seems to me like it's in good shape, and any concerns are about the rollout

I think freeform answers is probably preferable, even though it's much more work to analyze. With a prepopulated list I suspect there will be much fewer "other" pointing to things not in the list, and importantly there's also no way to compare the importance of the features that are on the prepopulated list to the ones entered as "other".

[romainmenke]

Under color :

Gradient Color Spaces

Can we pick a consistent name for this feature?

• In a draft for MDN content it is listed as Color interpolation method.
• In BCD it is Interpolation Color Space
• Here it is Gradient Color Spaces

I don't think people will know it if the name is different everywhere :)

Should this also ask about the hue interpolation method? longer|shorter|increasing|decreasing hue

---

The CSS nesting question seems to showcase an outdated specification where @nest still existed.

---

The tools list seems a bit outdated?

• cssnano
• Stylelint
• PurifyCSS
• Prettier
• PurgeCSS
• Autoprefixer
• ACSS
• Other…

I am biased here, so please do your own research.
But I would like to see things like :

• postcss-preset-env
• lightningcss
• projectwallace

I don't see why something like purify-css, which doesn't seem widely used, is included here.

https://www.npmjs.com/package/purify-css?activeTab=versions

What is ACSS?
I tried googling acss css tool but I did not find a single obvious result.
Is it atomizer? or automatic css or ...

[SachaG]

The Browser Incompatibilities question is the most important one for Interop 2024 planning, and I'm worried that it's mostly features we already know about, with not much opportunity for new things to surface.

@foolip I think there's a set of features that are people not using because they think browsers don't support them, when in reality they are supported (I would say even grid and flexbox might fall in that category).

So I agree we don't want to keep these features in too long otherwise it just propagates that misconception, I've removed the ones you pointed out.

And I agree a freeform field would bring in a more diverse set of answers, but I think predefined options are better for the vast majority of respondents, who will probably just answer :has(), @container, etc. instead of more exotic features. So I'd rather just add more items to the predefined list if you think anything is missing?

[SachaG]

@romainmenke

• Happy to adopt any naming for Gradient Color Spaces, it's hard to pick a name when there's no MDN page yet. Is this the same feature?
• Yes we'll change the CSS Nesting code example
• Thanks for the tool suggestions, I'll add them
• Acss is Atomizer I guess: https://acss.io/

[romainmenke]

Happy to adopt any naming for Gradient Color Spaces, it's hard to pick a name when there's no MDN page yet. Is this the same feature?

Yes that is the same feature, but that is likely sourced from BCD.

I don't want to take this thread of topic with bikeshedding. So unless there is an obvious candidate that can be used consistently everywhere, maybe best that I open a new issue for this specifically?

[SachaG]

That's fine, I think Interpolation Color Spaces is probably the best name for now.

[foolip]

So I'd rather just add more items to the predefined list if you think anything is missing?

@SachaG the challenge is that the most interesting data is the answers we can't already predict. I think a somewhat common solution to this is a pre-study, but we're not doing that here.

But let me review the list again alongside the freeform responses from last year and see if anything is missing in my estimation.

Another "trick" here might be a much shorter list that only covers the known top 3, so that survey takers are nudged more towards the "other" option. Could that make sense, have you tried that elsewhere?

[atopal]

@argyleink , had mentioned it already, but can we add view-transitions? There is one shipping implementation and anecdotally a lot of interest.

[huijing]

@argyleink , had mentioned it already, but can we add view-transitions? There is one shipping implementation and anecdotally a lot of interest.

We are including it in this year's edition.

[foolip]

For Browser Incompatibilities, I've gone back to web-platform-tests/interop#248 (underlying data) and checked for missing things. I would say:

• Color-related issues. In terms of syntax, that would be color() and functions like oklab() which are equivalent. And there color-mix()and contrast-color(). I think a single option for color-related stuff is best, because it can be hard to draw a clear line between them.
• Cascade Layers. It's in all browsers, but it's new enough that I suspect many developers might still avoid it because older browsers don't support it. Roughly 2% answered this last year.
• line-clamp, which I see in survey after survey. 1.6% answered this last year.

However, I'm still nervous about changing the question type. I was able to make use of the long tail answers around 1% in web-platform-tests/interop#214 (comment) and assume we'll have less of this given predefined options.

[SachaG]

To sum up the pros and cons:

Freeform only

• Pros
  • More response diversity
  • No biasing
• Cons
  • Lower participation (more effort than just clicking checkboxes)
  • Harder to analyze data

Predefined Options + "Other…"

• Pros
  • Higher participation
  • Easier to analyze data
• Cons
  • Feedback will gravitate towards predefined options; respondents might ignore or miss "other…" field
  • Risk of biasing data if we pick the wrong options

My two cents: we should try Predefined Options + "Other…" this year, and if the results prove less usable than last year's freeform-only version we can always switch back for 2024.

My suspicion though is that any feature that is significant enough to be considered as part of the interop process will make it into the dataset anyway, even with the lowered visibility of the "other…" field compared to the freeform-only field.

[foolip]

I think the participation is the strongest argument for this change. https://2022.stateofcss.com/en-US/usage/#interoperability_features_freeform had 1701 responses, which feels like a lot when reading through all of the responses, but it's only ~12% of survey takers.

So even though I'm still worried how predefined options can affect the results, I can get behind trying it and evaluating. In the best case, we'll get significantly higher participation and maybe even more "other" freeform than before. It's worth a shot!

[shhaine]

I cannot navigate to the next page smoothly at times. Red bars appear on the lower right part (See image). It use to say there error.undefined. Whenever I encounter that, I'd have to refresh but my initial answers disappear.

[SachaG]

Oh, that means there's an error during the save process, I'll look into it.

[SachaG]

@shhaine are you taking the survey with an account, or as guest? also is this happening on all the pages, all the time, or only some of the time?

[shhaine]

I am taking it as a guest only. Ceases to happen after a few refreshes. But happens again the next time i visit.

[SachaG]

Hmm, I have not been able to recreate the issue so far, but I'll keep trying.

[shhaine]

Just checked it. It still happens. How to possibly reproduce:

1. Answer the first question on Subgrid
2. select shapes & graphics button on the lower right part to progress to the next page.

The red bar appears.

[SachaG]

Could you

1. give me the full URL (including the ID parameter) that this is happening on?
2. try again but with the devtools network tab open, and let me know what the saveResponse request's status (200, 500, 405, etc.) is and what that request's Response tab says?

[shhaine]

[SachaG]

Hmm, I still don't know what the issue is but I tried to at least improve the error reporting so that it doesn't just show an empty red box.

[shhaine]

[shhaine]

It works now, @SachaG!

[shhaine]

By any chance @SachaG can respondents save their responses and continue at a later time? I am coming from the summary of constructive feedback from #63, where 4.4% suggested to make it shorter. Not sure if the team indeed was able to reduce the number of items but aside from saving their responses to continue later (suggested by 0.7%), it might also be helpful to indicate on the landing page the estimated time it needs to get the survey done.

[SachaG]

Yes responses are saved every time you navigate to another page. I will add a message that indicates that.

[shhaine]

Landing page

• Make the survey objectives clearer to the respondents so they know why we have to ask demographic-related questions (e.g., gender, race, etc.). This is because there are respondents who would rather leave them blank and just be after the feature related questions (learning experience).
• Indicate who the target participants are.
• Indicate estimated time needed to accomplish the survey.
• Highlight that this will be a learning experience, too (form of reward - 1.57% wants a reward; about 54.5% wants a learning experience)

[shhaine]

Percent completion

Comments on not getting satisfied since completion rate is left at say 70% when in fact they chose to skip 30% because they are optional anyway. This is related to many other concerns. Address this by implicitly making the questions required through

• addition of useful choices such as None of the above, whenever necessary; and adding program logic so that when it is chosen, other options cannot be checked / selected anymore.
• (might be difficult to accomplish for this round?) addition of user flow so that I will not be asked certain questions if I am a student
• possibly addressing freelancer case in the options when answering number of employees in the company he/she is employed and their variable salary ranges
• addressing case when I am neither a student nor employee but searching for a job
• @SachaG guaranteed respondent anonymity so they would not hesitate to respond to sensitive questions, if any.
• @huijing making sure that the options presented are exhaustive enough such that all of the respondents will accurately fit into one of them, esp. on questions related to features with the ff options. (This might be helpful. Select OPTIONS for GENERAL and ALL ENCOMPASSING, CLEAR OPTIONS for SPECIFIC)
  • Never heard of it/Not sure what it is
  • Know what it is, but haven't used it
  • I've used it
• @huijing also this set
  • Used it > Would use again
  • Used it > Would not use again
  • Heard of it > Would like to learn
  • Heard of it > Not interested
  • Never heard of it/Not sure what it is

[GGG-eee]

In addition to Shaine's feedback, the current choices would also make the developers on edge to answer if they would like to learn or not. Probably having some kind of a "neutral" option would be great like "Heard of it > Not yet decided" or something much better.

Also would be useful to separate "Never heard of it/Not sure what it is" as I think they are two different things

[shhaine]

Clear Intent

Being more intentional in this part of the form:

By "Tell us more about your choice", what do we really want to know about? Say, do we want to ask if there is anything to improve on the feature based on your experience?

This will make it easier for the respondents to answer. Furthermore, it will be easier for us to analyze.

[SachaG]

In addition to Shaine's feedback, the current choices would also make the developers on edge to answer if they would like to learn or not. Probably having some kind of a "neutral" option would be great like "Heard of it > Not yet decided" or something much better.

Just a note that we will probably not modify this set of options as we can only do year-to-year historical comparisons if we preserve the same wording and the same option set.

[jsnkuhn]

Would be useful to see a gauge of interest on corner-shape. Not sure what the requirements are to be added to survey though.

https://drafts.csswg.org/css-backgrounds-4/#corner-shaping

[SachaG]

Thanks all for your feedback! The survey is now live!

https://survey.devographics.com/en-US/survey/state-of-css/2023

(As always, any help with sharing the news is much appreciated!)