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
54 articles- Accessibility & semantics
The custom checkbox stays hand-rolled until `::checkmark` actually ships
Andy Bell's new Piccalilli piece previews the ::checkmark pseudo-element and appearance: base, then quietly concedes no browser is working on it. Until that changes, the accessible checkbox is still a label wrapping a real input — not a div.
Marcus Osei · piccalil.li - CSS & layout
Your 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.
Dex Halloran · ishadeed.com - Web platform
interactive-widget lands in WebKit: three ways to react when the keyboard opens
WebKit has implemented the interactive-widget viewport meta directive, giving pages a hand-authorable choice between resizing the visual viewport, resizing the layout viewport, or leaving both alone when a virtual keyboard appears.
Iris Calderón · bram.us - Browser releases
Safari Technology Preview 252 adds @supports named-feature(), unprefixed user-select and two accessible-name fixes
WebKit's 11 September preview adds a named-feature() function to @supports, exposes CSSConditionRule.supports and CSSMediaRule.matches on the CSSOM, ships the unprefixed user-select property, allows percentage values in text-decoration-inset, and cleans up two accessible-name bugs around display: contents and list markers.
Yuki Tanaka · webkit.org - Browser releases
Safari 27 rewrites the module loader to fix top-level await
WebKit engineer Kai Tamkun explains that Safari 27 replaces the old self-hosted JavaScript module loader with a C++ translation of the ECMAScript spec, closing an ordering bug that could make dynamic imports of a top-level-awaiting module finish out of sequence.
Yuki Tanaka · webkit.org - Web platform
Document Picture-in-Picture is a window, not a video
A CSS-Tricks tutorial by Daniel Schwarz shows how to open a floating always-on-top window that hosts a real HTML document with the Document Picture-in-Picture API — options, events, and the CSS caveat that bites first.
Dex Halloran · css-tricks.com - Accessibility & semantics
The `headers` attribute has quietly stopped earning its place
Adrian Roselli retested the HTML `headers` attribute against the current crop of screen readers and browsers, and the answer is short: plain, honest table structure carries the meaning by itself, and the attribute is largely useless.
Marcus Osei · adrianroselli.com - CSS & layout
A 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.
Iris Calderón · css-tricks.com - Web platform
A pageflip demo puts the experimental HTML-in-Canvas API through its paces
A bram.us demo builds a pageflip/flipbook custom element on the experimental HTML-in-Canvas API, using it to render real DOM inside a 3D canvas effect so pages stay selectable and links stay clickable.
Yuki Tanaka · bram.us - CSS & layout
Anchor 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.
Iris Calderón · bram.us - CSS & 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.
Iris Calderón · bram.us - CSS & layout
flex-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.
Iris Calderón · ishadeed.com - Browser releases
Safari Technology Preview 251 lands @supports at-rule(), random() with caching, corner-shape and object-view-box
WebKit's 26 August preview adds an at-rule test to @supports, property-scoped caching on random(), the random-item(), ident() and inherit() functions, the corner-shape and object-view-box properties, comma-separated @container conditions, white-space-trim in the white-space shorthand, and HighlightRegistry.highlightsFromPoint().
Iris Calderón · webkit.org - CSS & layout
SMIL 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.
Iris Calderón · smashingmagazine.com - CSS & layout
The 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.
Iris Calderón · bram.us - Web platform
The <geolocation> element lands in Chrome 144
Chrome 144 ships a new <geolocation> HTML element that requests location through attributes instead of a JavaScript dance, exposes a :granted CSS pseudo-class for styling the permission state, and lets you nest an old-API fallback inside the tag as progressive enhancement.
Yuki Tanaka · piccalil.li - Web platform
A theme toggle should not overwrite the user's OS choice
Bramus Van Damme argues the third button, System, belongs in a dark-mode toggle. His case is that a two-state control silently maps one of its values back to the OS schedule and overwrites the user's explicit pick.
Marcus Osei · bram.us - Browser releases
Safari Technology Preview 250 lands SVG on the clipboard, text-decoration-inset, and a VoiceOver textarea fix
WebKit's 13 August preview adds five CSS lines (text-decoration-inset, white-space-trim, wrap-inside, content on ::marker, and a spaces value on ruby-overhang), Clipboard API read and write for image/svg+xml, a VoiceOver line-break repair on textarea, and a small deprecation — a dense build for hand-authored pages.
Yuki Tanaka · webkit.org - Accessibility & semantics
Whether a dialog closes on outside click is a task question, not a style question
Adrian Roselli sorts modal close behaviour into three buckets — action required, no action required, and weird patterns — and argues you should pick a light-dismiss policy based on what the user came to do, not on how the dialog looks.
Marcus Osei · adrianroselli.com - Accessibility & semantics
The 'blocked aria-hidden' warning is telling you the truth
A new CSS-Tricks piece by Durgesh Rajubhai Pawar argues the browser is right to complain when you hide a focused region — and every popular workaround for the warning just moves the bug somewhere quieter. The fix is a reordering, not a new attribute.
Marcus Osei · css-tricks.com - CSS & layout
Animating 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.
Iris Calderón · css-tricks.com - CSS & layout
The 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.
Iris Calderón · bram.us - CSS & layout
Styling 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.
Iris Calderón · css-tricks.com - Web platform
Baseline as a bundle audit, and what usually falls out
Writing for Smashing Magazine, Jad Joubran reframes Baseline as an audit rubric for dependencies. Cross-check your package.json against Newly and Widely available features, and a stack of familiar shims stops earning its bytes.
Yuki Tanaka · smashingmagazine.com - Web platform
Your theme toggle does not need a System button
Lea Verou argues that an in-page dark-mode toggle should surface two states, not three. The System option describes the data model, not what the user is actually trying to do.
Dex Halloran · lea.verou.me - CSS & 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.
Iris Calderón · piccalil.li - CSS & layout
Gap 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.
Iris Calderón · css-tricks.com - 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