10 New CSS/HTML APIs for Smarter Layouts and Effects
Wes Bos and Scott Tolinski unpack experimental CSS features like Grid Lines for masonry, HTML-in-Canvas for pixel-perfect effects, and utilities like CSS random—most behind flags but ready for demos today.
Masonry Layouts Finally Native with Grid Lines API
Scott Tolinski leads with excitement over the CSS Grid Lines API (display: grid-lines), calling it the 'best possible thing' for Pinterest-style masonry layouts. Unlike past hacks like CSS columns (which snake vertically) or fixed-height grid with pack-fit, this fills items left-to-right (or customizable directions) using familiar properties like grid-template-columns and gap. Wes Bos agrees it's 'super simple'—no new learning curve—and opens creative uses beyond photos, like shuffling footer links.
Available now in Safari 26.4; Chrome/Firefox behind flags. Scott notes it's a game-changer for sites needing dynamic shuffling without JavaScript workarounds. 'Can it get any more simple than that?' Scott asks, emphasizing how it eliminates gotchas like fixed heights.
HTML-in-Canvas Unlocks Next-Gen UI Effects
Wes Bos geeks out hardest here: 'My brain has been opened up by some of these demos... the world has opened up to me.' This experimental API lets you nest regular HTML (forms, inputs, text) inside a
Demos steal the show:
- Pixelated form inputs where you type live.
- Magnifying glass over inputs with distortion.
- Frosted glass effect: blur canvas-behind content, 'wipe' frost with mouse/finger.
- Matt Rothenberg's form: glowing focus borders follow inputs; submit triggers a stretching/blurring scan-line wipe.
- Jelly slider: pure with wobbly canvas effects.
- Jake Archibold's CRT TV curve on HTML content.
Wes built frosted window and plans more, comparing it to unfulfilled Houdini dreams or iOS volume sliders that warp screen pixels. Scott highlights accessibility win: no custom input code needed. Behind Chrome flag; Wes hopes it ships for 'control over how pixels are painted in the DOM.'
Scoped Styling via Name-Only Container Queries
Scott spotlights this under-the-radar gem in Firefox 149, Chrome 148, Safari 26.4: container-name: sidebar on a wrapper, then @container sidebar {} scopes styles natively—no class bloat. Wes calls @scope 'didn't feel right' in practice; this feels better, especially with style queries incoming. Builds on container queries for true platform scoping. Scott found it via Chris Coyier tweet and Frontend Masters post; Anthony Ferner confirmed support on Bluesky.
Dynamic and Thematic Utilities
CSS random(): Wes praises Safari's random(0, 10, 100) for even numbers between bounds—no more JS vars, seeded random for SSR, or per-element hacks. Perfect for rotating card values on page load.
::search-text and ::search-text:current: Scott demos styling browser find-in-page highlights (Cmd+F). Match site theme;
Layout Fixes for Real-World Use
Sticky positioning both axes: Una's post notes Chrome 148 enables per-axis sticking (top/bottom + left/right). Scott ties to mobile tables, conferences, tournaments—solves scrolling in grids.
Multi-column CSS improvements: New column-wrap and column-height let long paragraphs flow into specified columns, wrapping rows if overflow. Scott avoids multi-col usually but welcomes fixes over flexbox segmentation.
Safari axed haptic feedback workaround (checkbox switch spam)—Scott blames intentional limits; Wes wants user permissions like webcam.
Border shapes and view transitions: Quick hits on improved curves; element-scoped transitions for smoother animations. Wes laments MDN demos needing better handholding.
Throughout, they bemoan CSS hype drought amid AI/Tailwind focus—'so much cool stuff added... super powerful,' Wes says. Sponsor shoutout: Sentry.io for error tracking.
"I can't wait to talk about the HTML and canvas thing... now the world has opened up to me." —Wes Bos, on pixel effects without losing HTML interactivity.
"Display: grid-lines... Can it like get any more simple than that? It is really super cool." —Scott Tolinski, on native masonry layouts.
"Every time I need randomness in CSS, I have to... pass in a CSS variable... This is a straight up CSS API." —Wes Bos, on random() eliminating JS hacks.
"You're able to stick them to the top or offset... now they work in both directions." —Scott Tolinski, via Una, on dual-axis sticky.
Key Takeaways
- Enable Chrome flags to demo Grid Lines (display: grid-lines) for masonry—pair with grid-template-columns/gap; ships soon in Safari.
- Experiment with HTML-in-Canvas: nest DOM in
- Scope CSS natively: container-name: foo then @container foo {}—Firefox/Chrome/Safari ready.
- Generate random CSS values: random(0, 100, 2) for even numbers; no JS needed.
- Style browser search: ::search-text:current for themed find-in-page highlights.
- Use dual-axis sticky for tables/grids; multi-column with column-height for paragraph flows.
- Track support via syntax.fm show notes; build demos now for production edge.