CSS & layout
Vendor-neutral coverage of css & layout.
Articles
34 articlesA short :has() selector can outweigh the component it was never meant to touch
In Smashing Magazine, Gabriel Shoyombo walks through a card where .card:has(img) p matches a comment's paragraph and beats the comment's own rule on specificity, and shows how child combinators, :where() and consistent layering keep the selector in its lane.
Nov 3, 2026 · Yuki TanakaCSS & layoutGrid Lanes masonry settles on Grid syntax, and flow-tolerance is now fit-tolerance
A Piccalilli walkthrough by Saleh Mubashar traces native CSS masonry from its 2017 CSSWG issue to display: grid-lanes, and notes that the lane-picking property is now called fit-tolerance. Per the article, Grid Lanes works in Safari 26.4 and later, and support in other browsers is still evolving.
Oct 24, 2026 · Yuki TanakaCSS & layoutThe Interop 2027 CSS shortlist reads like a list of hacks you get to delete
Josh W. Comeau has published his ten CSS picks for Interop 2027, from @function and corner-shape to gap decorations and scroll-state queries. The support tables in his post, current as of October 2026, mark nine of them as supported in Chrome 155 and Edge 154 but not in Firefox 157 or Safari 27, and he argues several already work as progressive enhancements.
Oct 21, 2026 · Iris CalderónCSS & layoutCSS random() puts a little deliberate mess back into your layout
In Smashing Magazine, Brecht De Ruyte works through the native random() function from CSS Values and Units Level 5 with demos of jittered letters, bouncing type and splayed cards, and draws a clear line around where randomness does not belong. He reports that Safari shipped it first, Chrome 156 is rolling it out, and Mozilla has sent positive signals about Firefox.
Oct 20, 2026 · Dex HalloranCSS & layoutA DevTools pane now draws the ranges behind scroll-triggered animations
Bramus van Damme has released a Chrome DevTools extension that adds a Scroll-Triggered Animations pane to the Elements panel. It draws a trigger's activation and active ranges on a minimap and lets you edit them live.
Oct 16, 2026 · Yuki TanakaCSS & layoutcalc-size() and round() stop your background pattern getting chopped at the bottom
Ahmad Shadeed shows how to round a section's auto height to a whole multiple of its repeating background tile with calc-size() and round(), so the tile never has to shrink or stretch the way it does with background-repeat: round. The technique works only in Chrome and Edge for now, and calc-size() is not Baseline.
Oct 15, 2026 · Dex HalloranCSS & layoutSeptember's Baseline haul gives CSS progress(), alpha() and revert-rule in every engine
Rachel Andrew's September roundup on web.dev lists a large batch of features reaching Baseline Newly available, among them the progress() function, the alpha() relative color function, the revert-rule keyword, <image> values in light-dark() and scroll anchoring with overflow-anchor.
Oct 13, 2026 · Iris CalderónCSS & layoutOverlap detection lands in CSS with anchors and a shared timeline
Ahmad Shadeed shows how to notice when a decoration collides with a section using only CSS: anchor positioning measures the gap, a scroll-driven timeline carries the reaction, and timeline-scope shares it between siblings.
Sep 25, 2026 · Iris CalderónCSS & layoutContainer queries observe the component, not the viewport
A Smashing Magazine piece by Victor Ayomipo argues that container queries have ~94% support and only 41.4% adoption because developers keep porting media-query breakpoints instead of letting components respond to their own container size.
Sep 19, 2026 · Iris CalderónCSS & layoutYour icon is centered against the wrong thing
Ahmad Shadeed's new piece nails the icon-and-label bug that has been quietly wrong on every design system list for years, and the fix is one transform in the lh unit.
Sep 16, 2026 · Dex HalloranCSS & layoutA polyfill for CSS random(), while the browsers catch up
Lee Meyer's walkthrough on CSS-Tricks builds a polyfill for the emergent CSS random() function so authors can start using it — and get fluent in its caching keywords — before every engine ships.
Sep 9, 2026 · Iris CalderónCSS & layoutAnchor positioning lets a resizing grid animate its reflow
A demo on bram.us animates an auto-fill grid's reflow on resize with CSS anchor positioning and a transition on inset. No JavaScript, no View Transitions, and interruptible.
Sep 8, 2026 · Iris CalderónCSS & layout@supports named-feature() lets you branch on behavior, not syntax
Bramus walks through @supports named-feature(), a new CSS conditional that tests capabilities the classic property, value, selector and at-rule checks were never able to see — like an implementation change, or two already-shipped features starting to cooperate.
Sep 8, 2026 · Iris CalderónCSS & layoutflex-wrap: balance ends the wrapped-flex orphan
Chrome 150 ships flex-wrap: balance, a new value that distributes wrapped flex items so a single trailing item stops landing alone on its own line. Ahmad Shadeed walks through the setup, the workarounds it retires, and a companion flex-line-count knob.
Sep 7, 2026 · Iris CalderónCSS & layoutSMIL and timing charts: planning SVG animation on paper
Smashing Magazine walks through SMIL, the SVG-native animation syntax that lives inside <animate>, and argues that a line-segment timing chart is the sanest way to keep a multi-part sequence readable.
Aug 22, 2026 · Iris CalderónCSS & layoutThe class prefix selector: .btn-* is coming to CSS Selectors 5
The CSS Working Group has resolved to add a class prefix selector, written .prefix-*, to Selectors Level 5 — one rule for every class that begins with a shared hyphenated prefix, instead of a list or an attribute-selector hack.
Aug 20, 2026 · Iris CalderónCSS & layoutAnimating border-image finally works if you register the gradient stop
Preethi's new CSS-Tricks piece animates a gradient border-image by wrapping one of its stops in a typed custom property. The trick unlocks a moving decorative border in pure CSS, and hits a wall the moment your box has rounded corners.
Aug 11, 2026 · Iris CalderónCSS & layoutThe default axis-lock finally has an off switch
CSS Overflow 5 introduces scroll-axis-lock, a property that lets you disable the browser's default scroll-railing behavior on 2D scrollers. Chromium 153 is the first engine to ship it.
Aug 9, 2026 · Iris CalderónCSS & layoutStyling the dialog element: open is not the same as modal
A CSS-Tricks walkthrough by Geoff Graham lays out the styling model for HTML's dialog element — the modal-versus-non-modal split, three overlapping pseudo-classes, and where the animations plug in.
Aug 8, 2026 · Iris CalderónCSS & layout::highlight() with a text-shadow safety net
The CSS Custom Highlight API lets you paint arbitrary text ranges from JavaScript, no wrapper spans required. A text-shadow fallback keeps the effect intact when the API is not there.
Aug 6, 2026 · Iris CalderónCSS & layoutGap decorations: column-rule finally leaves multi-column
Chrome and Edge 149 ship CSS gap decorations, extending column-rule to grid and flexbox and adding row-rule for the other axis. The syntax was reworked before landing, so here is what actually changed and what to reach for first.
Aug 4, 2026 · Iris CalderónCSS & layoutThe CSS infinity keyword, and what it lets you delete
A tour through Adam Argyle's recipes for the CSS infinity keyword — pill radii, unbounded clamps, and a boolean pattern the cascade can decide on its own.
Aug 1, 2026 · Iris CalderónCSS & layoutThe lh unit sizes to the line, not the font
Ahmad Shadeed's post on ishadeed.com tours the CSS lh unit, which resolves to the element's computed line-height. Here's where sizing against that line beats sizing against font-size.
Aug 1, 2026 · Iris CalderónCSS & layoutRoute and navigation matching, proposed for CSS
Bramus Van Damme, Noam Rosenthal and David Baron are drafting a CSS spec — css-navigation-1 — that describes URL routes and per-navigation styling in stylesheets, so multi-page View Transitions can drop the pageswap/pagereveal JavaScript.
Jul 31, 2026 · Iris CalderónCSS & layoutHard color stops turn conic-gradient() into a triangle machine
Chris Coyier makes the case that conic-gradient() with two hard color stops is the fastest way to draw a triangle in CSS. The from and at keywords do most of the work.
Jul 29, 2026 · Iris CalderónCSS & layoutOne grid, five rounds, no track matching
A rebuild of the FIFA knockout layout with CSS subgrid shows how nested rounds can share the parent grid's columns and rows, with negative line numbers doing the trimming.
Jul 19, 2026 · Iris CalderónCSS & layoutborder-shape is the property clip-path always owed you
The upcoming CSS border-shape accepts the same values as clip-path, but border, box-shadow and outline follow the shape instead of getting clipped off. It is the missing half of the CSS shapes story — Chromium-only for now.
Jul 8, 2026 · Dex HalloranCSS & layoutCSS anchor positioning: two properties do the wiring
Anchor positioning has landed in every major browser engine. Two properties, a keyword grid, and a fallback list replace the JavaScript most floating-UI widgets used to need.
Jul 7, 2026 · Iris CalderónCSS & layoutPseudo-classes are states, not events
CSS-Tricks reframes the everyday choice between :hover, :focus-visible, :has() and the matching JavaScript event listeners. The piece also previews the proposed event-trigger syntax in the Animation Triggers spec, which would let CSS bind animations to events instead of states.
Jun 29, 2026 · Iris CalderónCSS & layoutOpposing scroll columns with one view() timeline and three keyframe sets
CSS-Tricks walks through making adjacent columns drift in opposite directions as the page scrolls, with no JavaScript. The trick is a per-item animation-timeline: view() and animation-range: entry 0% cover 100%, repeated across three keyframe sets.
Jun 25, 2026 · Iris CalderónCSS & layoutWhy setting perspective on :root won't flip your view transition
Setting perspective on html, :root, or even ::view-transition itself looks like the obvious place to enable a 3D view transition — and produces nothing. The fix is to switch from the property form to the perspective() function, applied inside the snapshot's keyframes.
Jun 24, 2026 · Iris CalderónCSS & layoutNaming many view transitions: attr() or match-element?
Two modern ways to give every card in a grid its own view-transition-name — attr() reading a data attribute, or the match-element keyword. They look interchangeable, then diverge the moment a navigation crosses documents or a pseudo-selector needs to address a specific snapshot.
Jun 24, 2026 · Iris CalderónCSS & layoutScroll-triggered animations land in CSS: `timeline-trigger` is not `animation-timeline`
Chrome 146 is the first browser to ship CSS scroll-triggered animations. The new `timeline-trigger` property fires a fixed-duration animation when a scroll threshold is crossed, and it is a close cousin of scroll-driven animations on a very different mechanism.
Jun 23, 2026 · Iris CalderónCSS & layoutGrid Lanes gets a Field Guide — and a fourth layout primitive to argue about
WebKit has published gridlanes.webkit.org, a Field Guide for the new display: grid-lanes layout primitive, with a playground, a cheat sheet and six demos pitting Grid Lanes against Flexbox, Multicolumn and Grid.
Jun 22, 2026 · Iris Calderón