State of CSS 2020 Questions

[SachaG]

Here is the YAML file containing the outline of the 2020 State of CSS survey:

https://github.com/StateOfJS/StateOfJS-Vulcan/blob/2020/packages/stateofjs/lib/surveys/yml/css2020outline.yml

It's currently more or less a copy of the 2019 version of the survey (with some parts also taken from the State of JS 2019 survey) but we can use it as a starting point! Let us know what you think we should add/remove/change.

[Kilian]

Interactions Not technically an "interaction", but asking about scroll-margin on the interaction page would be nice.

Units Here's a full list of CSS units that I've gathered for various uses in Polypane:

  ex
  gd
  rem
  cm
  mm
  q
  in
  pt
  pc
  px
  ch
  %
  fr
  vw
  vh
  vmin
  vmax
  deg
  grad
  rad
  turn
  ms
  s
  hz
  khz
  dpi
  dpcm
  dppx
  cap
  ic
  lh
  rlh

CSS-in-JS astroturf is another one you could add. It's conceptually similar to linaria so could be combined with it.

About you For gender: both non_binary and prefer_not_to_say have these underscores in them and none of the options are capitalized like the answers to other questions.

[SachaG]

Not technically an "interaction", but asking about scroll-margin on the interaction page would be nice.

I think that's probably contained within scroll-snap? Or is it a separate thing?

Here's a full list of CSS units that I've gathered for various uses in Polypane:

Do you think we should ask about all of these or just try to feature the most common?

And thanks, I'll fix the other issues!

[Kilian]

I think that's probably contained within scroll-snap? Or is it a separate thing?

It's a separate thing, to control the offset when someone scrolls to a fragment identifier. You can use it to account for e.g. a fixed header.

Do you think we should ask about all of these or just try to feature the most common?

Depends on what you want to figure out :) There's a few, like hz and khz that are definitely not in use (just part of the spec) but other values like deg/grad/rad/turn could be interesting to ask about.

[domyen]

Nice work! Some feedback:

Environments > Form factors I'm curious to know about which form factors folks are developing for in addition to testing.

Resources Perhaps add newsletters like Sidebar and Heydesigner here?

[SachaG]

Good suggestions!

[SachaG]

Nice work! Some feedback:

Environments > Form factors I'm curious to know about which form factors folks are developing for in addition to testing.

Oh I see what you mean, I kinda assumed that people developer for every form factor through responsive design but then prioritize specific ones for testing… Maybe we'll reword the question.

[adamwathan]

Thanks for sharing this preview @SachaG!

Only feedback I have at the moment is updating "Tailwind" to "Tailwind CSS" (we use the full name almost exclusively), and to consider updating "Atomic CSS" to "Atomic/Utility-First CSS" or "Utility-First/Atomic CSS", because I think that terminology is much more dominant these days. I think Tailwind CSS is the most popular tool in that category these days and very few of our users think of themselves as part of the atomic CSS world, most of them are actually Bootstrap converts.

[foolip]

In the survey preview, I spot some odd capitalization of CSS properties when used as headings/titles, like "Position: sticky", "Object-fit" and "Clip-path". If that's a choice that seems OK, but pointing it out in case it's accidental.

[foolip]

I also have a humble proposal for alignment with the MDN Developer Needs Assessment on one question, which is an overall satisfaction question. The draft already has Overall Happiness questions for Pre-/Post-processors and other sections on this form:

On a scale of one (very unhappy) to five (very happy), how happy are you with the current overall state of things as it relates to the options listed above?

🔘 Very Unhappy 🔘 Unhappy 🔘 Neutral 🔘 Happy 🔘 Very Happy

I wonder if these are new for this year, as I can't spot the results for a similar question in https://2019.stateofcss.com/technologies/pre-post-processors/.

In the 2019 and 2020 MDN Developer Needs Assessment, we've had / will have this question:

How would you rate your overall satisfaction with the Web, as a platform and set of tools, to enable you to build what you need or want?

🔘 Strongly Satisfied 🔘 Satisfied 🔘 Neither Satisfied nor Dissatisfied 🔘 Dissatisfied 🔘 Strongly Dissatisfied

We're also asking this in other surveys that the Chrome DevRel team is running, and long term improvements in this metric is our goal and guide for prioritization.

To my proposal. Asking about overall satisfaction with the web early (to avoid priming) in the survey would be great for comparing across this survey and MDN's. It's in particular if the results differ by a lot that it can give us clues about the contribution of CSS to overall developer experience.

---

As a second and less important suggestion, might it make sense to also ask early on about overall satisfaction (or happiness) with CSS itself? In MDN Browser Compatibility Report (page 8) we saw a pretty stark difference with a similar overall-vs-area approach:

Comparing results for overall web, overall CSS and specific areas like Pre-/Post-processors, might reveal what's mostly driving negative sentiment and where the ecosystem (including browser vendors) should invest more.

[SachaG]

To my proposal. Asking about overall satisfaction with the web early (to avoid priming) in the survey would be great for comparing across this survey and MDN's. It's in particular if the results differ by a lot that it can give us clues about the contribution of CSS to overall developer experience.

We have our opinion questions at the end of the survey, do you think we could put those questions there as well? Also could we keep our unhappy/happy scale? I think it's probably comparable to dissatisfied/satisfied?

So I could add one happiness question about the web in general, and one about css in general?

[flackr]

Interactions:

Might make sense to ask about touch-action and pointer-events?

[argyleink]

Rad, stoked to see you spinnin this up again @SachaG 🤘 💀
The yaml is comprehensive (and just so easy to read, what a lovely format choice), I really enjoy seeing the CSS taxonomy.

Here's some of my suggestions as I passed through the sections, no strong feelings about any of them, so take what you think fits!

layout:

• floats
• content-visibility
• @media
• @supports
• intrinsic sizes (min-content, max-content, auto, etc)
• relative-flow (i18n)

shapes_graphics:

• box-shadow and/or gradients
• backdrop-filter

typography:

• leading-trim
• text-emphasis
• text-underline (position & offset)

animation:

• houdini
• @scroll-timeline
• perspective

other_features:

• native nesting via @nest
• clamp()
• gap
• writing-mode
• logical-properties
• larger color gamuts
• @import url('landscape.css') screen and (orientation:landscape) loading (maybe need a loading section)
• <link media="print" href="print.css" rel="stylesheet" /> loading
• modules import styles from './component.css' as style

pseudo_elements:

• ::cue or ::cue()
• ::backdrop
• ::part

tree_document_structure:

• :is()
• :where()
• :has()

interaction:

• :target

other_tools: utilities:

• PresetEnv (PostCSS)

podcasts:

• CSS Podcast (selfish-ish plug..)

and... maybe a new section..? I felt like media queries were missing, as well as new queries that provide hooks into capability or preference checks.

- id: user_preferences
  template: multiple
  allowmultiple: true
  allowother: false
  randomize: false
  suffix: choices
  options:
    - `prefers-reduced-motion`
    - `prefers-color-scheme`
    - `prefers-reduced-data`
    - `prefers-reduced-transparency`
    - `prefers-contrast`
    - `forced-colors`
    - `inverted-colors`
    - `any-hover`
    - `any-pointer`
    - `color-gamut`

[shadeed]

Great work! Thank you for the preview.

I think it would be good to add CSS logical properties, and maybe to ask if developers built a bidirectional website (LTR & RTL).

[flackr]

Would this be the place to ask whether they have used passive event listeners (especially in combination with touch-action) or would that be more appropriate for the state of JS?

[SachaG]

@argyleink thanks for the great feedback! Btw you can also preview the survey here just in case you only relied on the YAML.

Your suggestion of floats brings up a good point: our goal is to measure the evolution of CSS so we purposefully leave out "old" properties and features that we assume everybody already knows. But these days I'm guessing a lot of people who came up with Flexbox & co have never used floats, so maybe we should still include them…?

It's always a balance between collecting as much interesting data as we can, and ensuring the survey doesn't take too long to complete…

And re: user_preferences, that's a great idea. prefers-color-scheme especially has been really trendy with everybody adding dark modes.

@shadeed good point about RTL, can't believe it wasn't included yet. Thankfully I found this great guide by some random guy that will be a big help for me :)

[SachaG]

@flackr maybe State of JS?

[foolip]

To my proposal. Asking about overall satisfaction with the web early (to avoid priming) in the survey would be great for comparing across this survey and MDN's. It's in particular if the results differ by a lot that it can give us clues about the contribution of CSS to overall developer experience.

We have our opinion questions at the end of the survey, do you think we could put those questions there as well? Also could we keep our unhappy/happy scale? I think it's probably comparable to dissatisfied/satisfied?

So I could add one happiness question about the web in general, and one about css in general?

@SachaG if you already have the opinion questions at the end and they're using happy/unhappy from previous years, then adding a web-wide and CSS-wide question there sounds perfect. Borrowing a bit from both quoted questions, perhaps the web-wide one could be:

"On a scale of one (very unhappy) to five (very happy), how happy are you with the Web, as a platform and set of tools, to enable you to build what you need or want?"

On the ordering, we have deliberately moved our equivalent question to very early on in the MDN DNA survey, to avoid priming people towards the negative with the many questions probing for shortcomings with the web. We haven't done research to see how big such an effect might be, but doing it early on seems cleaner especially when then comparing the results from multiple surveys. However, I think the comparisons within State of CSS 2020 will be more useful than cross-survey comparison, so if asking in the beginning doesn't fit well into your existing structure, then at the end would be 95% as good.

[SachaG]

Hey everybody! We're getting closer to the launch date so here's a last chance at reviewing the final survey:

https://survey.stateofjs.com/survey/state-of-css/2020

We changed some of the questions, and also spent a lot of time localizing the survey in different languages. Hopefully everything works!

[argyleink]

Thanks @SachaG!

I had a smooth run through! I was confused by this question tho?

[SachaG]

@argyleink oh, it should be custom properties instead of logical properties!

[huijing]

Sorry for being so late, but was wondering if it was an issue on my machine that the password field has no placeholder text (placeholder attribute had no value for me)?

The survey is pretty comprehensive and I think @argyleink's suggestions had already been incorporated. Is this ready for public sharing?

[SachaG]

@huijing thanks! that was an issue with missing translation strings, I fixed it 👍

And we haven't launched the survey officially yet so please don't share it just yet! We'll launch it very soon though :)

[foolip]

I just took the survey myself and could see how my suggested questions for happiness with the web and CSS and large turned out, thanks @SachaG! I do want to report that after finishing the survey, things look a bit broken:

Thank pink/beige bar of color is this markup: <div role="alert" class="fade flash-message alert alert-danger show"><span></span></div>.

Am I in danger? :)

[SachaG]

Oh thanks, I'll have to look into this.

[fantasai]

Not sure what the deadline was for feedback, but here's some comments:

I think that's probably contained within scroll-snap? Or is it a separate thing?

+1 to @Kilian’s suggestion to mention scroll-margin. I'd pair it with scroll-padding, which actually should work better for the fixed-header case. They work even if you don't have snapping turned on.

Question about direction “Also includes dir attribute” is a bit confusing. And also, I wouldn't list it. We very strongly encourage devs to not use direction. Probably fewer people know it exists the better... But you could ask about :dir()!

On media queries, I would suggest the pointer and hover queries, as they're very useful for switching layouts for tablet vs. desktop, but I suspect most people don't know about it. (I think prefers-contrast and forced-colors will be two other interesting ones, but they're fairly bleeding-edge and not widely implemented, maybe next year.)

+1 to @argyleink’s suggestion of min-content/max-content

I might add text-decoration-style/text-decoration-color and break-inside/break-before/break-after.

I'm not sure exclusions is interesting to list, it's not implemented except in old IE engines and doesn't have much forward momentum.

[SachaG]

Since I had some great feedback on the questions a while back I'm reopening the issue in case some of you are interested in checking out this report I've been working on:

https://deploy-preview-32--stateofcss2020.netlify.app/en-US/report/

It's the same data, but presented in a more narrative, "scrolly-telling" way. I thought the CSS results didn't quite get the attention they deserved so hopefully this can be a second chance at getting them out to more people!