What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More

Similar to last time, What’s !important #15 is pretty stacked — read all about boundary-aware CSS, making grid lanes accessible, creating time-based web designs, fixing full-bleed CSS, improving customizable , new web platform features, and more.

Table of Contents

Toggle

Using view() for boundary-aware CSS

Preethi Sam very expertly walked us through the concept of boundary-aware CSS. Using view(), Preethi was able to create a range of really useful effects, some of which I’ll share below:

I also wrote a little something for the Master.dev blog, about making interactive elements invisible but accessible. It sounds like more work is needed to make it fully accessible, and that a new value for the hidden attribute could be the answer.

Accessibility: A Grid Lanes Story

Dan Holloran wrote about grid lanes layout (formerly “masonry layout” or “that thing that Pinterest did”).

Manuel Matuzović said that it isn’t accessible (grid lanes layout, that is, not Dan’s article, which is great and gets straight to the point).

In a follow-up article a few days later, MM suggested using reading-flow to make grid lanes accessible, which seems like the right call but hasn’t been tested yet.

How to create time-based website designs

Sophie Koonin demonstrated how to make a website change according to the time of day using the Temporal API and color-mix(). Enough said, that’s just awesome (like macOS’s dynamic wallpapers).

A fix for full-bleed CSS

David Bushell showed us how to fix full-bleed CSS. That is, how to make something span the entire horizontal viewport (without any overflow — that’s the tricky part!) despite being nested within another element. I just love to see old problems being solved with modern CSS (hint: it’s container query units).

And if that isn’t already cool enough, Temani Afif recently shared another breakout technique right here on CSS-Tricks that uses the new border-shape property.

A fix for CSS

Don’t you wish you could travel back in time and change a few things? We all do. In fact, the CSS Working Group lists some of the things it would change about CSS.

And that’s why Declan Chidlow created FixCSS, which… well… fixes CSS in accordance with that. Now we can finally swap border-radius (the Ethan Tremblay of CSS) for corner-radius. All is right with the world again.

How to improve customizable

Jake Archibald demonstrated how to improve the UX of customizable s, addressing some sizing-related issues. It’s a must-read for anybody thinking about using customizable .