Web Standards

Getting your article shared: tips from ten years of newsletter curation

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

Scott Vandehey, who has curated front-end links for over a decade, shares practical advice on making your articles more shareable: add Open Graph tags, use a distinctive sharing image, write descriptive titles, include a concise blurb, set canonical URLs correctly, and always add a publication date.

cloudfour.com/thinks/getting-your-article-shared-tips-from-ten-years-of-newsletter-curation

You can also follow us on Mastodon, Bluesky, X

What is CSS containment and how can I use it?

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

Harry Roberts explains an underused CSS feature that lets the browser skip unnecessary layout and paint work. The article covers each contain value (layout, paint, size, style), the content and strict shorthands, and content-visibility for lazy rendering. It includes an OpenTable example where contain: strict cut layout time from 11 ms to under 2 ms by limiting scope from 4371 nodes to just 73.

csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it

You can also follow us on Mastodon, Bluesky, X

The great CSS expansion

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

Pavel Laptev tours CSS features that replace JavaScript libraries: anchor positioning for Floating UI, the Popover API and <dialog> element for Radix, scroll-driven animations for GSAP, view transitions for Motion, and customizable <select> for React Select. Together they can cut up to 322 kB of minified, gzipped JavaScript from a typical app.

blog.gitbutler.com/the-great-css-expansion

You can also follow us on Mastodon, Bluesky, X

Squarespace and web standards: how we helped bring HTML video and audio lazy loading to today’s browsers

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

Scott Jehl describes how Squarespace engineers proposed loading="lazy" for <video> and <audio> elements, worked with WHATWG, wrote Web Platform Tests, and collaborated with Mozilla, Apple, and Chromium teams to ship the feature as an official standard on March 23, 2026.

engineering.squarespace.com/blog/2026/squarespace-and-web-standards-how-we-helped-bring-html-video-and-audio-lazy-loading-to-todays-browsers

You can also follow us on Mastodon, Bluesky, X

Native JSON modules are finally real

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

Matt Smith explains how import attributes let you load JSON files directly with import data from 'data.json' with { type: 'json' }, no bundler required. Browsers and runtimes handle JSON modules natively with explicit type declarations, eliminating build-time transformations and establishing a foundation for future structured module types.

allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real

You can also follow us on Mastodon, Bluesky, X

Form-associated custom elements in practice

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

Rob Levin shares his experience retrofitting the AgnosticUI component library with Form-Associated Custom Element support using the ElementInternals API. The article covers two validation strategies: delegating to native form controls or implementing validation directly, with practical walkthroughs for input, radio, and combobox components, including Shadow DOM isolation challenges.

frontendmasters.com/blog/form-associated-custom-elements-in-practice

You can also follow us on Mastodon, Bluesky, X

CSS is DOOMed: rendering DOOM in 3D with CSS

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

Niels Leenheer built a version of the classic game where every visual element is a <div> positioned in 3D space using CSS transforms, with JavaScript handling only the game logic. The project uses CSS trigonometric functions, @property for animatable custom properties, anchor positioning for HUD, and SVG filters for spectral enemies.

nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css

You can also follow us on Mastodon, Bluesky, X

The Layout Maestro, a practical CSS course on building web layouts

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

Ahmad Shadeed’s course teaches how to think about layout decisions, not just syntax. It covers Flexbox, Grid, container queries, and :has() through visual lessons and interactive demos, helping you build resilient layouts that don’t break when content or screen size changes.

thelayoutmaestro.com

You can also follow us on Mastodon, Bluesky, X

Under the hood: a closer look at the CSS architecture behind the redesign

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

Brecht De Ruyte walks through cascade layers for style priority, a three-tiered design token system, the light-dark() function for theme switching, a modernized reset wrapped in :where(), container queries for responsive components, logical properties, and progressive enhancement gated behind @supports.

utilitybend.com/blog/under-the-hood-a-closer-look-at-the-css-architecture-behind-the-redesign

You can also follow us on Mastodon, Bluesky, X

WebKit features for Safari 26.4

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

Jen Simmons introduces 44 new features including grid lanes for masonry-style layouts, WebTransport for low-latency bidirectional communication, and the Keyboard Lock API for capturing browser shortcuts in fullscreen. The release also adds name-only container queries, threaded scroll-driven animations, ReadableByteStream, and improvements to layout engines, Web Inspector, and accessibility. Plus 191 bug fixes.

webkit.org/blog/17862/webkit-features-for-safari-26-4

You can also follow us on Mastodon, Bluesky, X

Firefox 149 release notes for developers

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

The release adds the popover="hint" value, CloseWatcher for custom closeable components, shape-outside support for xywh(), vertical-align as a shorthand property, optional @container query conditions, HTMLSelectElement.showPicker() for <datalist> elements, and HTMLMediaElement.captureStream().

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

You can also follow us on Mastodon, Bluesky, X

CSSkit, a high-performance CSS toolchain written in Rust

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

Keith Cirkel’s project combines CSS parsing, minification, linting, formatting, transpilation, bundling, and analysis into one tool with zero configuration. It also includes LSP integration for IDE support. The project is inspired by oxc and is currently in alpha.

csskit.rs

You can also follow us on Mastodon, Bluesky, X

Folded corner with CSS

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

Kitty Giraudel breaks down a hover effect where an image corner appears to fold over. The technique layers clip-path for cropping, a white triangle for the fold, and shadow elements underneath. The article covers a workaround for blur effects using multiple offset elements and shows how CSS transitions enable smooth animation of the entire effect.

kittygiraudel.com/2026/03/05/folded-corner-with-css

You can also follow us on Mastodon, Bluesky, X

Abusing customizable selects

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

Patrick Brosset builds three creative demos with the new customizable <select> element: a curved stack of folders using CSS transformations and sibling-index(), a fanned deck of playing cards with anchor positioning, and a radial emoji picker using trigonometric functions. All demos maintain accessibility and degrade gracefully in unsupported browsers.

css-tricks.com/abusing-customizable-selects

You can also follow us on Mastodon, Bluesky, X

Temporal: the 9-year journey to fix time in JavaScript

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

Jason Williams traces how the Temporal proposal went from idea to Stage 4, replacing the legacy Date API inherited from Java in 1995. The article covers immutable objects, explicit timezone support, and nanosecond precision, along with temporal_rs, a shared Rust library that lets multiple engines collaborate on one implementation.

bloomberg.github.io/js-blog/post/temporal

You can also follow us on Mastodon, Bluesky, X

Introducing view-transitions-mock, a non-visual polyfill for same-document view transitions

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

Bramus Van Damme built a spec-compliant JavaScript implementation of the View Transition API that works across all browsers. It handles document.startViewTransition(), the ViewTransition class with its promises, and view transition types. Animations are skipped in unsupported browsers, but DOM updates work as expected.

bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions

You can also follow us on Mastodon, Bluesky, X

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