Web Standards

@webstandards_dev
201 Followers
0 Following
112 Posts
Daily web platform news by @pepelsbey
websitehttps://web-standards.dev

The great CSS expansion. @pawellaptew 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. #css #performance

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

Squarespace and web standards: how we helped bring HTML video and audio lazy loading to today’s browsers. @scottjehl 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. #html #performance

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

Native JSON modules are finally real. 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. #json #js

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

Form-associated custom elements in practice. 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. #webcomponents #html

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

CSS is DOOMed: rendering DOOM in 3D with CSS. @html5test 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. #css #3d

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

The Layout Maestro, a practical CSS course on building web layouts. @shadeed9’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. #css #learn

https://thelayoutmaestro.com

Under the hood: a closer look at the CSS architecture behind the redesign. @utilitybend 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. #css #design

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

WebKit features for Safari 26.4. @jensimmons 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. #safari

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

Firefox 149 release notes for developers. 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(). #firefox #browser

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

CSSkit, a high-performance CSS toolchain written in Rust. @keithamus’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. #css #tools

https://csskit.rs