CSS

I think the styling story for Shadow DOM Web Components is not great. I’ve got what seems to me like a simple idea that would help that. Fair warning: I’m just some dude on the internet with an opinion here. I’m coming at it from an author’s perspective who has only written a handful of […]

I’m still obsessed with how awesome and powerful :has() is in CSS. Ryan Mulligan really drives it home in We can :has it all with a single Pen that offers simple, realistic UI controls for: These are things you can easily imagine on any website, and now handled here entirely without JavaScript at all.

After I wrote up my Basic CSS Processing Setup that used Lightning CSS, Michael Bishop responded saying he uses PostCSS for essentially the same thing, with a forked repo demonstrating. I think Michael has a good point that PostCSS has a built-in watcher which simplifies the setup nicely. And postcss-preset-env is very similar in spirit, […]

Credit to Stephen Shaw for the original idea, there is a decently easy way to make an auto-sizing <textarea> element. It is here. But it’s not perfect. There is a frustrating hard-to-replicate iOS bug. Plus it’s just a trick. It requires JavaScript and some pretty specific CSS to pull off. It’s awesome to see the […]

I’ve seen all the excitement about scroll-driven animations. I’m excited too. Animations that use scroll position as a timeline rather than a time-based duration is just a clever idea. It’s something that websites have been using probably-too-much JavaScript for for a long time and it’s nice to see that kind of thing move to CSS […]

Happy New Year ya’ll! While we’re all thinking about taking the opportunity to do various resets on our lives, I’ll take the opportunity to mention CSS resets. As a CSS nerd, I love looking at people’s different takes on what a modern CSS reset could or should be, like I did recently. But that doesn’t […]

Rachel Andrew, blowing my mind a bit: The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout. While the property was specified to work in block layout, no browser had implemented it, until now. align-content in block layout So now […]

Container queries are similar to media queries but allow you set styles based on a particular element’s current size, typically the width. This is super handy because you can write CSS in a way that gives flexibility to the layout! With @media queries, there’s a tight coupling of the styling of a component’s content and […]

We just looked at how :has() in CSS makes quantity queries so easy, so this post by Terence Eden caught my eye, showing some trickery where you can style an entire page based on when it was published. That is, if there is something like a <time> or <meta> tag that has this information on […]

Ahmad Shadeed: Today I learned about the media scripting feature. It’s about detecting JS support via a CSS media query. Soon, we won’t need the .no-js or .js classes once this is widely available. Currently supported in Chrome 120, Firefox 119, Safari 17. Tweet