State of CSS 2024 Survey

[KyleJu]

A part of #764. Add a global bookmark for state of CSS surveys.

There are 20 features in the State of CSS 2024 survey. It will show the top 10 developer needs on the bookmark. Note that

• scrollbar styling is represented by three features through name:scrollbar
• browser_support is not a feature. Instead scoping is shown

[KyleJu]

cc @jcscottiii

[atopal]

Thank you Kyle, I think we should limit the top developer needs to the top 10 for now, supporting numbers get very low beyond top 5 already.

Here are some thoughts:

• Container queries is size container queries from all the comments that I have seen.
• View Transitions API is https://webstatus.dev/features/view-transitions?q=transitions
• For scrollbar styling, I'd use the three here: https://webstatus.dev/?q=scrollbar
• For animate on scroll: https://webstatus.dev/features/scroll-driven-animations?q=scroll+driven

Browser support is not a feature and we can skip that, and include scoping instead, which is https://webstatus.dev/features/scope?q=scope

[KyleJu]

Thank you Kyle, I think we should limit the top developer needs to the top 10 for now, supporting numbers get very low beyond top 5 already.

Here are some thoughts:

• Container queries is size container queries from all the comments that I have seen.
• View Transitions API is https://webstatus.dev/features/view-transitions?q=transitions
• For scrollbar styling, I'd use the three here: https://webstatus.dev/?q=scrollbar
• For animate on scroll: https://webstatus.dev/features/scroll-driven-animations?q=scroll+driven

Browser support is not a feature and we can skip that, and include scoping instead, which is https://webstatus.dev/features/scope?q=scope

Addressed. Now it shows 12 results in total, including 3 from scrollball

[atopal]

Thank you Kyle!

In the list transitions (CSS) is not the same as view transitions, can we change that to this one?

[KyleJu]

Thank you Kyle!

In the list transitions (CSS) is not the same as view transitions, can we change that to this one?

Corrected. I also saw your additional comment, and I plan to address them in follow-up PRs.

Is this PR ready to be merged or should we wait for all survey results?

[atopal]

Sorry Kyle, for some reason I thought this PR was only about the list of features, that's why added the comment to #764 764 We don't have to wait for the other survey results to merge this, but we do need the explainer text above the list before we can show this to users.

[KyleJu]

Sorry Kyle, for some reason I thought this PR was only about the list of features, that's why added the comment to #764 764 We don't have to wait for the other survey results to merge this, but we do need the explainer text above the list before we can show this to users.

Sounds good. Looks like I need a separate PR for the UI changes first. This PR will be merged after

[atopal]

LGTM!

[KyleJu]

@atopal after incorporating the UI changes. How does this look?

[atopal]

@atopal after incorporating the UI changes. How does this look?

Thank you Kyle! A few nits: Can we make the link to the survey a clickable link? If not, let's remove the link. The contrast seems a bit too low, can we go darker on the color? And finally, it would be good to leave a bit of a margin between the text and the "Percentage of features mapped" text.

Again, thank you! This is great!