Ovi Demetrian Jr
ppk 🇪🇺Please name your favourite I-used-to-do-this-with-JavaScript-but-now-I-don't-need-to CSS properties/functionalities.
Philipp Tootloff@ppk Focus styles for more complex components previously sometimes required setting some classes or similar on strategic elements so you can use them in selectors. Now, with :has(), that's generally not needed anymore.
Krazov@kleinfreund @ppk That's probably my item too.
ian
Søren Birkemeyer@ppk Uh, favourites… there are so many.
position: sticky;
:has() and other pseudos
animations (even scroll-based)
color functions, especially relative colors
all kinds of math functions
view transitions
CSS Grid, obviously
@polarbirke Why grid? What JS does it replace?
@ppk Oh, I recalled that I replaced some https://github.com/filamentgroup/AppendAround with media queries and Grid Areas last year. That's probably more a "me" change than an actual "CSS replaces JS" change.
And I was prematurely thinking of masonry/grid-lanes.
Trygve Lie@ppk Scroll Snap. Mostly eliminated the need for js when building carousels.
Eric Eggert@ppk View transitions between different server-rendered pages. It sometimes means you can do stuff that looks like JavaScript on the server altogether, which makes everything better.
meduz'
Paddy Duke
Doug Webb@ppk coming up: field-sizing https://caniuse.com/?search=field-sizing
"The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content."
Right now auto-growing an input box with the content inside it requires some artful CSS layering and a sprinkle of JS
https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
@douginamug @ppk How could I forget this, I just started adding it as progressive enhancement to all our form themes about two weeks ago. 🤯
Tyler Sticka@ppk Here’s one I often take for granted now: Maintaining size and/or alignment across multiple columns for different content lengths!
Look at the hoops past me was jumping through: https://cloudfour.com/thinks/leveller/
Introducing Leveller: Please Avoid Using It
This happens to me over and over: I have a multi-column grid of tiles, each with varying heights. This means the bottom of certain rows can appear jagged and difficult to scan visually: See the Pen Leveller: Before by Tyler Sticka (@tylersticka)…
technetium@ppk Tabs and other hide/show functionalities.
Prateek Rungta@ppk `<dialog>`, `position:sticky`, and `transition-behavior: allow-discrete` are probably at the top of my list.