Trending

Latest Posts by Web Standards

Graphic with the text “New in Chrome” and the number 147, alongside the Chrome logo on a yellow grid background.

Graphic with the text “New in Chrome” and the number 147, alongside the Chrome logo on a yellow grid background.

What’s new in Chrome 147. Element-scoped view transitions, CSS contrast-color(), border-shape for non-rectangular borders, Math.sumPrecise, CSSPseudoElement interface, local network access restrictions, and Rust-based XML parsing. #chrome #browser

developer.chrome.com...

1 hour ago 0 0 0 0
Article title, Cloud Four logo, a closed door with “meh” on a gray wall, and through an opening a colorful landscape with trees, mountains, a lake, and a deer.

Article title, Cloud Four logo, a closed door with “meh” on a gray wall, and through an opening a colorful landscape with trees, mountains, a lake, and a deer.

Getting your article shared: tips from ten years of newsletter curation. @spaceninja.com’s practical guide: add OG tags, use a sharing image, write clear titles, include a blurb, fix canonical URLs, and date your posts. #html #learn

cloudfour.com/thinks...

1 day ago 1 0 0 0
“What Is CSS Containment and How Can I Use It?” title, author’s photo, and OpenTable mobile site with DevTools showing contain: strict.

“What Is CSS Containment and How Can I Use It?” title, author’s photo, and OpenTable mobile site with DevTools showing contain: strict.

What is CSS containment and how can I use it? Harry Roberts covers each contain value, the content and strict shorthands, and content-visibility. Includes a real OpenTable case where containment cut layout time sixfold. #css #performance

csswizardry.com/2026...

2 days ago 1 2 0 0
“The Great CSS Expansion” on turquoise background. Large purple CSS logo tilted over a small yellow JS logo. GitButler logo in the top left.

“The Great CSS Expansion” on turquoise background. Large purple CSS logo tilted over a small yellow JS logo. GitButler logo in the top left.

The great CSS expansion. Pavel Laptev tours CSS features replacing JavaScript libraries like Floating UI, Radix, GSAP, and React Select, cutting up to 322 kB of JavaScript. #css #performance

blog.gitbutler.com/t...

5 days ago 14 4 0 1
“How We Helped Bring HTML Video & Audio Lazy Loading to Today’s Browsers” next to HTML Living Standard page dated 23 March 2026 with the loading attribute spec.

“How We Helped Bring HTML Video & Audio Lazy Loading to Today’s Browsers” next to HTML Living Standard page dated 23 March 2026 with the loading attribute spec.

Squarespace and web standards: how we helped bring HTML video and audio lazy loading to today’s browsers. Scott Jehl describes how the team proposed loading="lazy" for video and audio, making it an official web standard. #html #performance

engineering.squaresp...

6 days ago 11 4 0 0
“Native JSON modules are finally real” title, author photo, code snippets with JSON and CSS import attributes. Matt Smith, Modern Web Engineering.

“Native JSON modules are finally real” title, author photo, code snippets with JSON and CSS import attributes. Matt Smith, Modern Web Engineering.

Native JSON modules are finally real. Matt Smith explains how import attributes let you load JSON directly in browsers and runtimes with import data from 'data.json' with { type: 'json' }, no bundler needed. #json #js

allthingssmitty.com/...

1 week ago 1 1 0 0
“Form-Associated Custom Elements in Practice” title, Frontend Masters logo, a contact form with custom element tags like ag-input and ag-button.

“Form-Associated Custom Elements in Practice” title, Frontend Masters logo, a contact form with custom element tags like ag-input and ag-button.

Form-associated custom elements in practice. Rob Levin retrofits AgnosticUI with ElementInternals, covering two validation strategies and practical patterns for input, radio, and combobox components in Shadow DOM. #webcomponents #html

frontendmasters.com/...

1 week ago 2 1 0 0
DOOM game scene with CSS text above the classic DOOM logo, HUD showing 50 ammo, 100% health, 0% armor.

DOOM game scene with CSS text above the classic DOOM logo, HUD showing 50 ammo, 100% health, 0% armor.

CSS is DOOMed: rendering DOOM in 3D with CSS. Niels Leenheer renders the classic game entirely with CSS transforms and divs in 3D space, using trig functions, @​property, and SVG filters. #css #3d

nielsleenheer.com/ar...

1 week ago 3 1 0 0
Photo of a tablet on a desk with LEGO bricks, pens, and a coffee cup. The screen shows "The Layout Maestro" with a purple grid logo.

Photo of a tablet on a desk with LEGO bricks, pens, and a coffee cup. The screen shows "The Layout Maestro" with a purple grid logo.

The Layout Maestro, a practical CSS course on building web layouts. Ahmad Shadeed’s course covers Flexbox, Grid, container queries, and :has() through visual lessons and interactive demos. #css #learn

thelayoutmaestro.com

1 week ago 1 1 0 0
Advertisement
“Under the hood: a closer look at the CSS architecture behind the redesign” title next to a folder tree icon with a v3.0 badge, utilitybend logo above.

“Under the hood: a closer look at the CSS architecture behind the redesign” title next to a folder tree icon with a v3.0 badge, utilitybend logo above.

Under the hood: a closer look at the CSS architecture behind the redesign. Brecht De Ruyte covers cascade layers, design tokens, light-dark(), container queries, and progressive enhancement via @​supports. #css #design

utilitybend.com/blog...

1 week ago 3 2 0 0
Safari Web Inspector timelines view with CPU and Memory graphs, overlaid by Safari icon and the headline “WebKit Features for Safari 26.4”.

Safari Web Inspector timelines view with CPU and Memory graphs, overlaid by Safari icon and the headline “WebKit Features for Safari 26.4”.

WebKit features for Safari 26.4. Jen Simmons introduces new features, including grid lanes for masonry layouts, WebTransport for low-latency communication, and the Keyboard Lock API. Plus name-only container queries, threaded scroll-driven animations, and more.

webkit.org/blog/1786...

2 weeks ago 1 0 0 0
Screenshot of browser developer tools with a large Firefox logo overlaid and the text “Firefox 149”.

Screenshot of browser developer tools with a large Firefox logo overlaid and the text “Firefox 149”.

Firefox 149 release notes for developers. Popover hint value, CloseWatcher, shape-outside xywh(), vertical-align as a shorthand, optional @​container conditions, and captureStream(). #firefox #browser

developer.mozilla.or...

2 weeks ago 3 1 0 0
CSSkit logo surrounded by labels: Format, Lint, Transpile, Bundle, Minify, and Analyze.

CSSkit logo surrounded by labels: Format, Lint, Transpile, Bundle, Minify, and Analyze.

CSSkit, a high-performance CSS toolchain written in Rust. Keith Cirkel’s project combines parsing, minification, linting, formatting, and LSP integration into one zero-config tool inspired by oxc. #css #tools

https://csskit.rs

2 weeks ago 19 8 0 0
“Folded corner with CSS” title, a cat photo with a folded corner effect, and CSS code with .ImageContainer shadow and clip-path properties.

“Folded corner with CSS” title, a cat photo with a folded corner effect, and CSS code with .ImageContainer shadow and clip-path properties.

Folded corner with CSS. Kitty Giraudel breaks down a hover effect where an image corner folds over using clip-path, a white triangle, and shadow elements. Plus CSS transitions for smooth animation. #css #animation

kittygiraudel.com/20...

2 weeks ago 2 1 0 1
“Abusing Customizable Selects” by Patrick Brosset on CSS-Tricks, with a curved stack of labeled folder icons on a purple-pink gradient.

“Abusing Customizable Selects” by Patrick Brosset on CSS-Tricks, with a curved stack of labeled folder icons on a purple-pink gradient.

Abusing customizable selects. Patrick Brosset builds three creative demos with the new <select>: a curved folder stack, a fanned card deck with anchor positioning, and a radial emoji picker with CSS trigonometric functions. #css #html

css-tricks.com/abusi...

2 weeks ago 4 1 0 0
“Temporal: The 9-Year Journey to Fix Time in JavaScript” title, {Bloomberg JS Blog} logo, Temporal.PlainDate code snippet, and JS logo.

“Temporal: The 9-Year Journey to Fix Time in JavaScript” title, {Bloomberg JS Blog} logo, Temporal.PlainDate code snippet, and JS logo.

Temporal: the 9-year journey to fix time in JavaScript. Jason Williams traces the path from proposal to Stage 4, covering immutable objects, timezone support, nanosecond precision, and a shared Rust implementation across engines. #ecmascript #temporal

bloomberg.github.io/...

3 weeks ago 2 0 0 0
“View Transitions Mock” diagram comparing native implementation with view-transitions-mock from state A to state B, where four visual steps are crossed out with red X marks.

“View Transitions Mock” diagram comparing native implementation with view-transitions-mock from state A to state B, where four visual steps are crossed out with red X marks.

Introducing view-transitions-mock, a non-visual polyfill for same-document view transitions. Bramus built a spec-compliant JavaScript implementation of the View Transition API that works across all browsers. #viewtransition #polyfill

www.bram.us/2026/03/...

3 weeks ago 4 1 0 0
“Un-Sass’ing My CSS: Native CSS Nesting” title, author’s photo, Sass code with $spacing variable and .card mixin on the left, native CSS with custom property and @media query on the right.

“Un-Sass’ing My CSS: Native CSS Nesting” title, author’s photo, Sass code with $spacing variable and .card mixin on the left, native CSS with custom property and @media query on the right.

Un-Sass’ing my CSS: native CSS nesting. Stuart Robson walks through how native CSS nesting works in modern browsers and compares it to Sass: specificity, the & symbol, practical differences, and component examples, including alerts, cards, and search forms. #css #learn

www.alwaystwisted.co...

3 weeks ago 1 1 0 0
“You Don’t Know HTML...” title, letters T, A, B, L, E, S in table cells, Frank M Taylor in a cell, a Germanic languages table, and a BetterTable class code snippet.

“You Don’t Know HTML...” title, letters T, A, B, L, E, S in table cells, Frank M Taylor in a cell, a Germanic languages table, and a BetterTable class code snippet.

You don’t know HTML tables. @paceaux.com 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. #html #a11y

blog.frankmtaylor.co...

3 weeks ago 6 2 0 0
Advertisement
Graphic with the text “New in Chrome” and the number 146, alongside the Chrome logo on a red grid background.

Graphic with the text “New in Chrome” and the number 146, alongside the Chrome logo on a red grid background.

What’s new in Chrome 146. Scroll-triggered CSS animations, Sanitizer API for XSS protection, WebGPU compatibility mode, Iterator.concat, text scaling meta element, and improved LCP metrics. #chrome #browser

developer.chrome.com...

3 weeks ago 2 0 0 0
“Everything you never wanted to know about visually-hidden” title and four CSS snippets: .visually-hidden with 11 properties, and three minimal alternatives with 2–3 properties each.

“Everything you never wanted to know about visually-hidden” title and four CSS snippets: .visually-hidden with 11 properties, and three minimal alternatives with 2–3 properties each.

Everything you never wanted to know about visually-hidden. @dbushell.com traces the history of the pattern, tests a minimal CSS approach, and explains why the platform still lacks a native alternative. #a11y #css

dbushell.com/2026/02...

4 weeks ago 13 8 1 0
Title “SVGs on the web: performance comparison based on how you load them”, author Joan León, code snippets, and a table comparing five SVG loading methods.

Title “SVGs on the web: performance comparison based on how you load them”, author Joan León, code snippets, and a table comparing five SVG loading methods.

SVGs on the web: performance comparison based on how you load them. Joan León compares inline <svg>, <img>, <object>, CSS background, and sprites with <use> for their caching, request count, and rendering trade-offs. #svg #performance

joanleon.dev/en/svg-...

4 weeks ago 8 2 1 0
“Introducing CodePen 2.0 Beta” text, pixel-art “2.0” sign, and 3D blocks with Markdown, Vue, and other technology logos.

“Introducing CodePen 2.0 Beta” text, pixel-art “2.0” sign, and 3D blocks with Markdown, Vue, and other technology logos.

The new CodePen 2.0 is now in public beta. Pens now have their own file system with folders, a new block-based build process without config, real-time collaboration by invite, an omnibar for quick access to files and commands, and privacy controls. #tools #css

https://codepen.io/beta

4 weeks ago 14 3 0 0
“The Too Early Breakpoint” title with author’s photo and a breakpoint diagram showing layout changes at Default, ≥ 220px, ≥ 350px, ≥ 480px, and ≥ 620px.

“The Too Early Breakpoint” title with author’s photo and a breakpoint diagram showing layout changes at Default, ≥ 220px, ≥ 350px, ≥ 480px, and ≥ 620px.

The too early breakpoint. Ahmad Shadeed shows why many sites switch to mobile layout too soon, breaking designs in split-screen and tablet views. The fix: container queries and flexible CSS layouts. #css #layout

ishadeed.com/article...

1 month ago 3 0 0 0
Author’s photo with HTML terms div, role, span around it, HTMHell logo, and “A new meta tag for respecting text scaling on mobile” title.

Author’s photo with HTML terms div, role, span around it, HTMHell logo, and “A new meta tag for respecting text scaling on mobile” title.

A new meta tag for respecting text scaling on mobile. @matuzo.at shows how the proposed <meta name="textscale"> element lets websites honor OS text size settings in mobile Chrome. Units like em and rem scale, pixel values stay fixed. Only in Canary so far. #html #a11y

youtu.be/XVIgKEOVfVg

1 month ago 4 1 1 0
“Dictionary Compression is finally here, and it’s ridiculously good” title, HTTP and Performance tags, and a close-up of a dictionary page with the “technology” entry.

“Dictionary Compression is finally here, and it’s ridiculously good” title, HTTP and Performance tags, and a close-up of a dictionary page with the “technology” entry.

Dictionary compression is finally here, and it’s ridiculously good. Tim Perry shows how Compression Dictionary Transport can shrink JS bundles up to 90% for returning users. Already used by Google, Shopify, and Pinterest in production. #performance #http

httptoolkit.com/blog...

1 month ago 8 1 0 1
Advertisement
“Define the Theme Color for Safari 26” title, author’s photo, three Safari windows showing The Verge with dark chrome, Piccalilli with white and red chrome, DevTools with background: red.

“Define the Theme Color for Safari 26” title, author’s photo, three Safari windows showing The Verge with dark chrome, Piccalilli with white and red chrome, DevTools with background: red.

Define the theme color for Safari 26. Martin Grubinger shows how to work around the dropped <meta name="theme-color"> with scroll-driven animations and a hidden fixed element that sets the browser chrome color. #safari #css

grooovinger.com/note...

1 month ago 0 0 0 0
“Native Random Values in CSS” title with author’s photo and a pile of colorful dice.

“Native Random Values in CSS” title with author’s photo and a pile of colorful dice.

Native random values in CSS. Álvaro Montoro explores random() and random-item(), two new CSS functions. random() returns a value within a range, random-item() picks from a list. Both support sharing to correlate results. Only Safari 26.2 so far. #css #safari

alvaromontoro.com/bl...

1 month ago 1 1 0 0
“Making WebAssembly a first-class language on the Web” headline, Mozilla Hacks logo, and a code snippet with import image from image-lib.wasm.

“Making WebAssembly a first-class language on the Web” headline, Mozilla Hacks logo, and a code snippet with import image from image-lib.wasm.

Making WebAssembly a first-class language on the Web. Ryan Hunt says JS-only loading and Web API glue code hurt DX, and the Component Model could add direct bindings and easier imports. #webassembly #firefox

hacks.mozilla.org/2026/02/maki...

1 month ago 1 1 0 0
“Practical guide to the img element: from the basics to LCP” title, author’s name Joan León, code snippets, table of contents, and hashtags: images, webperf, core-web-vitals, html.

“Practical guide to the img element: from the basics to LCP” title, author’s name Joan León, code snippets, table of contents, and hashtags: images, webperf, core-web-vitals, html.

Practical guide to the <img> element: from basics to LCP. @nucliweb.net shows how srcset, sizes, modern formats AVIF and WebP via <picture>, fetchpriority, preload for the LCP image, and CDNs can improve Core Web Vitals. #performance #html

joanleon.dev/en/guia-prac...

1 month ago 14 4 0 0