Ahmad Shadeed✍️ New article: My CSS Wishlist
I wrote a few words on CSS features that I wish to have today.
Ollie Boermans@shadeed9 Good news on leading-trim!
In Safari Technology Preview 163
https://webkit.org/blog/13839/release-notes-for-safari-technology-preview-163/
@ollicle Niiice! I'm trying to make a demo with it but no luck, will try again soon. Thanks!
Dohány Tamás@shadeed9: Flexbox gap support has a good WD status, only IE & some "specific" browser not deal with it by default. Why I would inspect this capability for sure?
@iamdtms It's a bit more complex than that, see: https://ishadeed.com/article/flexbox-gap/
The idea is that I want to detect `gap` for flexbox with @supports.
@shadeed9
I see. Thanks for the description.
I see. Thanks for the description.
Michelle Barker@shadeed9 These are all great suggestions, I very much agree! 👍
@michelle glad to hear that, Michelle. Thanks!
Manuel Strehl 🫏
Chris Coleman@shadeed9 If I’m understanding correctly, I think the text-decoration features you’re looking for exist today. This sounds like what @michelle’s http://css-irl.info is doing on body tags.
@Chris text-decoration is great today, but my point is animating a link underline from left to right (imagine the underline growing in width kind of thing).
@Chris 👋 just updated the text-decoration-size with a visual example, I hope it's clear now.
@Chris @shadeed9 Yeah I have an article about it from a couple of years ago, and it seems to be better supported now https://css-irl.info/animating-underlines/. You can do the same with `text-decoration-thickness`. I think what Ahmad is talking about is similar but slightly different. Not sure how the above would play with `text-decoration-style: wavy` for example
Matt Wilcox@shadeed9 Native support for a basic SCSS-like mixin capability. So we don't have to keep abusing "utility classes", which are only there because we can't put that abstraction in the CSS, where it belongs.
Christopher Kirk-Nielsen@shadeed9 These are all great ideas! I actually want the flex-wrapping one pretty badly as I've run into a very similar issue and haven't solved it yet. :D
(oh and on Firefox on macOS, your underline video doesn't work due to MIME type? And the link to your button label alignment article has one too many `(` in the Markdown, figured I'd let you know!)
@chriskirknielsen Same here! flex-wrap detection will fix a lot of issues. Would you mind share the examples/cases as I'm compiling a list of where flex-wrap detection can be useful?
Thanks for the heads up :)
@shadeed9 In my case it might be more of a complicated one since I want to apply `order: 1` to an element (links) which might cause layout loops. On my site, the navbar would ideally be Logo + Theme button and then Links on the second row, but before wrapping the order is Logo, Links then Theme button.
Naman@shadeed9 it’s a very thoughtful Wishlist and I would like them all, but more than any of them, I want scroll-linked animations in CSS using Scroll Timeline.
Cory Birdsong@shadeed9 I came up with a decent workaround for flex gap detection: https://birdsong.dev/blog/sloppy-supports-for-flexbox-gap/
@cbirdsong I like that! need to test this in an upcoming project. Thanks a lot!