csswg-drafts

https://github.com/w3c/csswg-drafts/issues/5743 Appears to be a junior/intermediate dev with somewhat ambitious and rather ideological views. That doesn't mean he's wrong but bear in mind the context of the enthusiasm and desire to change everything through JavaScript.

> Firefox supports pure css masonry grid behind a flag. That has less support than Bieber at a black metal festival though. Here's[1] the columns (or flexbox) way of doing it. Note that images will be a bit strangely ordered (as you would read columns). That's not solvable without JS (AFAIK). That's why W3C/CSSWG is looking at possible solutions[2] that resulted in the Firefox experiment you're referencing. [1] https://css-tricks.com/piecing-together-approaches-for-a-css... [2] https://github.com/w3c/csswg-drafts/issues/4650

There used to be something similar to do this called "scoped styles", but they were removed in favor of WebComponents. We could have had this without all of the Shadow DOM baggage. Though maybe it's coming back now? https://github.com/w3c/csswg-drafts/issues/3547

I recommend taking the State of CSS[1] survey, it is a nice way of keeping up with the latest features. Other then that I use PostCSS with the postcss-preset-env[2] plugin. There you can enable various future features of the language and have it compile down to a more supported version. If your really want to dive into the future of CSS you can read the issue board for the CSSWG[3] (beware, it can suck hours out of your days). Smashing Magazine[4] and A List Apart[5] also sometimes have articles about a new(ish) or upcoming features. But the CSS community could really benefit from the spec maintainers having more active bloggers among them (e.g. like Rachel Andrew[6]) and provide a regular update of the language like 2ality does for JavaScript[7]. 1: https://stateofcss.com/ 2: https://preset-env.cssdb.org/ 3: https://github.com/w3c/csswg-

It doesn't help right now, obviously, but for future consideration you might be interested in the proposal to extend CSS Grid to have Masonry support; see https://github.com/w3c/csswg-drafts/issues/4650.

The problem is that CSS uses greedy line breaks. In theory, this should improve once browsers implement CSS Text Module Level 4, specifically the `pretty` value for the `text-wrap` property [1][2]. Until then, we're stuck with poor-quality typesetting, or JavaScript solutions [3]. [1] https://www.w3.org/TR/css-text-4/#text-wrap [2] https://github.com/w3c/csswg-drafts/issues/672 [3] https://github.com/robertknight/tex-linebreak

Centering in CSS is "solved" problem if your "worst" browser to support is IE11. Flexbox does the job there. However, there are still couple of common tasks that are pain/hard/impossible to do with just CSS. Recently I learned that after all this years you still need to use JS to get css animation for dynamic height ("height:auto") of elements. And there is no progress in fixing it at CSS standard level. It's just sad... https://github.com/w3c/csswg-drafts/issues/626 https://stackoverflow.com/questions/3508605/how-can-i-transi... https://stackoverflow.com/questions/3508605/how-can-i-transi...

https://github.com/w3c/csswg-drafts/issues/1766 is the main link that explains it, https://bugzilla.mozilla.org/show_bug.cgi?id=1468684 is also useful.

Some people are saying “user styles let you do this”, but it’s not actually true: take a textarea, for example; if you set its background-color, the browser discards its regular textarea appearance (which might have a special border colour and style and radius) and leaves you with what’s actually specified. Expressed very approximately, adjusting various properties implies `appearance: none`. And you can’t get it back. `background-color: initial`? Nope, no native appearance. `appearance: textarea !important`? No go. `background-color: f(env(x))` (a stupid way of getting a runtime-invalid value due to a bad spec, see https://github.com/w3c/csswg-drafts/issues/3792 for details)? Nada. You could provide your own styles for form elements, but you can’t use user styles to retain native form element styling.

This all gets interesting when mixing sRGB, Display-p3 or Lab colors in gradients and animations. There's an open issue about it at W3C: https://github.com/w3c/csswg-drafts/issues/4647 I think Safari currently fails to display such gradients.