State of CSS 2024 Suggestions

I wonder if the section about CSS frameworks (bootstrap/material/etc.) in its current state still makes sense. In the past I've tried to always keep the list framework-agnostic, but I feel like in 2024 if you do use one it's almost always linked to a specific framework (with the exception of Tailwind).

Not sure if I should embrace that and list e.g. shadcn or Chakra UI; or else de-emphasize that section altogether.

And on the opposite side of the spectrum there's also classless frameworks like https://picocss.com/ which are interesting too, but probably have far less usage…

SachaG commented 2 months ago

New CSS-in-JS libraries:

SachaG commented 2 months ago

In 2023 we had these three related questions:

Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?
What features do you feel are currently missing from CSS altogether?
Any other pain points related to writing CSS?

Do we want to keep them? Do we want to make them freeform (less biasing but more processing work) or predefined?

SebastianZ commented 2 months ago

In 2023 we had these three related questions ... Do we want to keep them? Do we want to make them freeform (less biasing but more processing work) or predefined?

They should definitely be kept. Regarding predefined or freeform, I think last year we had both, right? I.e. people could add more points in a custom field.

In addition to the points you mentioned, completely freeform answers probably also means less answers as many respondents might not bother to write things. On the other hand, only providing predefined options misses individual needs.

So I'd go for a mix of predefined options plus a freeform field for features not covered by them.

Sebastian

SebastianZ commented 2 months ago

I quickly went through the release notes of all three major browsers and have these feature suggestions (not already in last year's survey, AFAICS):

MPA View Transitions
Scroll-driven Animations
@scope
Style container queries
:user-valid and :user-invalid
transition-behavior
font-size-adjust
zoom
align-content on block layout
scrollbar-width and scrollbar-color
overlay
::spelling-error and ::grammar-error
light-dark()
New values for clip-path
pretty and stable values for text-wrap
Math functions (abs(), log(), round(), etc.)
Color spaces in gradients
Enhanced motion paths
New media features like display-mode: picture-in-picture and prefers-reduced-transparency, update, scripting, overflow-block, and overflow-inline
Alternative text for content
each-line and hanging values for text-indent
Custom Highlights API
Fallback value for attr()
lh and rlh units
support() in @import
font-format() and font-tech() in @media

Sebastian

SachaG commented 2 months ago

@SebastianZ thanks, that's super helpful!

SachaG commented 2 months ago

margin-trim

SachaG commented 2 months ago

Should we differentiate between container size and style queries?

SebastianZ commented 2 months ago

I'd say so, as the usage results will probably be very different. Size queries are already widely available while style queries currently only work in Chrome (and Safari TP).

Sebastian

SachaG commented 2 months ago

Also I know very little about Tailwind but given its popularity should we devote more of the survey to it? What could we even ask?

foolip commented 2 months ago

From skimming features in https://wpt.fyi/interop-2024 I think all the big features are already covered. What stands out is @starting-style and transition-behavior, as new features but which I suspect don't make sense on their own. The original motivation for these features was to allow popover animations.

I think that web developers mostly think about these problems as animating to/from display: none and to/from automatic height. Not sure how to best represent that in a survey.

una commented 2 months ago

@foolip they are slightly different than animating to/from display:none (which is currently not supported in all browsers, while @starting-style and transition-behavior are going baseline soon). I've been grouping all of these features under "entry and exit effects"

foolip commented 2 months ago

@una thanks for the correction, I don't understand all the pieces and how they fit together. Do you think there's something worth asking about here in the 2024 survey?

hvanops commented 2 months ago

In the 2023 survey, for the question: "How happy are you with the overall state of CSS?" link

it would be great if developers could optionally be able to add some commentary with their vote, and for the votes to be linked to that commentary so that we can see, for example, what "happy" developers say vs "unhappy" developers.

SachaG commented 2 months ago

@hvanops coincidentally @una suggested the same thing and I just finished implementing it! And adding the ability to filter comments according to the response is a great idea, it's already available for experience/sentiment questions but we could probably generalize it:

SachaG commented 2 months ago

@foolip they are slightly different than animating to/from display:none (which is currently not supported in all browsers, while @starting-style and transition-behavior are going baseline soon). I've been grouping all of these features under "entry and exit effects"

I think it does seem like features worth including in the survey. But like @foolip said it's a question of nomenclature. Do we use the actual name of the property ("transition-behavior"), even though it might not be that meaningful for most people? Or do we talk about what the API can actually achieve ("animating to/from display:none")? Or find some other designation (entry and exit effects") to group all of it?

We can also do a mix of all three, such as calling the feature "entry and exit effects" but having a more explicit description/code example below.

hvanops commented 2 months ago

@SachaG That's great! Una and I had been talking about this previously, and I'm very glad to see the feedback addressed. Super excited for State of CSS and to see what we'll learn. Thanks

jsnkuhn commented 2 months ago

Would be nice to finally get some info on corner-shape https://drafts.csswg.org/css-borders-4/#corner-shaping

This is an idea that's been kicked around for 15+ years and it's still not clear whether people don't want it or don't know that it exists.

SachaG commented 2 months ago

@jsnkuhn is corner-shape implemented anywhere? If not maybe we can ask about it in the "missing from CSS" section.

jsnkuhn commented 2 months ago

corner-shape is not implemented anywhere

SebastianZ commented 2 months ago

@SachaG As a side note, corner-shape is defined in CSS Borders 4, which I'm trying to get in shape for FPWD this year (and get rid of the daunting "Not Ready For Implementation" banner).

Sebastian

SebastianZ commented 2 months ago

https://github.com/w3c/csswg-drafts/issues/9793 and https://github.com/w3c/csswg-drafts/issues/9770 might also be a source for the state of CSS.

Sebastian

SachaG commented 2 months ago

Thanks for the added suggestions! Btw I forgot to link to this :

https://github.com/Devographics/surveys/issues/245

You can now preview the survey.

Devographics / surveys

State of CSS 2024 Suggestions #193