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
73 articles- Browser releases
Safari 27.2 styles the select text with ::field-content and renames flow-tolerance
Safari 27.2 adds the ::field-content pseudo-element, which styles a Customizable Select's displayed text without <selectedcontent>, tidies the base-select UA styles, and renames the Grid Lanes flow-tolerance property to fit-tolerance. WebKit recommends raising fit-tolerance significantly above its 1em default for better keyboard tabbing.
Iris Calderón · webkit.org - Browser releases
Safari 27.1 previews CSS for foldable screens
Safari 27.1 on the iPhone Duo includes a developer preview of the Device Posture API and the Viewport Segments API behind feature flags, adding device-posture and viewport-segments media queries plus viewport-segment-* env() variables.
Yuki Tanaka · webkit.org - CSS & layout
Grid 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.
Yuki Tanaka · piccalil.li - Browser releases
Safari Technology Preview 255 puts a button in select and spends fifteen fixes on line-clamp
WebKit's October 22 preview adds support for <button> in the native appearance of <select> and the side attribute on SVG <textPath>, alongside fifteen line-clamp fixes and cascade corrections for font-family: initial and revert inside @starting-style.
Dex Halloran · webkit.org - CSS & layout
The 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.
Iris Calderón · joshwcomeau.com - CSS & layout
CSS 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.
Dex Halloran · smashingmagazine.com - CSS & layout
A 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.
Yuki Tanaka · bram.us - CSS & layout
calc-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.
Dex Halloran · ishadeed.com - Browser releases
Chrome 155 decodes JPEG XL, and the decoder is written in Rust
Chrome is shipping decoding support for the JPEG XL (.jxl) image format starting in Chrome 155, built on jxl-rs, a pure Rust decoder. The Chrome team recommends trying both AVIF and JPEG XL, and expects JPEG XL to help most with high-fidelity, lossless and progressively decoded photos.
Dex Halloran · developer.chrome.com - CSS & layout
September'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.
Iris Calderón · web.dev - Accessibility & semantics
Icons injected by CSS stay silent for screen readers, so icon-only buttons still need a name
Lea Verou proposes moving UI icons out of inline SVG and into CSS, as design tokens painted by masked pseudo-elements. The approach is quiet for assistive technology by default, and it gives icon-only controls a way to supply their own accessible name.
Marcus Osei · lea.verou.me - Accessibility & semantics
The decorative image you are about to hide probably should not be there at all
Adrian Roselli argues that decorative images in narrative content are not a thing as far as people are concerned, and extends the WAI alt text decision tree with two blunt tests: would readers miss it, and would the author care if it were swapped out.
Marcus Osei · adrianroselli.com - Browser releases
Safari Technology Preview 254 lets WebKit animate to auto and trims the radius longhands
WebKit's 8 October preview adds the interpolate-size property and the calc-size() function for working with intrinsic sizes, the size, min-size and max-size shorthands, border-*-radius side shorthands such as border-top-radius, symbols() and CSS linked parameters, alongside a long run of Grid, line-clamp and VoiceOver fixes.
Iris Calderón · webkit.org - Accessibility & semantics
The right fix for double-tap zoom is one CSS line, not a viewport lock
Andy Bell shows that setting touch-action: manipulation on a button stops iOS Safari's double-tap-to-zoom without disabling page-wide zoom.
Marcus Osei · piccalil.li - CSS & layout
Overlap 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.
Iris Calderón · ishadeed.com - Browser releases
Safari Technology Preview 253 lets container queries branch on sibling-index() and frees style-originated scroll timelines
WebKit's 23 September preview brings sibling-index() and sibling-count() into @container conditions, expands style-originated scroll timelines to match globally, exposes CSSContainerRule.conditions, corrects the ViewTimeline constructor to require a subject, and fixes a VoiceOver announcement bug around aria-keyshortcuts.
Yuki Tanaka · webkit.org - Web platform
Chrome 154 ships responsively-sized iframes with a two-side opt-in
Chrome 154 lands a `frame-sizing` CSS property on the iframe and a matching `responsive-embedded-sizing` meta tag on the embed, so a page can size a frame to its content without a postMessage dance. Only Chromium ships it so far.
Yuki Tanaka · bram.us - CSS & layout
Container 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.
Iris Calderón · smashingmagazine.com - Browser releases
Safari 27.0 ships: the select, the scroll, the model
WebKit has released Safari 27.0 across iOS, iPadOS, macOS and visionOS with 83 web-platform features, including customizable <select>, scroll anchoring via overflow-anchor, and the <model> element beyond visionOS.
Yuki Tanaka · webkit.org - 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