Web Standards

Firefox 152 release notes for developers

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

The release adds the field-sizing CSS property for sizing form controls to their content, Notification actions in showNotification(), the unadjustedMovement option for requestPointerLock(), a pseudoElement option for getAnimations(), firstInterimResponseStart and finalResponseHeadersStart resource timing properties, the side property on SVGTextPathElement, and experimental text module imports with { type: "text" }.

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

You can also follow us on Mastodon, Bluesky, X

Introducing the field guide to grid lanes

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

Jen Simmons announces a new interactive learning resource for CSS grid lanes. Tweak the playground with Waterfall and Brick modes, learn track sizing with fr, minmax(), and repeat(), and explore six real-world demos: photos, recipes, newspapers, menus, timelines, and pinboards. Best in Safari 26.4+.

webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes

You can also follow us on Mastodon, Bluesky, X

CSS reacts, JS just listens

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

Adam Argyle introduces prop-for-that, a tiny library that exposes runtime state to CSS through custom properties. Add data-props-for to an element, and CSS can read live values like pointer position, scroll velocity, battery level, network speed, viewport size, or form validation, with no event handlers or DOM manipulation. Over 16 sources are available.

prop-for-that.netlify.app

You can also follow us on Mastodon, Bluesky, X

Web technology sessions at WWDC26

2026-06-12T12:00:00+02:00

Saron Yitbarek rounds up six WebKit talks: what’s new in Safari 27 beta, CSS grid lanes for masonry layouts, customizable <select> form controls, the <model> element for embedding 3D content, immersive website environments on visionOS 27, and web extensions you can package and submit directly from the browser without Xcode.

webkit.org/blog/17974/web-technology-sessions-at-wwdc26

You can also follow us on Mastodon, Bluesky, X

The quiet problem with unnecessary async

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

Matt Smith warns that marking a function async when it does no real asynchronous work changes its contract and forces every caller to handle Promises. async tends to propagate outward through call chains, adds cognitive overhead, and hides where real I/O actually happens. He recommends keeping synchronous functions synchronous and reaching for async only when real asynchronous work arrives.

allthingssmitty.com/2026/06/08/the-quiet-problem-with-unnecessary-async

You can also follow us on Mastodon, Bluesky, X

CSS animated SVG maps

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

Amber Weinberg walks through animating an SVG map: use <line> and <circle> elements, stagger pin opacity with transitions and :nth-of-type, fade in the background with transform: translate3d(), and draw lines with the stroke-dasharray and stroke-dashoffset trick. Animations live inside a prefers-reduced-motion media query and trigger via a JS class toggle on the parent.

amberweinberg.com/css-animated-svg-maps

You can also follow us on Mastodon, Bluesky, X

News from WWDC26: WebKit in Safari 27 beta

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

Jen Simmons introduces 58 new features and 525 fixes: customizable <select> elements, scroll anchoring, transform-aware anchor positioning, WebAssembly JSPI, CSS :heading pseudo-class, the revert-rule keyword, stretch sizing, top-level await in modules, and immersive <model> environments on visionOS.

webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta

You can also follow us on Mastodon, Bluesky, X

Introducing the CSS Property Type Validator Stylelint plugin

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

Schalk Neethling released the first beta of a plugin that integrates CSS Property Type Validator into existing linting workflows. It validates @property registrations, checks custom property assignments against the registered syntax, and verifies var() compatibility. Catch type mismatches in CI, editors, and pre-commit hooks without separate tooling.

schalkneethling.com/posts/introducing-the-css-property-type-validator-stylelint-plugin

You can also follow us on Mastodon, Bluesky, X

The website specification

2026-06-05T12:00:00+02:00

Joost de Valk published a platform-agnostic reference of technical features every quality website should have. It covers foundations and semantic HTML, SEO and structured data, accessibility, security and CSP, performance and Core Web Vitals, internationalisation, and agent readiness through Markdown endpoints, JSON-LD, and RSS feeds.

specification.website

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 149

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

CSS gap decorations let you style gaps in grid and flexbox layouts. The shape-outside property now supports path(), shape(), rect(), and xywh() functions. SVG path-length becomes a CSS property. Text overflow switches from ellipsis to clip on user interaction. Other additions include image-rendering: crisp-edges, Intl.Locale.prototype.variants, and WebSocket connections that no longer block back/forward cache.

developer.chrome.com/release-notes/149

You can also follow us on Mastodon, Bluesky, X

CSS is filling the gaps with rules. A way to style gaps in grid and flex

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

Brecht De Ruyte explores new CSS gap decorations that let you style spacing in grid and flex layouts without workarounds. The column-rule and row-rule properties draw lines in gaps, while rule-break, rule-inset, rule-overlap, and rule-visibility-items fine-tune intersections, extension, and conditional display. The rules are animatable too.

utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex

You can also follow us on Mastodon, Bluesky, X

The state of CSS centering in 2026

2026-06-02T12:00:00+02:00

Temani Afif breaks down the many valid ways to center in CSS and shows how to pick the right one. He covers alignment theory with two levels and two axes, compares flexbox, grid, position: absolute, and text-align, explains the text-box property for trimming whitespace around glyphs, anchor-center in anchor positioning, and the difference between safe and unsafe centering.

css-tricks.com/the-state-of-css-centering-in-2026

You can also follow us on Mastodon, Bluesky, X

Entry and exit transitions with modern CSS

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

Matt Croat shows how to animate elements as they appear and disappear: @starting-style sets initial values, transitions stay interruptible mid-animation, and allow-discrete handles properties like display that normally jump. The View Transition API completes the picture by animating layout changes between DOM states, with practical examples for <dialog> and popovers.

joyofcode.xyz/entry-and-exit-css-transitions

You can also follow us on Mastodon, Bluesky, X

Replacements.fyi: performant, safer npm package alternatives

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

A tool from the e18e collective that helps you find more performant and safer replacements for outdated or unnecessary npm packages. Type a package name like is-number, left-pad, or is-odd, and get drop-in alternatives or short code snippets you can paste instead. You can filter by runtime: Node, Bun, Deno, Cloudflare, or browser. Also browse all packages or scan a package.json to spot dependencies worth dropping.

replacements.fyi

You can also follow us on Mastodon, Bluesky, X

CSS vs. JavaScript: exploring the performance implications of different animation strategies

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

Josh Comeau compares CSS, Web Animations API, and the JS libraries GSAP and Motion under main-thread congestion. CSS and Motion stay smooth because their animations run off the main thread, while typical JS animations and GSAP freeze. Library cost matters too: Motion weighs 48 kB gzipped, GSAP 27 kB. Use native CSS when you can, and reach for JS libraries only for what CSS can’t do, like SVG shape morphing.

joshwcomeau.com/animation/css-vs-javascript

You can also follow us on Mastodon, Bluesky, X

Better fluid sizing with round()

2026-05-27T12:00:00+02:00

Ahmad Shadeed explores how the CSS round() function complements clamp() by snapping fluid values to consistent intervals, avoiding awkward decimals like 19.7px. He walks through card font sizes, type scales, and baseline grids, and shows how round() with container query units keeps visual rhythm as viewports change. He also touches on calc-size() for syncing heights across stacked components.

ishadeed.com/article/css-round

You can also follow us on Mastodon, Bluesky, X

Declarative partial updates

2026-05-26T12:00:00+02:00

Barry Pollard and Noam Rosenthal introduce two new web platform proposals for inserting HTML out of order. Processing instructions like <?marker> and <?start>/<?end> paired with <template> let servers stream HTML into specific document locations without waiting for sequential delivery. New JavaScript methods setHTML(), appendHTML(), and streamHTML() bring consistent naming for partial updates. Polyfills are on npm.

developer.chrome.com/blog/declarative-partial-updates

You can also follow us on Mastodon, Bluesky, X

600+ million people write right-to-left: two fixes your app needs

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

Nina Torgunakova covers two scenarios. For English apps with free-form inputs, set dir="auto" so the browser picks direction from the first character, no JavaScript needed. For fully localized UIs, set dir="rtl" on <html> and swap physical CSS properties for logical ones like margin-inline-start, padding-inline-end, and text-align: start.

evilmartians.com/chronicles/600-million-people-write-right-to-left-2-fixes-your-app-needs

You can also follow us on Mastodon, Bluesky, X

Look up web platform features from your terminal

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

Patrick Brosset’s wf command searches by keyword and shows Baseline status, MDN docs, specs, browser bugs, survey results, standards positions, and Chrome usage. It combines data from web-features and web-features-mappings, both maintained by the W3C WebDX Community Group, and fetches the latest data at runtime.

npmjs.com/package/web-features-cli

You can also follow us on Mastodon, Bluesky, X

State of CSS 2026

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

Devographics opened the annual State of CSS survey, this year with fewer features so it stays manageable. The team focused on what matters most, from layout, selectors, and typography to interactions, forms, and shapes. It takes 15–20 minutes to complete and helps map how developers actually use modern CSS. Don't forget to vote for your favorite resources and add anything new to your reading list.

survey.devographics.com/en-US/survey/state-of-css/2026

You can also follow us on Mastodon, Bluesky, X

Modern web guidance

2026-05-20T12:00:00+02:00

A set of evergreen, expert-vetted skills for AI coding agents from the Chrome team, covering UI components, legacy code modernization, security, and performance. Install via npx modern-web-guidance@latest install, or as plugins for Claude Code, Copilot CLI, Vercel Agent Skills, and Antigravity. The skills can help with modern features like <dialog> modals, popover tooltips, container queries, passkeys, CSP, and improving Web Vitals.

developer.chrome.com/docs/modern-web-guidance

You can also follow us on Mastodon, Bluesky, X

Firefox 151 release notes for developers

2026-05-19T12:00:00+02:00

The release adds shadowrootslotassignment on <template> elements for declarative slot assignment, @container style() queries, position-anchor: normal, the Document Picture-in-Picture API for always-on-top HTML windows, desktop Web Serial API, CanvasRenderingContext2D.lang, keyboardLock in requestFullscreen(), and the experimental field-sizing property for form controls.

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

You can also follow us on Mastodon, Bluesky, X

State of AI 2026 results

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

Sacha Greif’s annual survey of 7,258 developers shows AI-assisted coding has gone mainstream, with respondents now generating 54% of their code with AI, up from 28% last year. Claude Code leads in positive sentiment among coding agents at 42.3%. Spending on AI tools keeps rising as the industry shifts from VC-subsidized pricing to sustainable monetization. Hallucinations remain the top pain point.

2026.stateofai.dev/en-US

You can also follow us on Mastodon, Bluesky, X

Browsers treat big sites differently

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

Den Odell reveals how Safari and Firefox quietly ship thousands of lines of site-specific patches to keep popular websites working. WebKit’s Quirks.cpp and Firefox’s about:compat both contain interventions for sites like TikTok, Netflix, and Reddit, sometimes even faking Chrome’s user agent. Chrome’s dominance forces minority browsers to compensate, echoing the IE era in reverse.

denodell.com/blog/browsers-treat-big-sites-differently

You can also follow us on Mastodon, Bluesky, X

The HTML Sanitizer API

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

Ahmad Alfy walks through the new browser-native API that prevents XSS without DOMPurify. Safe methods setHTML and parseHTML always strip dangerous content, while setHTMLUnsafe and parseHTMLUnsafe respect your configuration. Allow-lists and block-lists give fine-grained control over elements and attributes. Great for comment sections, WYSIWYG editors, and markdown previews, though backend sanitization stays essential.

alfy.blog/2026/05/07/html-sanitizer-api.html

You can also follow us on Mastodon, Bluesky, X