Web-platform news, without the framework noise.
Independent web-platform news — concise, vendor-neutral takes on HTML, CSS, accessibility and the browsers that ship them.
Latest
27 articles- CSS & layout
The 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.
Iris Calderón · nerdy.dev - CSS & layout
The 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.
Iris Calderón · ishadeed.com - CSS & layout
Route 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.
Iris Calderón · bram.us - Browser releases
Safari Technology Preview 249 drops attr(), if(), @function, popover=hint and Temporal in one build
WebKit's July 29 preview stacks nine CSS additions, a new HTML popover value, the dialog closedby attribute, and the JavaScript Temporal object into a single release — one of the feature-densest STP drops of the year for hand-authored HTML and CSS.
Dex Halloran · webkit.org - CSS & layout
Hard 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.
Iris Calderón · master.dev - Browser releases
Safari Technology Preview 248 gives progress() a no-clamp option and forwards missing components across analogous color spaces
WebKit's Safari Technology Preview 248 lands two CSS additions worth reading — a no-clamp option on the CSS progress() function and forwarding of missing color components when interpolating between analogous color spaces — plus a pair of accessibility repairs and a small stack of quieter CSS fixes.
Iris Calderón · webkit.org - CSS & layout
One 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.
Iris Calderón · ishadeed.com - Accessibility & semantics
aria-expanded has four honest jobs left. The rest belong to the platform.
Steve Frenzel's Piccalilli piece walks every widget that used to demand aria-expanded and shows how many are now better served by <details>, <dialog>, or the popover API. Keep the attribute for menus, navigation, tree views and combo boxes, and drop it everywhere else.
Marcus Osei · piccalil.li - Web platform
Lea Verou argues polyfills are a net positive for the web platform
In a new post responding to a WHATWG discussion, Lea Verou pushes back on the framing that polyfilling is harmful, and defends it as the mechanism that lets browsers ship first.
Dex Halloran · lea.verou.me - Accessibility & semantics
A primary-nav flyout built on `popover`, not `aria-expanded`
Adrian Roselli has rebuilt his 2019 disclosure-widget primary nav on the native HTML `popover` attribute. The rebuild is a clean map of what the platform now carries for you, and where you still need ARIA.
Marcus Osei · adrianroselli.com - CSS & layout
border-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.
Dex Halloran · css-tricks.com - CSS & layout
CSS 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.
Iris Calderón · joshwcomeau.com - Accessibility & semantics
Chrome 150 hands composite-widget arrow keys to the browser
Chrome 150 ships the `focusgroup` HTML attribute, a way to get roving arrow-key focus inside composite widgets like listbox, tablist and toolbar without a line of JavaScript. Adrian Roselli has published script-free demos, and the spec story is still an Open-UI explainer.
Marcus Osei · adrianroselli.com - Browser releases
Safari Technology Preview 247 lands calc-mix() and clears a scatter of small fixes
WebKit's July 1 preview build adds CSS calc-mix() under its New Features list, plus HTML spec-alignment repairs for align="center" and rel=preload as="json", two VoiceOver-facing accessibility fixes, and a MathML change for underover layout.
Yuki Tanaka · webkit.org - CSS & layout
Pseudo-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.
Iris Calderón · css-tricks.com - Accessibility & semantics
Your `<nav>` label already says 'navigation'
Writing 'Primary navigation' on a `<nav>` makes a screen reader announce the word twice. The fix is to trust the landmark and let the label do its actual job.
Marcus Osei · css-tricks.com - Web platform
Your site does not need to function the same on every platform
Bramus argues authors have swapped one cross-browser obsession for a new one — that sites must behave identically across mouse, touch, keyboard and Vision Pro. The piece reframes input-specific affordances as progressive enhancement on the input axis.
Dex Halloran · bram.us - CSS & layout
Opposing 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.
Iris Calderón · css-tricks.com - CSS & layout
Why 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.
Iris Calderón · css-tricks.com - CSS & layout
Naming 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.
Iris Calderón · bram.us - CSS & layout
Scroll-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.
Iris Calderón · css-tricks.com - Browser releases
Safari Technology Preview 246 widens color, images and attr()
WebKit has shipped Safari Technology Preview 246 with a batch of CSS additions — light-dark() taking image values, image(<color>), alpha(), color-mix() with more than two colors, attr() on pseudo-elements, and preview support for font-variant-emoji and word-break: auto-phrase.
Yuki Tanaka · webkit.org - CSS & layout
Grid 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.
Iris Calderón · webkit.org - Accessibility & semantics
`headingoffset` is not the outline algorithm coming back
Firefox has shipped `headingoffset` behind a flag. It quietly fixes a real pain point for reusable components, but it is not, and cannot be, the long-abandoned Document Outline Algorithm in disguise.
Marcus Osei · adrianroselli.com - Accessibility & semantics
ariaNotify() is developer catnip. Treat it like alert().
The new WAI-ARIA 1.3 ariaNotify() method makes screen-reader announcements trivial to fire from JavaScript — which is exactly the problem. The case CSS-Tricks lays out is straightforward: reach for it only where a live region genuinely cannot do the job.
Dex Halloran · css-tricks.com - Accessibility & semantics
Customizable `<select>` is still a `<select>`: keep the text
WebKit's golden rule for the new customizable `<select>` is the rule we should have been following all along: every option needs real text, even when icons or swatches do the visual work.
Marcus Osei · webkit.org - Browser releases
Safari 27 beta opens up the form control, scroll, and the cascade
WebKit has detailed the Safari 27 beta: 58 new web-platform features and 525 fixes, including customizable <select>, scroll anchoring, the :heading pseudo-class, and the revert-rule and stretch CSS keywords.
Yuki Tanaka · webkit.org