Web Standards

Firefox 159 release notes for developers. Scroll-driven animations on by default, scoped custom element registries for web components, and legacy masonry removed in favor of grid lanes. #firefox #browser developer.mozilla.or...

Introducing the accessible components library. Craig Abbott presents TetraLogical’s eight open-source components with docs and tests that check WCAG 2.2 criteria in a real browser, with about 97% of scenarios automated. #a11y #component tetralogical.com/blo...

What the iPhone Duo means for web development (and Video.js). @darius.cool tried the Device Posture and Viewport Segments APIs behind Safari flags to build a foldable player with video on top and controls below. #video #css videojs.org/blog/iph...

Building a filterable menu that works for everyone. Jenna Smith and James Nelson explain why Base UI’s filterable menu is a dialog with a search field, not a combobox, and how arrow keys navigate items without breaking typing. #a11y #component base-ui.com/blog/bui...

What’s new in Chrome 156. CSS gains the random() function, the :navigation-source pseudo-class for the element that started a navigation, and scroll-snap-type: pair, while failed module imports can now be retried. #chrome #browser chromestatus.com/rel...

Why WebMCP matters. @yoav.ws calls WebMCP web performance for AI agents: sites register JS tools that agents call instead of clicking around, so co-browsing gets faster and cheaper while users stay in control. #ai #api blog.yoav.ws/posts/w...

JPEG XL vs AVIF for web use-cases. Jake Archibald benchmarked both: AVIF produces smaller lossy files for photos, screenshots, and transparency, while JPEG XL wins at lossless. His default is AVIF 4:4:4 at high effort. #image #performance jakearchibald.com/20...

Fit height to background pattern size with calc-size(). Ahmad Shadeed rounds a section’s auto height up to a multiple of the tile height with calc-size() and round(), so the pattern never gets cut off. Chrome-only for now. #css #layout ishadeed.com/article...

Iframes that finally fit their content. Ahmad Alfy explains frame-sizing: content-height, the <meta> opt-in, and window.requestResize(). Chromium-only for now. #html #css alfy.blog/2026/10/09...

Firefox 158 release notes for developers. JPEG XL on by default, CSS typed arithmetic in calc(), a navigate option for notifications, plus flagged random(), corner-shape, and import defer. #firefox #browser developer.mozilla.or...

Rendering Markdown comments safely: setHTML(), DOMPurify, and Trusted Types. Agustin Barrientos builds one explicit allowlist for setHTML() with a DOMPurify fallback and enforces it with Trusted Types. #security #html agustinbarrientos.co...

iPhone Duo: doubling my disappointment with Safari. Mike Piontek found that Safari ignores safe area insets for the iPhone Duo’s right-hand toolbar and tints it by sampling the page’s right edge, breaking existing workarounds. #safari #css mikepiontek.com/jour...

2027 web platform feature ranking. The @webdevs.firefox.com team asks you to rank around 10 of the 100 Interop 2027 proposals you care about. Last year’s 1900+ rankings shaped both Interop picks and Firefox’s own priorities. #interop #firefox interop-rank.fxdx.dev/

What’s new in Chrome 155. JPEG XL decoding returns, CSS gains margin-trim and the symbols() function for inline counter styles, and JavaScript can import text modules with { type: "text" }. #chrome #browser chromestatus.com/rel...

A flame needs three sine waves. Carmen Ansio breaks down a canvas match animation: teardrop shapes, three layered sine waves for an organic flicker, sparks with gravity, and prefers-reduced-motion support. #animation #js www.carmenansio.com/...

Transferring sibling-count() to a parent element. @css-only.dev turns sibling-count() of an extra child into a variable on the parent using scroll-driven animations, a CSS-only stand-in for the proposed children-count(). #css #scroll blog.master.dev/tran...

Developer Signals: shape what browsers build next. Rick Viscomi made a tool to browse upcoming web features and Interop 2027 proposals, vote with GitHub, and share use cases that go straight to browser vendors. #interop #browser developer-signals.dev

The JavaScript midlife crisis. Maroun on the toolchain rewrite in Rust, Go, and Zig: faster builds, but fewer JavaScript developers who can read, debug, and maintain their own tools. #js #tools maroun-baydoun.com/b...

State of Devs 2026 survey results. Sacha Greif and Devographics polled 5,463 developers: 62% have experienced burnout, and most rely on AI for their code, yet only 23% say it had a positive impact on their mental state. #stateof #survey 2026.stateofdevs.com...

Firefox 157 release notes for developers. at-rule() in @​supports, a chain value for overscroll-behavior, Animation.reverse() at playbackRate 0, plus flagged ML-KEM in Web Crypto and notification navigate. #firefox #browser developer.mozilla.or...

Improving site performance by shipping more CSS. In the GitHub blog, Josh Black and Marie Lucca on the multi-year move from CSS-in-JS to CSS Modules: 7,760 sx props removed, 55% less server-side rendering, and 25% faster component init. #css #performance github.blog/engineer...

What’s new in Chrome 154. The text-decoration-inset property trims or extends underlines, scroll-marker-group gains links and tabs modes for focus order and ARIA semantics, and Iterator.includes() checks whether an iterator yields a value. #chrome #browser developer.chrome.com...

Browsers situationship: when browsers agree but the spec doesn’t. Rakhi explains why a spec sometimes moves toward browser behavior instead of the other way around, and how tests and Web compatibility bring them back to one result. #browser #interop www.atbrakhi.dev/blo...

One SVG, nine posters: CSS link-parameters. Vadim Makeev passes colors into an external SVG with link-parameters and param(), while the file's own env() fallbacks keep it working everywhere else. Experimental in Firefox Nightly and Safari TP. #css #svg pepelsbey.dev/articl...

The root scroller and how not to lose it. Kilian Valkhof shows how an app shell with a fixed-height wrapper and overflow replaces the page's own scroll container, losing keyboard scrolling and pull-to-refresh, and what to use instead. #css #scroll polypane.app/blog/th...

Responsive iframes in Chrome 154. Sebastian Benz and Bramus introduce frame-sizing, a CSS property that sizes an <iframe> to its content, with a <meta> element opt-in and window.requestResize() for later updates. #html #css developer.chrome.com...

Better icon and label alignment. Ahmad Shadeed lines an icon up with the first line of a wrapping label using the lh unit: half the difference between the line box and the icon size, applied as a translateY offset. #css #layout ishadeed.com/article...

Sidenotes with CSS anchor positioning. Vincent Bernat pulls notes into the margin with anchor-name, position-anchor, and typed attr(), then uses max() with anchor() so a note lines up with its reference mark or drops below the previous one. #css #anchor vincent.bernat.ch/en...

Modern web types. Philip Walton published a drop-in replacement for TypeScript’s DOM types with a single-engine threshold, so the View Transition API, Long Animation Frame API, and fetchLater() stop showing up as errors. #tools #js philipwalton.com/art...

WebKit features in Safari 27. Apple’s release notes list 83 new features and 844 fixes: customizable <select>, scroll anchoring, WebAssembly JSPI, ariaNotify(), :heading, revert-rule, stretch sizing, and import defer. #safari #css developer.apple.com/...

Firefox 156 release notes for developers. The Inspector resolves var(), attr(), and env() down to their source, scheduler.yield() keeps the task’s priority across synchronous awaits, and Promise.try() passes native promises through. #firefox #browser developer.mozilla.or...

The browser’s main thread is expensive. Sunhyoup Lee explains how to fit JavaScript, styles, layout, and events into 10 milliseconds per frame: split long tasks and yield, batch frequent events, or move work to the compositor or a Worker. #performance #js kciter.so/posts/the-...

Make your logo brighter than white. Chris Bennett built a tool that turns a logo into a gain-map JPEG, so the colors you pick shine up to 7.5 times brighter than plain white on HDR screens and stay a normal JPEG everywhere else. #color #image www.soverybright.com/

What’s new in Chrome 153. The <camera> and <microphone> elements request media capture declaratively, overflow: scroll clip makes a scroll container on one axis only, and Iterator.zip() aggregates several iterators at once. #chrome #browser developer.chrome.com...

You don’t need initial-scale in your HTML. Vale and ppk 🇪🇺 published the same finding hours apart: the <meta name="viewport"> element only needs width=device-width, and Safari no longer needs the hint. #html #browser vale.rocks/micros/20... quirksmode.org/quirk...

Container style queries and advanced attr(): rethinking how to wire up components in CSS. Brecht De Ruyte casts attributes like data-gap="2" into typed CSS values and lets @​container style() queries rescale a whole card from one variable. #css #component utilitybend.com/blog...

Submit your proposals for Interop 2027. The call is open until September 23rd. A proposal needs a stable specification and Web Platform Tests that run automatically in all four browsers, plus evidence that developers hit the problem. #interop #wpt github.com/web-platf...

Fine, I'll build my own text editor! @dbushell.com compares canvas, contenteditable with plaintext-only, and a plain <textarea> for building an editor in the browser, and finds the humble <textarea> the fastest of the three. #html #performance dbushell.com/2026/09...

Feature detecting undetectable CSS features with @​supports named-feature(). Bramus explains the new function that checks what @​supports can’t reach, like whether gap actually works in a flex container and not just parses. #css #interop www.bram.us/2026/08/...

Firefox 155 release notes for developers. This expands attr() to any CSS property, adds the progress() and alpha() functions, renames font-stretch to font-width, and brings Promise.allKeyed(). Scroll-driven animations are behind a flag. #firefox #browser developer.mozilla.or...

Getting agents to write better CSS. Brecht De Ruyte pairs Google’s Modern Web Guidance, which feeds Baseline-aware platform guidance into coding agents, with three skills of his own for token tiers, theming, and component states. #ai #css utilitybend.com/blog...

Highlighting a range of text inside a form field. Ollie Williams shows how OpaqueRange brings the CSS Custom Highlight API to form controls: call createValueRange() and style the result with ::highlight(). Chromium 152 only for now. #chrome #js olliewilliams.xyz/bl...

Making a long list fast: content-visibility vs. virtualization. Agustin Barrientos shows that content-visibility: auto keeps rows in the DOM and skips offscreen work, while virtualization unmounts them, losing find-in-page and focus. #performance #css agustinbarrientos.co...

What’s new in Chrome 152. CSSPseudoElement now covers ::backdrop, ::scroll-marker, and ::view-transition, the CPU Performance API reports the performance tier of a device, and the Connection-Allowlist header restricts outgoing requests. #chrome #browser developer.chrome.com...

Balancing flex items with flex-wrap: balance. Ahmad Shadeed shows five ways to avoid a lone item on the last flex line, from container queries to display: contents, and finally flex-wrap: balance from Chrome 150, which needs one declaration. #css #layout ishadeed.com/article...

Intent to ship: JPEG XL. Jake Archibald explains that Firefox is shipping JPEG XL built on jxl-rs, the Rust decoder from Google Research. AVIF still wins on photos, but JPEG XL is better at lossless and progressive rendering. #image #firefox hacks.mozilla.org/20...

A look at the <geolocation> HTML element and how it works. @dxnny.fun explains the Chrome 144 element that replaces the Geolocation API with markup: autolocate, watch, onlocation, a :granted pseudo-class, and rules against clickjacking. #html #chrome piccalil.li/blog/a-l...

My HTML boilerplate in 2026. @matuzo.at explains every line of his <head>, including the new additions: the text-scale meta tag, dark mode SVG favicons, a markdown alternate link, and fediverse:creator. #html #learn www.matuzo.at/blog/2...

A field guide to the Chrome DevTools Performance panel. Joan León explains it with interactive figures: the colors, network request bars, flame chart depth and self time, the four LCP phases, CLS, and INP. #performance #devtools perf.reviews/profile...

The case for tri-state dark mode toggles. Bramus replies to @lea.verou.me: when the OS switches by the clock, a two-state toggle flips a daytime choice for light to dark at night. Tri-state is clearer. #design #color www.bram.us/2026/08/...