Web Standards

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

Soon we can finally banish JavaScript to the ShadowRealm

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

Mat Marquis walks through the TC39 ShadowRealm proposal, which creates isolated execution contexts with their own pristine globals while running on the same thread as the host. With just two methods, evaluate() and importValue(), ShadowRealms could sandbox third-party scripts, ads, and test suites without polluting the main realm. Currently at Stage 2.7, not yet in browsers.

css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm

You can also follow us on Mastodon, Bluesky, X

WebKit features for Safari 26.5

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

Jen Simmons introduces the :open pseudo-class for styling open <details>, <dialog>, <select>, and <input> elements, the element-scoped keyword for random(), color-interpolation with linearRGB for SVG gradients, ToggleEvent.source for the popover API, and the new Origin API for structured origin comparisons. Plus 63 bug fixes across SVG, WebRTC, networking, editing, anchor positioning, and scroll-driven animations.

webkit.org/blog/17938/webkit-features-for-safari-26-5

You can also follow us on Mastodon, Bluesky, X

How to control infinite CSS animations

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

In part 1 of 2, Temani Afif shows how to speed up, slow down, and reverse infinite CSS animations on demand. He uses animation-composition: add to layer two animations, CSS variables for duration and a speed factor, and abs() and sign() functions to control velocity and direction independently, without restarting the animation.

frontendmasters.com/blog/how-to-control-infinite-css-animations-part-1-of-2

You can also follow us on Mastodon, Bluesky, X

From React to native web with nanotags: a migration that saved 100 KB

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

Pavel Grinchenko explain how they migrated an Astro marketing site from React and Ark UI to native Web Components, cutting JavaScript by 100 KB. Nanotags is a sub-2.5 KB wrapper that adds validated props, typed refs, and automatic cleanup, plus reusable accessibility attachments for ARIA patterns. With nanostores, it covers dropdowns, modals, and toggles.

evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

You can also follow us on Mastodon, Bluesky, X

Using safe-area-inset to build mobile-safe layouts

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

Modern phones have notches, cutouts, and floating buttons that overlap your UI unless you account for them. The Polypane blog walks through env(safe-area-inset-*), why you need viewport-fit=cover in the meta viewport, combining insets with calc() for extra spacing, and the new safe-area-max-inset-* values that stay stable even when the address bar hides on scroll.

polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 148

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

CSS name-only container queries can match by container-name without a container-type. The at-rule() function in @supports tests CSS at-rule support. Video and audio elements gain loading="lazy" for deferred loading. The Prompt API exposes on-device AI language models. Other additions include Web Serial API on Android, Web Authentication Immediate UI mode, text-decoration-skip-ink: all, and revert-rule.

developer.chrome.com/release-notes/148

You can also follow us on Mastodon, Bluesky, X

Media queries range syntax

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

Ahmad Shadeed shows how the classic min-width and max-width syntax creates overlap bugs at identical breakpoints, like two elements hiding at the same 300px. The fix: CSS range syntax with comparison operators like <=, >=, and >, supported in all browsers since March 2023. Clearer code, no manual offsets, and the same logic works for container queries.

ishadeed.com/article/range-syntax

You can also follow us on Mastodon, Bluesky, X

Design token naming conventions: a practical guide

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

Stuart Robson breaks down how to build token names that scale across teams and products. He covers three token tiers (primitives, semantic, and component) and walks through five naming conventions, from category-property-modifier to multi-layered structures. Key takeaways: consistency beats perfection, prioritize clarity over brevity, use semantic intent over visual descriptions, and design for growth.

alwaystwisted.com/articles/design-token-naming-conventions

You can also follow us on Mastodon, Bluesky, X

SVG from scratch

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

Carmen Ansio presents SVG not as a file format but as a DOM: every shape is an element, every attribute is a style, that could be selected with CSS, animated with transitions, and targeted with JavaScript. She covers viewBox, the five core shapes (circle, rect, line, polygon, path), stroke-dasharray draw-on animations, <defs>, <clipPath>, and JS helpers like getTotalLength().

carmenansio.com/articles/svg-from-scratch

You can also follow us on Mastodon, Bluesky, X

The web is fun again: first experiments with HTML in

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

Amit Sheen explores the experimental Canvas Draw Element API behind the flag in Chrome 146, which renders native HTML into a <canvas> while keeping semantics, forms, and interactions intact. Using the layoutsubtree attribute and drawElementImage(), he walks through transform sync, pixel manipulation for color and distortion effects, mouse-driven ripples, and WebGL shaders.

frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas

You can also follow us on Mastodon, Bluesky, X

Scroll-driven animations

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

Josh Comeau dives into CSS animation-timeline, mapping keyframes over scroll distance instead of duration. He covers timing functions, animation ranges (cover, contain, entry, exit), range percentages, scroll progress timelines, and linked timelines that track one element while animating another, with view-timeline and timeline-scope. Around 85% browser support, with Firefox behind a flag.

joshwcomeau.com/animation/scroll-driven-animations

You can also follow us on Mastodon, Bluesky, X

Automate the browser from the terminal with Chrome DevTools MCP CLI

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

Joan León walks through chrome-devtools-mcp, a CLI that controls Chrome through shell commands instead of Puppeteer or Playwright. A persistent daemon keeps state across commands for navigation, network throttling, mobile viewport, dark mode, and form interaction. You can grab accessibility trees, evaluate JavaScript, capture screenshots, run Lighthouse audits, and trace Core Web Vitals.

joanleon.dev/en/chrome-devtools-mcp-cli

You can also follow us on Mastodon, Bluesky, X

The end of responsive images

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

Mat Marquis, former chair of the Responsive Image Community Group, looks back on a decade of wrestling with the sizes attribute and explains how sizes="auto" with loading="lazy" finally hands that work back to the browser for most images. Now supported across Firefox, Safari, and Chrome, descriptive sizes values can be reserved only for above-the-fold images.

piccalil.li/blog/the-end-of-responsive-images

You can also follow us on Mastodon, Bluesky, X

Your options for preloading images with JavaScript

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

Alex MacArthur compares five approaches to preloading images: new Image(), <link rel="preload">, a hidden <div> with a CSS background, the Cache API, and fetch(). Each method has different trade-offs around browser caching, CORS handling, and flexibility. The article breaks down when to use each technique to prevent lag when displaying images that haven’t been loaded yet.

macarthur.me/posts/preloading-images

You can also follow us on Mastodon, Bluesky, X

Playwright accessibility testing: what axe and Lighthouse miss

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

David Mello explains that automated tools like axe and Lighthouse catch only 30-40% of WCAG violations, leaving most issues undetected. The article covers ten categories of accessibility defects that scanners miss, from ambiguous link text to keyboard navigation problems, and provides practical Playwright testing patterns and manual audit strategies to fill those gaps.

davidmello.com/software-testing/test-automation/playwright-accessibility-testing-axe-lighthouse-limitations

You can also follow us on Mastodon, Bluesky, X

Highlights from Git 2.54

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

Taylor Blau walks through new features including git history reword, which opens your editor with a commit’s message and rewrites it in place without touching the working tree or index, and git history split, which lets you interactively split a commit into two by selecting hunks to carve out into a new parent commit. Unlike git rebase, these commands work in bare repositories and refuse operations that would cause merge conflicts.

github.blog/open-source/git/highlights-from-git-2-54

You can also follow us on Mastodon, Bluesky, X

Firefox 150 release notes for developers

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

The release adds sizes="auto" for lazy-loaded images, color-mix() with multiple colors, light-dark() with image values, media pseudo-classes like :buffering, :paused, and :playing for <audio> and <video> elements, animation range properties for scroll-driven animations, the revert-rule keyword, ariaNotify() for screen reader announcements, and an overscroll-behavior fix for elements with overflow: hidden.

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

You can also follow us on Mastodon, Bluesky, X

Fully local code embeds

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

Aleksandr Hovhannisyan built a web component that renders isolated code sandboxes using <iframe srcdoc>, without relying on third-party services like CodePen or CodeSandbox. The component takes HTML, CSS, and JavaScript from a template element and produces a fully local, isolated preview. It works anywhere HTML and JavaScript are supported and has zero dependencies.

aleksandrhovhannisyan.com/blog/local-code-embeds

You can also follow us on Mastodon, Bluesky, X