Web Standards

Daily web platform news by @pepelsbey

Web Standardswebstandards_dev
2026-03-17

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. 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-transi

“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.
Web Standardswebstandards_dev
2026-03-16

Un-Sass’ing my CSS: native CSS nesting. @sturobson 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/UnS

“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.
Web Standardswebstandards_dev
2026-03-13

You don’t know HTML tables. @paceaux 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/

“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.
Web Standardswebstandards_dev
2026-03-12

What’s new in Chrome 146. 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-n

Graphic with the text “New in Chrome” and the number 146, alongside the Chrome logo on a red grid background.
Web Standardswebstandards_dev
2026-03-11

Everything you never wanted to know about visually-hidden. @db 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/visual

“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.
Web Standardswebstandards_dev
2026-03-10

SVGs on the web: performance comparison based on how you load them. @nucliweb 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-optimizati

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.
Web Standardswebstandards_dev
2026-03-09

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 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

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

The too early breakpoint. @shadeed9 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

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

A new meta tag for respecting text scaling on mobile. @matuzo 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

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.
Web Standardswebstandards_dev
2026-03-04

Dictionary compression is finally here, and it’s ridiculously good. @pimterry 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/dictionar

“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.
Web Standardswebstandards_dev
2026-03-03

Define the theme color for Safari 26. @grooovinger 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-

“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.
Web Standardswebstandards_dev
2026-03-02

Native random values in CSS. @alvaromontoro 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/n

“Native Random Values in CSS” title with author’s photo and a pile of colorful dice.
Web Standardswebstandards_dev
2026-02-27

Making WebAssembly a first-class language on the Web. @ryan 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/maki

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

Practical guide to the <img> element: from basics to LCP. @nucliweb 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-

“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.
Web Standardswebstandards_dev
2026-02-25

Firefox 148 release notes for developers. 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/do

Screenshot of browser developer tools with a large Firefox logo overlaid and the text “Firefox 148”.
Web Standardswebstandards_dev
2026-02-24

Sprites on the web. @joshwcomeau 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/spri

Josh Comeau logo and Sprites on the Web title, with a cartoon person and a row of trophy sprites. CSS and an img tag code snippet on the right.
Web Standardswebstandards_dev
2026-02-23

An in-depth guide to customizing lists with CSS. @Richr 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-g

Author’s photo beside the headline “An in-depth guide to customising lists with CSS”, the name Richard Rutter, code snippets, and Piccalilli logo.
Web Standardswebstandards_dev
2026-02-20

Border-shape: the future of the non-rectangular web. @Una 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/

Speech bubble with “border-shape: the future of the non-rectangular web” above a row of pieces: pentagon, hexagon, square, triangle, circle, star, trapezoid.
Web Standardswebstandards_dev
2026-02-19

Accessible building blocks for web. 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=PLTq

TetraLogical logo above headline “Accessible building blocks for web” over an abstract network of connected circles.
Web Standardswebstandards_dev
2026-02-18

Declarative dialog menu with invoker commands. @db shows a hamburger menu powered by native <dialog> and the new Invoker Command API, with a tiny JS fallback for older browsers. Plus, notes on a WebKit :focus-visible quirk, closedby="any", and view transitions.

dbushell.com/2026/02/12/declar

“Declarative Dialog Menu with Invoker Commands” title above HTML and JavaScript code snippets, with an open menu showing “Close” button and menu items: Home, Services, About, Blog, Notes, Contact.

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst