Web Standards

The JavaScript midlife crisis

2026-10-02T12:00:00+02:00

Maroun Baydoun looks at how Rust, Go, and Zig are taking over the JavaScript toolchain. When linters and formatters shared a language with your code, anyone could debug and fix them. Rewriting a bundler in Rust makes it faster but shrinks the pool of people who can maintain it. Now we compile JavaScript with Rust to produce JavaScript that runs in an engine written mostly in C++, laying faster tracks for a slow train.

maroun-baydoun.com/blog/javascript-midlife-crisis

You can also follow us on Mastodon, Bluesky, X

State of Devs 2026 survey results

2026-10-01T12:00:00+02:00

Sacha Greif and Devographics polled 5,463 developers about everything but code. Management tops the workplace issues, and 62% have experienced burnout. Most rely on AI for the bulk of their code, yet sentiment is split down the middle, and only 23% say it had a positive impact on their mental state. Climate change remains the top worry, and exhaustion and disillusionment lead the feelings about the tech industry.

2026.stateofdevs.com/en-US

You can also follow us on Mastodon, Bluesky, X

Firefox 157 release notes for developers

2026-09-30T12:00:00+02:00

The at-rule() function in @supports tests whether a browser supports a given at-rule, like at-rule(@scope), and works in the supports() function of @import. The overscroll-behavior properties gain a chain value: scrolling passes to another scrollable area without the default bounce. Animation.reverse() now plays an animation with playbackRate 0. Behind flags: ML-KEM in Web Crypto and notification navigate.

developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/157

You can also follow us on Mastodon, Bluesky, X

Improving site performance by shipping more CSS

2026-09-29T12:00:00+02:00

In the GitHub blog, Josh Black and Marie Lucca explain how the Primer design system moved from CSS-in-JS to CSS Modules. The sx prop’s runtime cost grew with every component on a page, so the team shipped both versions behind feature flags and compared visual regression snapshots. The result: 55% less time to server-side render a page and 25% less time for components to initialize.

github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 154

2026-09-28T12:00:00+02:00

The new text-decoration-inset property controls how far underlines, overlines, and line-through decorations start and end, while negative values extend them past the text. The scroll-marker-group property takes links and tabs modes that set focus order and ARIA semantics for scroll markers. An <iframe> can size itself to its content with frame-sizing, and JavaScript gains Iterator.includes().

developer.chrome.com/release-notes/154

You can also follow us on Mastodon, Bluesky, X

Browsers situationship: when browsers agree but the spec doesn’t

2026-09-25T12:00:00+02:00

Rakhi Sharma looks at what happens when Chrome, Firefox, and Safari ship the same behavior that the spec never described. Sometimes the browsers get fixed, sometimes the spec moves toward reality: newline normalization in HTML forms went that way. WHATWG’s working mode, Web Platform Tests, and the Compatibility Standard all push toward convergence.

atbrakhi.dev/blog/browsers-situationship

You can also follow us on Mastodon, Bluesky, X

One SVG, nine posters: CSS link-parameters

2026-09-24T12:00:00+02:00

Vadim Makeev tries CSS Linked Parameters, a new spec running in Firefox Nightly and behind a flag in Safari TP. The SVG file writes env(--color, fallback) wherever a value goes, and the page passes it in with link-parameters: param(--color, coral). A Warhol print in SVG, referenced nine times as <img>, comes out in different color schemes from one cached file. Browsers without support render the fallbacks.

pepelsbey.dev/articles/svg-link-params

You can also follow us on Mastodon, Bluesky, X

The root scroller and how not to lose it

2026-09-23T12:00:00+02:00

Kilian Valkhof explains what the page’s own scroll container gives you: it restores scroll position, answers Space and arrow keys, and on mobile collapses the address bar and enables pull-to-refresh. A fixed-height app shell wrapper with overflow replaces it, and window.scrollY stuck at 0 gives it away. Full-height layouts, sticky headers, and scroll locks all have fixes that keep the page scrolling.

polypane.app/blog/the-root-scroller-and-how-not-to-lose-it

You can also follow us on Mastodon, Bluesky, X

Responsive iframes in Chrome 154

2026-09-22T12:00:00+02:00

Sebastian Benz and Bramus Van Damme introduce frame-sizing, a CSS property that lets an embedded frame grow with its content instead of reporting height through postMessage. The embedding page sets frame-sizing: content-height, and the embedded document opts in with a <meta> element that can restrict origins. After content changes, window.requestResize() asks for a new measurement. Behind flags in Chrome and Edge.

developer.chrome.com/blog/responsive-iframes

You can also follow us on Mastodon, Bluesky, X

Better icon and label alignment

2026-09-21T12:00:00+02:00

Ahmad Shadeed starts with a list where align-items: center drifts as soon as a label wraps to a second line, while align-items: start leaves the icon too high because of the line box around the text. The fix is the lh unit: half the difference between the line box and the icon size, applied as a translateY() offset that holds at any font size. Icons drawn as pseudo-elements need a couple of extra declarations.

ishadeed.com/article/aligning-list-icons

You can also follow us on Mastodon, Bluesky, X

Sidenotes with CSS anchor positioning

2026-09-18T12:00:00+02:00

Vincent Bernat moves footnotes into the margin with anchor-name and position-anchor, both read from data attributes with typed attr(). Each note lines up with its reference mark, and when the previous one is in the way, a max() of two anchor() values pushes it a line below instead. On narrow viewports and older browsers, notes stay under their paragraph, muted.

vincent.bernat.ch/en/blog/2026-css-sidenotes

You can also follow us on Mastodon, Bluesky, X

Modern web types

2026-09-17T12:00:00+02:00

Philip Walton got tired of TypeScript flagging the View Transition API, Long Animation Frame API, and fetchLater() as errors, because its official DOM types only cover APIs shipped in two engines. So he published modern-web-types, a drop-in replacement built with the same generator and W3C webref data, but with a single-engine threshold: 433 extra interfaces, 223 globals, and 311 members on existing interfaces.

philipwalton.com/articles/modern-web-types

You can also follow us on Mastodon, Bluesky, X

WebKit features in Safari 27

2026-09-16T12:00:00+02:00

Customizable <select>, scroll anchoring, WebAssembly JSPI, ariaNotify(), the :heading pseudo-class, revert-rule, stretch sizing, sizes="auto", import defer, subpixel inline layout, and the service worker static routing API — a total of 83 new features and 844 fixes, plus major updates in WebRTC, MathML, spatial web, web extensions, and developer tools.

developer.apple.com/documentation/safari-release-notes/safari-27-release-notes

You can also follow us on Mastodon, Bluesky, X

Firefox 156 release notes for developers

2026-09-15T12:00:00+02:00

The Inspector now resolves var(), attr(), and env() in declaration steps, tracing them to their source. Calls to scheduler.yield() keep the task’s priority and abort signal across a synchronous await. Promise.try() passes native promises through, and using declarations can no longer be reassigned. Behind flags: named-feature() in @supports and the Container Timing API.

developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/156

You can also follow us on Mastodon, Bluesky, X

The browser’s main thread is expensive

2026-09-14T12:00:00+02:00

Sunhyoup Lee walks through the one thread that runs JavaScript, styles, layout, paint, and events, with about 10 milliseconds per frame, half that on a 120Hz screen. Spend it better: split long tasks and yield with scheduler.yield(), batch events with debounce and throttle, prioritize by user impact, and defer the rest. Or hand it off to the compositor or a Worker. Interactive demos compare them.

kciter.so/posts/the-expensive-main-thread/en

You can also follow us on Mastodon, Bluesky, X

Make your logo brighter than white

2026-09-11T12:00:00+02:00

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 perfectly normal JPEG everywhere else. Light elements on dark backgrounds glow best. The page also shows how to paint text through such an image with background-clip: text, gated behind @media (dynamic-range: high).

soverybright.com

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 153

2026-09-10T12:00:00+02:00

The <camera> and <microphone> elements request video and audio capture declaratively, with browser-controlled UI and permission recovery. The overflow property now takes scrollable values next to clip, so overflow: scroll clip makes a scroll container on one axis. The new scroll-axis-lock property controls diagonal scrolling. JavaScript gains Iterator.zip() and Iterator.zipKeyed() to aggregate several iterators.

developer.chrome.com/release-notes/153

You can also follow us on Mastodon, Bluesky, X

You don’t need initial-scale in your HTML

2026-09-09T12:00:00+02:00

Declan Chidlow and Peter-Paul Koch published the same finding hours apart: the viewport <meta name="viewport"> only needs width=device-width. The initial-scale=1 part was there to fix zooming in old iOS versions, and Safari now recalculates the layout viewport on orientation change without it. Nineteen bytes saved in every document head.

You can also follow us on Mastodon, Bluesky, X

Container style queries and advanced attr(): rethinking how to wire up my components in CSS

2026-09-08T12:00:00+02:00

Brecht De Ruyte casts HTML attributes straight into typed CSS values, so data-gap="2" on a grid becomes attr(data-gap cqi, 2cqi) instead of a utility class. A parent then sets data-density="compact", and @container style() queries rescale padding, avatars, and type through one --density-scale multiplier. No modifier classes, no props, no JavaScript.

utilitybend.com/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css

You can also follow us on Mastodon, Bluesky, X

Submit your proposals for Interop 2027

2026-09-07T12:00:00+02:00

The call is open until September 23rd, and the proposal guide spells out what browsers look for: a stable specification, plus Web Platform Tests that run automatically in Chrome, Edge, Firefox, and Safari on wpt.fyi. Evidence of real-world breakage, demand from developer surveys, and accessibility or privacy wins all count. There are two templates: focus areas for ready features, investigations for the rest.

You can also follow us on Mastodon, Bluesky, X

Fine, I’ll build my own text editor!

2026-09-04T12:00:00+02:00

David Bushell tries three ways to build one in the browser and shows what each approach gives away. Canvas offers full control but no text selection, undo history, or multi-line paste. Contenteditable with plaintext-only brings back native editing and accessibility, though performance drops past a certain number of characters. A plain <textarea> turns out fastest, with syntax highlighting layered on top.

dbushell.com/2026/09/01/text-editor

You can also follow us on Mastodon, Bluesky, X

Feature detecting “undetectable” CSS features with @supports named-feature()

2026-09-03T12:00:00+02:00

Bramus Van Damme explains the function the CSS Working Group adopted for capabilities you can’t test any other way. Checking @supports (display: flex) and (gap: 1em) only proves both parse, not that gap works in a flex container. The spec has two keywords so far: anchor-position-follows-transforms and single-axis-scroll-container.

bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature

You can also follow us on Mastodon, Bluesky, X

Firefox 155 release notes for developers

2026-09-02T12:00:00+02:00

This release expands attr() to any CSS property with unit identifiers and fallback values, adds the progress() and alpha() functions, renames font-stretch to font-width, and brings Promise.allKeyed() and Promise.allSettledKeyed(). DevTools get a media feature emulation panel and JSON Lines support. Behind flags: scroll-driven animations, scoped custom element registries, and line-clamp improvements.

developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/155

You can also follow us on Mastodon, Bluesky, X

Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS

2026-09-01T12:00:00+02:00

Brecht De Ruyte tries Google’s Modern Web Guidance, a skillset that feeds expert platform guidance with Baseline data into coding agents. Its CLI search pulls in only the relevant guides out of 103 features, and every fallback is checked nightly by Playwright graders. Since it stays vendor-agnostic, he adds three skills of his own for token tiers, theming with light-dark(), and component states.

utilitybend.com/blog/modern-web-guidance-antigravity-and-my-own-design-token-skills

You can also follow us on Mastodon, Bluesky, X

Highlighting a range of text inside a form field

2026-08-31T12:00:00+02:00

Ollie Williams shows how the new OpaqueRange extends the CSS Custom Highlight API into form controls. Call createValueRange() on a <textarea> or on a text, password, search, tel, or url <input>, pass the result into a Highlight(), and register it with CSS.highlights.set(). In ::highlight() you get color, background-color, text-decoration, and text-shadow. Chromium 152 only for now.

olliewilliams.xyz/blog/opaquerange

You can also follow us on Mastodon, Bluesky, X