Welcome back to another edition of What’s !important. Issue #15 is packed with practical techniques for building modern, accessible, and adaptive web interfaces. We’ll cover boundary-aware CSS, time-based designs, a permanent fix for full-bleed layouts, upgrades to the customizable <select> element, and a roundup of 35 new web platform features announced at Google I/O 2026.

Boundary-Aware CSS with view()

Preethi Sam demonstrated how to use the view() function to create boundary-aware CSS. This technique enables elements to adapt their position or appearance based on their visibility within the viewport. Three CodePen examples showcase practical implementations: a sticky navigation that changes style at the scroll boundary, a tooltip that flips direction when it hits the edge, and a progress indicator that tracks element visibility.

On a related note, Master.dev published a piece on making interactive elements invisible yet accessible via CSS. The article suggests that more work is needed to achieve full accessibility and proposes a new value for the hidden attribute as a potential solution.

Grid Lanes Layout: Accessibility and Reading-Flow

Dan Holloran wrote about grid lanes layout (formerly referred to as “masonry layout”). Manuel Matuzović raised concerns about its accessibility. In a follow-up, Matuzović proposed using the reading-flow property to make grid lanes accessible—an approach that hasn’t been tested in browsers yet but appears promising.

Time-Based Website Designs

Sophie Koonin showed how to change a website’s appearance based on the time of day using the Temporal API and color-mix(). The effect is similar to macOS dynamic wallpapers: subtle shifts in color palette and contrast that match the user’s local time. For businesses on Cyprus targeting multiple time zones (e.g., EU and Middle East), this can improve user experience by adjusting readability or branding cues.

Full-Bleed CSS: A Modern Fix

David Bushell solved the classic full-bleed CSS problem: making an element span the entire viewport width without overflow, even when nested inside a container. The trick uses container query units (cqw). This is particularly useful for hero sections, banners, and dividers in sites built with constrained layouts.

FixCSS: Revisiting CSS Regrets

The CSS Working Group maintains a public list of things they would change about CSS if they could do it over. Inspired by that list, Declan Chidlow created FixCSS—a tool that applies the WG’s “fixes” in practice. The most notable change is swapping border-radius for corner-radius, aligning with the WG’s preference for more intuitive naming.

Better Customizable <select>

Jake Archibald addressed sizing issues in the customizable <select> element. His solution improves UX by ensuring the dropdown correctly scales with content and respects container constraints—essential for forms in multilingual sites (English, Russian, Greek).

35 New Web Platform Features (Google I/O 2026)

Bramus and Una Kravets presented 35 features at Google I/O 2026, ranging from experimental to Baseline-ready. Highlights include:

  • AccentColor and AccentColorText (now Baseline) — respect user’s system accent colors.
  • <image> support for light-dark() — no Safari support yet.
  • Comma-separated container queries — no Safari support.
  • background-clip: border-area — no Firefox support.
  • Corner rounding for polygon() — no Safari or Firefox support.
  • Animatable zoom — no Safari or Firefox support.
  • text-fit — no Safari or Firefox support.
  • flex-wrap: balance — no Safari or Firefox support.
  • named-feature() — no Safari or Firefox support.
  • The focusgroup attribute — no Safari or Firefox support.
  • overscroll-behavior: chain — no Safari or Firefox support.

For dev teams building for EU clients, note that many features lack cross-browser support. Plan progressive enhancement and test against real user agents. Features like AccentColor and container queries are safe to use now; others require fallbacks.

That wraps up issue #15. See you in two weeks.