State of CSS 2022 Questions: help us create the survey outline

[SachaG]

This year we are very lucky to have @LeaVerou participate in the survey design process. You can review the initial survey outline we came up with together here (new questions are marked with a 2022 tag):

• https://survey.devographics.com/survey/state-of-css/2022

And find the YAML file here:

• https://github.com/StateOfJS/StateOfJS-next2/blob/main/src/surveys/stateofcss/css2022.yml

Note that this is a starting point, and we value any feedback/suggestions about what to change, keep or remove.

What's New

An overview of the main changes so far:

• Removed the Pre-processors category as it feels like there isn't too much debate around that area.
• Got rid of "which browser do you primarily develop in?" question as we already ask which browsers people test in.
• Merged "Opinions" and "Environments" sections into new "Usage" section.
• Moved browsers question to "Other Tools".

New Features

• currentcolor
• color_mix
• wide_gamut_colors
• scroll_behavior
• scroll_padding
• font_palette
• focus_visible
• has_selector
• where_selector
• cascade_layers
• houdini_paint_api

Under Consideration

Some new CSS features (such as CSS nesting) were considered but are not currently included due to the lack of a MDN page, CanIUse page, or just very limited browser support (which are not necessarily disqualifying factors, but are still indicators that it might be too early to include a feature in the survey).

• object_view_box
• viewport_percentage_length_units
• relative_colors
• color_fonts
• houdini_typed_om
• houdini_layout_api
• houdini_animation_worklet
• if/when_else_rules
• trigonometric_functions
• stepped_value_functions
• css_nesting
• env_function

To Do

Still to do:

• Design a question to measure people's amount of JavaScript usage – maybe a slider between JS and CSS so people can adjust which percentage of each language they spend their time writing?

Related

See also this thread discussing improving the UI for features/libraries questions.

[quarkstuff]

[ Request ]

Add UnoCSS and Twind to the survey

Stars	Name	Category	Description
5.9k	UnoCSS	CSS-in-JS	The instant on-demand atomic CSS engine.
2.5k	Twind	CSS-in-JS	The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

[argyleink]

1. maybe add media query ranges? @media (240px < width < 720px) syntax
2. gradient color spaces? linear-gradient(in lch, rebeccapurple, hotpink)
3. subgrid?
4. overscroll-behavior?
5. @container

YAML link was 404 so I couldn't scrub my suggestions against it..

[LeaVerou]

@argyleink These are great! Container queries and subgrid are already there I believe. Could you please create new issues for these suggestions so we can keep track of them separately?

[argyleink]

if this is the yaml file, then subgrid and container queries was in there 👍🏻

added the others as requested!

[LeaVerou]

Locked conversation to encourage separate issues for suggestions.