Web Standards

Un-Sass’ing my CSS: native CSS nesting

2026-03-16T12:00:00+01:00

Stuart Robson walks through how native CSS nesting works in modern browsers and compares it to Sass. He covers specificity, the & symbol, practical differences from Sass, and real-world component examples including alerts, cards, and search forms. The article also explores integration with container queries, :has(), and prefers-reduced-motion.

alwaystwisted.com/articles/UnSassing-my-CSS-nesting

You can also follow us on Mastodon, Bluesky, X

You don’t know HTML tables

2026-03-13T12:00:00+01:00

Frank M Taylor goes beyond the basics, exploring table vocabulary, the Table Object Model API, header cell semantics with scope and headers attributes, and practical patterns for building accessible, well-structured tables with <thead>, <tbody>, <tfoot>, and JavaScript helpers.

blog.frankmtaylor.com/2026/03/05/you-dont-know-html-tables

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 146

2026-03-12T12:00:00+01:00

Scroll-triggered animations let you drive CSS animations from scroll position declaratively. The Sanitizer API helps build XSS-free applications. WebGPU gets compatibility mode for older graphics APIs. Other additions include Iterator.concat for sequencing iterables, a meta element for text scaling on mobile, Navigation API improvements, and more accurate LCP metrics.

developer.chrome.com/release-notes/146

You can also follow us on Mastodon, Bluesky, X

Everything you never wanted to know about visually-hidden

2026-03-11T12:00:00+01:00

David Bushell digs into the two-decade history of the visually-hidden CSS pattern, examining whether just position: absolute and clip-path: circle(0) suffice in 2026. The article explains why the platform still lacks a native alternative and why standardizing the hack might encourage misuse rather than address underlying design problems.

dbushell.com/2026/02/20/visually-hidden

You can also follow us on Mastodon, Bluesky, X

SVGs on the web: performance comparison based on how you load them

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

Joan León compares five loading methods and how each affects caching, requests, and rendering: inline <svg>, <img>, <object>, CSS background, and sprites with <use>. A key anti-pattern: embedding raster images as base64 inside SVGs increases file size by 33% and blocks rendering.

joanleon.dev/en/svg-optimization

You can also follow us on Mastodon, Bluesky, X

CodePen 2.0 is now in public beta

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

Pens now have their own file system with folders, a new block-based build process that lets you mix and match technologies without config, real-time collaboration by invite, an omnibar for quick access to files and commands, and real privacy controls with passwords and invite-only access. No install, no command line, no complicated setup.

codepen.io/beta

You can also follow us on Mastodon, Bluesky, X

The too early breakpoint

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

Ahmad Shadeed explains why many websites switch to a mobile layout too soon. With examples from Time and TechCrunch, he shows how designs break in split-screen, tablet, and iOS link previews. The fix: intermediate breakpoints, container queries, and flexible CSS Grid and Flexbox layouts that adapt to available space instead of relying on rigid viewport widths.

ishadeed.com/article/too-early-breakpoint

You can also follow us on Mastodon, Bluesky, X

A new meta tag for respecting text scaling on mobile

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

Manuel Matuzović demonstrates the proposed <meta name="textscale"> element, an opt-in that makes websites honor OS text size settings in mobile browsers. Relative units like em and rem will scale with user preferences while pixel values stay unchanged. Currently only available in Chrome Canary. Firefox already reacts to OS settings but zooms the entire viewport instead of scaling text alone.

youtu.be/XVIgKEOVfVg

You can also follow us on Mastodon, Bluesky, X

Dictionary compression is finally here, and it’s ridiculously good

2026-03-04T12:00:00+01:00

Tim Perry explains how Compression Dictionary Transport works with Zstandard and Brotli over HTTP, using previous responses as dictionaries to compress data down to near-diffs. YouTube JS bundles shrink up to 90% vs plain Brotli, Google Search HTML nearly 50%. Already deployed by Google, Shopify, Pinterest, and Notion. Chrome 130+, Safari and Firefox on the way.

httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli

You can also follow us on Mastodon, Bluesky, X

Define the theme color for Safari 26

2026-03-03T12:00:00+01:00

Martin Grubinger explains how Safari 26 dropped the <meta name="theme-color"> and now derives chrome color from the body background or a fixed-position element at the top. The article proposes a CSS workaround using scroll-driven animations: a hidden fixed element maintains the desired color while being scrolled out of view. The approach has limitations when pages reload at non-top scroll positions.

grooovinger.com/notes/2026-02-27-safari-26-header-background

You can also follow us on Mastodon, Bluesky, X

Native random values in CSS

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

Alvaro Montoro explores random() and random-item(), two new CSS functions from the Values and Units Module Level 5. random() returns a value within a range with optional step increments, while random-item() picks from a list of discrete values. Both support sharing options to correlate results across properties and elements. Only Safari 26.2 has partial support so far.

alvaromontoro.com/blog/68092/native-random-values-in-css

You can also follow us on Mastodon, Bluesky, X

Making WebAssembly a first-class language on the web

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

Ryan Hunt argues JS-only loading, Web API glue code, and leaky abstractions keep WebAssembly niche, and says the WebAssembly Component Model and WIT could enable <script> loading, direct Web API bindings, and faster DOM updates.

hacks.mozilla.org/2026/02/making-webassembly-a-first-class-language-on-the-web

You can also follow us on Mastodon, Bluesky, X

Practical guide to the element: from basics to LCP

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

Joan León explains responsive images with srcset and sizes, modern formats AVIF and WebP via <picture>, and performance attributes like loading=lazy, width and height to cut CLS, decoding, and fetchpriority. Plus when to preload LCP images and when an image CDN is the pragmatic shortcut.

joanleon.dev/en/guia-practica-elemento-img

You can also follow us on Mastodon, Bluesky, X

Firefox 148 release notes for developers

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

The release adds the HTML Sanitizer API and Trusted Types, plus Iterator.zip() and zipKeyed(), the CSS shape() function, improved anchor positioning, and the experimental Document Picture-in-Picture API.

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

You can also follow us on Mastodon, Bluesky, X

Sprites on the web

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

Josh Comeau shows how to animate spritesheets in CSS within the <img> viewport: object-fit, object-position, and steps(jump-none) for clean frame-by-frame motion, plus when sprites beat GIFs, and when procedural animation is better.

joshwcomeau.com/animation/sprites

You can also follow us on Mastodon, Bluesky, X

An in-depth guide to customising lists with CSS

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

Richard Rutter shows how to size indents with lh units, tweak markers with ::marker, and build cross-browser symbols with @counter-style, while noting that support for some features is limited and you might still need a ::before fallback.

piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css

You can also follow us on Mastodon, Bluesky, X

Border-shape: the future of the non-rectangular web

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

Una Kravets introduces border-shape, an upcoming CSS property that redefines an element’s box so the background, border image, focus outline, and box shadow follow the same custom geometry. It’s already in Chrome Canary ready for testing.

una.im/border-shape

You can also follow us on Mastodon, Bluesky, X

Accessible building blocks for web

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

A series of short videos by TetraLogical covering basics of building accessible interfaces: headings, images, buttons, links, and form fields. It highlights clear labels, strong contrast, logical content order, and semantic HTML for keyboard and screen reader users.

youtube.com/playlist?list=PLTqm2yVMMUKV_6GjmzgxqLuG9Ydgrk5QT

You can also follow us on Mastodon, Bluesky, X

Declarative Dialog menu with invoker commands

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

David Bushell shows a hamburger menu powered by native <dialog> with the new invoker command API and a tiny JavaScript fallback for older browsers. Plus, notes on a WebKit :focus-visible quirk, closedby="any", and view transitions.

dbushell.com/2026/02/12/declarative-dialog-menu-invoker-commands

You can also follow us on Mastodon, Bluesky, X

What’s new in Chrome 145

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

New text-justify CSS property, percentages in letter-spacing and word-spacing, and multicol column-wrap and column-height, plus focusVisible for focus() and improved nested overscroll. Also, an Origin object, Map upsert helpers, window.crashReport, and reduced user-agent string by default.

developer.chrome.com/release-notes/145

You can also follow us on Mastodon, Bluesky, X

State of React 2025 results are live

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

React 19 release, Create React App sunset, React Conf’s new React Foundation, and stable Compiler 1.0 kept client-side React strong, while RSC directives and a December CVE fueled debate. AI tools like v0, Cursor, Lovable, and Bolt.new made “vibe coding” mainstream.

2025.stateofreact.com

You can also follow us on Mastodon, Bluesky, X

Interop 2026 names 20 browser focus areas

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

Apple, Google, Igalia, Microsoft, and Mozilla will align implementations and Web Platform Tests across anchor positioning, advanced attr(), view transitions, the Navigation API, WebTransport, WebRTC, and the CSS zoom property to boost cross-browser interoperability for developers.

You can also follow us on Mastodon, Bluesky, X

WebKit features for Safari 26.3

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

Support for Zstandard for quicker and efficient on-the-fly compression for text-based assets, plus a Navigation API AbortSignal so SPA fetches and other tasks cancel cleanly when navigation is aborted. The release also tightens anchor positioning, multi-column layout, media, HDR rendering, and Safe Browsing behavior.

webkit.org/blog/17798/webkit-features-for-safari-26-3

You can also follow us on Mastodon, Bluesky, X

Debugging with AI: can it replace an experienced developer?

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

Nadia Makarevich tests an LLM on three real React and Next.js bugs, and finds it often fixes symptoms fast, but struggles with root causes. She validates each case manually: a Zod schema mismatch, double loaders, and a redirect plus server action that triggers a “rendered more hooks” error.

developerway.com/posts/debugging-with-ai

You can also follow us on Mastodon, Bluesky, X

Reference Target: having your encapsulation and eating it too

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

Alice Boxhall introduces the new proposal that lets elements in shadow DOM become targets when a shadow host is referenced, while keeping encapsulation. There are open specs PRs and experimental implementations: Chromium’s one is the most complete, and WebKit and Firefox have early prototypes.

blogs.igalia.com/alice/reference-target-having-your-encapsulation-and-eating-it-too

You can also follow us on Mastodon, Bluesky, X