Home/Frontend/What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed

Frontend

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

Read all about boundary-aware CSS, accessible grid lanes, time-based web designs, full-bleed, the customizable select, and new web platform features.

DS

Daniel SchwarzCSS-Tricks

·July 14, 2026·Articles

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

Boundary-Aware Layouts with `view()`

Preethi Sam has explored boundary-aware styling in CSS, using the view() function to create effects that respond to an element's position within the viewport. The technique enables a range of useful, context-sensitive styling patterns. In related work on the Master.dev blog, Sam also covered making interactive elements invisible while preserving accessibility, noting that a dedicated value for the hidden attribute may be needed for truly robust support.

The State of Grid Lanes Accessibility

Dan Holloran has written about the grid lanes layout—formerly known as "masonry layout." While his article is direct and useful, Manuel Matuzović has pointed out that the feature is not currently accessible. In a follow-up, Matuzović suggested using the reading-flow property as a progressive enhancement to make grid lanes accessible, though the approach has not yet been tested in practice.

Time-Based Web Design with Temporal and `color-mix()`

Sophie Koonin demonstrated how to make a website respond to the time of day, using the Temporal API in combination with color-mix() to transition background colors dynamically—similar to macOS's dynamic wallpapers.

Solving the Full-Bleed Problem

David Bushell has detailed a method for making an element span the entire horizontal viewport without introducing overflow, even when that element is nested inside other containers. The solution leverages container query units, a modern CSS approach to a long-standing layout challenge.

Temani Afif has shared another breakout technique on CSS-Tricks that uses the newer border-shape property for decorative full-bleed effects.

Community-Driven CSS Corrections

The CSS Working Group maintains a public list of design decisions it would revisit if given the chance. Based on that list, Declan Chidlow created FixCSS, a project aimed at addressing those acknowledged mistakes. Notable changes include replacing border-radius with the more descriptive corner-radius.

Refining Customizable `<select>`

Jake Archibald has addressed sizing-related UX issues with customizable <select> elements, offering guidance for anyone planning to adopt the feature. The piece covers practical ways to improve usability through better height and spacing decisions.

Source: Jake Archibald.

35 New Web Platform Features

Bramus and Una Kravets presented a roundup of 35 web platform features at Google I/O 2026, spanning features that are recently released, still in progress, or not yet fully supported across browsers.