Sign in

Web Standards

@web-standards.dev
414 followers 0 following 240 posts

Daily web platform news by @pepelsbey.dev web-standards.dev

PostsRepliesMedia
Web Standards @web-standards.dev · 13h
Firefox 157 release notes for developers. at-rule() in @​supports, a chain value for overscroll-behavior, Animation.reverse() at playbackRate 0, plus flagged ML-KEM in Web Crypto and notification navigate. #firefox #browser developer.mozilla.or...
Screenshot of browser developer tools with the Inspector panel open on web-standards.dev, a large Firefox logo overlaid, and the text “Firefox 157”.
012
Web Standards @web-standards.dev · 29/09/2026
Improving site performance by shipping more CSS. In the GitHub blog, Josh Black and Marie Lucca on the multi-year move from CSS-in-JS to CSS Modules: 7,760 sx props removed, 55% less server-side rendering, and 25% faster component init. #css #performance github.blog/engineer...
Title “Improving site performance by shipping more CSS” and a green 3D cube with a white logo mark, on a background of green checkered squares.
020
Web Standards @web-standards.dev · 28/09/2026
What’s new in Chrome 154. The text-decoration-inset property trims or extends underlines, scroll-marker-group gains links and tabs modes for focus order and ARIA semantics, and Iterator.includes() checks whether an iterator yields a value. #chrome #browser developer.chrome.com...
Graphic with the text “New in Chrome” and the number 154, alongside the Chrome logo on a red grid background.
010
Web Standards @web-standards.dev · 25/09/2026
Browsers situationship: when browsers agree but the spec doesn’t. Rakhi explains why a spec sometimes moves toward browser behavior instead of the other way around, and how tests and Web compatibility bring them back to one result. #browser #interop www.atbrakhi.dev/blo...
Portrait photo of Rakhi Sharma, the Servo logo, title “Browsers Situationship: When Browsers Agree but the Spec Doesn’t”, and name “Rakhi Sharma”.
031
Web Standards @web-standards.dev · 24/09/2026
One SVG, nine posters: CSS link-parameters. Vadim Makeev passes colors into an external SVG with link-parameters and param(), while the file's own env() fallbacks keep it working everywhere else. Experimental in Firefox Nightly and Safari TP. #css #svg pepelsbey.dev/articl...
Nine Marilyn Monroe posters in different colors, a green logo, an SVG code block with env() fills, and title “One SVG, nine posters: CSS linked parameters”.
151
Web Standards @web-standards.dev · 23/09/2026
The root scroller and how not to lose it. Kilian Valkhof shows how an app shell with a fixed-height wrapper and overflow replaces the page's own scroll container, losing keyboard scrolling and pull-to-refresh, and what to use instead. #css #scroll polypane.app/blog/th...
Polypane logo, title “The root scroller and how not to lose it”, a person sliding down an arrow, and an app demo with a dialog “Try scrolling (or dragging) the page behind this dialog.”
011
Web Standards @web-standards.dev · 22/09/2026
Responsive iframes in Chrome 154. Sebastian Benz and Bramus introduce frame-sizing, a CSS property that sizes an <iframe> to its content, with a <meta> element opt-in and window.requestResize() for later updates. #html #css developer.chrome.com...
Chrome logo, an illustration of a scrollable embedded page, an HTML snippet with a responsive-embedded-sizing <meta> element, a frame-sizing CSS snippet, and title “Responsive iframes in Chrome 154”.
2328
Web Standards @web-standards.dev · 21/09/2026
Better icon and label alignment. Ahmad Shadeed lines an icon up with the first line of a wrapping label using the lh unit: half the difference between the line box and the icon size, applied as a translateY offset. #css #layout ishadeed.com/article...
Title “Better Icon and Label Alignment”, author’s photo, a demo with “Icon” and “Font size” sliders, two list items reading “How to align an icon to a label.”, and a CSS code block.
040
Web Standards @web-standards.dev · 18/09/2026
Sidenotes with CSS anchor positioning. Vincent Bernat pulls notes into the margin with anchor-name, position-anchor, and typed attr(), then uses max() with anchor() so a note lines up with its reference mark or drops below the previous one. #css #anchor vincent.bernat.ch/en...
Article text with sidenotes in the right margin, one reading “My PhD advisor told me this is unwise.”, an HTML snippet, and the title “Sidenotes with CSS anchor positioning” by Vincent Bernat.
002
Web Standards @web-standards.dev · 17/09/2026
Modern web types. Philip Walton published a drop-in replacement for TypeScript’s DOM types with a single-engine threshold, so the View Transition API, Long Animation Frame API, and fetchLater() stop showing up as errors. #tools #js philipwalton.com/art...
Title “Modern Web Types” next to a photo of Philip Walton, and code editors showing errors “Property 'startViewTransition' does not exist” and “Property 'scripts' does not exist”.
0171
Web Standards @web-standards.dev · 16/09/2026
WebKit features in Safari 27. Apple’s release notes list 83 new features and 844 fixes: customizable <select>, scroll anchoring, WebAssembly JSPI, ariaNotify(), :heading, revert-rule, stretch sizing, and import defer. #safari #css developer.apple.com/...
Safari Web Inspector Timelines view with Layout & Rendering, JavaScript & Events, CPU, and Memory graphs, overlaid by the Safari icon and the headline “WebKit Features for Safari 27”.
022
Web Standards @web-standards.dev · 15/09/2026
Firefox 156 release notes for developers. The Inspector resolves var(), attr(), and env() down to their source, scheduler.yield() keeps the task’s priority across synchronous awaits, and Promise.try() passes native promises through. #firefox #browser developer.mozilla.or...
Screenshot of browser developer tools with the Inspector panel open on web-standards.dev, a large Firefox logo overlaid, and the text “Firefox 156”.
031
Web Standards @web-standards.dev · 14/09/2026
The browser’s main thread is expensive. Sunhyoup Lee explains how to fit JavaScript, styles, layout, and events into 10 milliseconds per frame: split long tasks and yield, batch frequent events, or move work to the compositor or a Worker. #performance #js kciter.so/posts/the-...
A browser window with a huge loading spinner rolling over colorful blocks on a road, a cartoon avatar, and the title “The Browser's Main Thread Is Expensive” by Sunhyoup Lee.
0205
Web Standards @web-standards.dev · 11/09/2026
Make your logo brighter than white. Chris Bennett built a tool that turns a logo into a gain-map JPEG, so the colors you pick shine up to 7.5 times brighter than plain white on HDR screens and stay a normal JPEG everywhere else. #color #image www.soverybright.com/
Title “Make your logo brighter than white”, an upload area saying “Drop your logo here, or click to choose”, and two squares labelled “SDR white” and “HDR white +2.9 stops”.
1175
Web Standards @web-standards.dev · 10/09/2026
What’s new in Chrome 153. The <camera> and <microphone> elements request media capture declaratively, overflow: scroll clip makes a scroll container on one axis only, and Iterator.zip() aggregates several iterators at once. #chrome #browser developer.chrome.com...
Graphic with the text “New in Chrome” and the number 153, alongside the Chrome logo on a blue grid background.
010
Web Standards @web-standards.dev · 09/09/2026
You don’t need initial-scale in your HTML. Vale and ppk 🇪🇺 published the same finding hours apart: the <meta name="viewport"> element only needs width=device-width, and Safari no longer needs the hint. #html #browser vale.rocks/micros/20... quirksmode.org/quirk...
A meta name=viewport snippet with initial-scale=1 underlined in red, over two article pages titled “initial-scale no longer needed” and “You don’t need initial-scale in your HTML”.
082
Web Standards @web-standards.dev · 08/09/2026
Container style queries and advanced attr(): rethinking how to wire up components in CSS. Brecht De Ruyte casts attributes like data-gap="2" into typed CSS values and lets @​container style() queries rescale a whole card from one variable. #css #component utilitybend.com/blog...
Utilitybend logo, the author’s photo, three dark cards for Irondude, Solarrae, and Aethergal, and title “Container style queries and advanced attr(): rethinking how to wire up my components in CSS”.
022
Web Standards @web-standards.dev · 07/09/2026
Submit your proposals for Interop 2027. The call is open until September 23rd. A proposal needs a stable specification and Web Platform Tests that run automatically in all four browsers, plus evidence that developers hit the problem. #interop #wpt github.com/web-platf...
Title “Submit your proposals for Interop 2027”, illustrations of a browser window and a phone with code, and four zero scores under the Chrome, Edge, Firefox, and Safari logos.
041
Web Standards @web-standards.dev · 04/09/2026
Fine, I'll build my own text editor! @dbushell.com compares canvas, contenteditable with plaintext-only, and a plain <textarea> for building an editor in the browser, and finds the humble <textarea> the fastest of the three. #html #performance dbushell.com/2026/09...
Title “Fine, I’ll build my own text editor!”, the name “David Bushell”, and an editor window with 13 numbered lines of syntax-highlighted HTML.
020
Web Standards @web-standards.dev · 03/09/2026
Feature detecting undetectable CSS features with @​supports named-feature(). Bramus explains the new function that checks what @​supports can’t reach, like whether gap actually works in a flex container and not just parses. #css #interop www.bram.us/2026/08/...
Title “Feature Detecting “Undetectable” CSS Features with @supports named-feature()”, a star icon, the author speaking on stage, and two feature-detection.css code snippets.
011
Web Standards @web-standards.dev · 02/09/2026
Firefox 155 release notes for developers. This expands attr() to any CSS property, adds the progress() and alpha() functions, renames font-stretch to font-width, and brings Promise.allKeyed(). Scroll-driven animations are behind a flag. #firefox #browser developer.mozilla.or...
Screenshot of browser developer tools with the Inspector panel open on web-standards.dev, a large Firefox logo overlaid, and the text “Firefox 155”.
021
Web Standards @web-standards.dev · 01/09/2026
Getting agents to write better CSS. Brecht De Ruyte pairs Google’s Modern Web Guidance, which feeds Baseline-aware platform guidance into coding agents, with three skills of his own for token tiers, theming, and component states. #ai #css utilitybend.com/blog...
Title “Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS” and three cards: “Modern web guidance”, “Your project skills”, “human review”.
040
Web Standards @web-standards.dev · 31/08/2026
Highlighting a range of text inside a form field. Ollie Williams shows how OpaqueRange brings the CSS Custom Highlight API to form controls: call createValueRange() and style the result with ::highlight(). Chromium 152 only for now. #chrome #js olliewilliams.xyz/bl...
Title “Using the OpaqueRange API with the CSS Custom Highlight API” with parts of it highlighted in pink and green, the author’s photo, three code blocks, and “olliewilliams.xyz”.
063
Web Standards @web-standards.dev · 28/08/2026
Making a long list fast: content-visibility vs. virtualization. Agustin Barrientos shows that content-visibility: auto keeps rows in the DOM and skips offscreen work, while virtualization unmounts them, losing find-in-page and focus. #performance #css agustinbarrientos.co...
Title “Making a Long List Fast: content-visibility vs. Virtualization”, an illustration of a scrollable list of cards with icons and a scrollbar, and a person at a laptop.
000
Web Standards @web-standards.dev · 27/08/2026
What’s new in Chrome 152. CSSPseudoElement now covers ::backdrop, ::scroll-marker, and ::view-transition, the CPU Performance API reports the performance tier of a device, and the Connection-Allowlist header restricts outgoing requests. #chrome #browser developer.chrome.com...
Graphic with the text “New in Chrome” and the number 152, alongside the Chrome logo on a green grid background.
010
Web Standards @web-standards.dev · 26/08/2026
Balancing flex items with flex-wrap: balance. Ahmad Shadeed shows five ways to avoid a lone item on the last flex line, from container queries to display: contents, and finally flex-wrap: balance from Chrome 150, which needs one declaration. #css #layout ishadeed.com/article...
Title “Balancing flex items with flex-wrap: balance”, date “Aug 25, 2026”, author’s photo, a panel “Connect your favorite accounts” with social network icons, and a CSS code block.
040
Web Standards @web-standards.dev · 25/08/2026
Intent to ship: JPEG XL. Jake Archibald explains that Firefox is shipping JPEG XL built on jxl-rs, the Rust decoder from Google Research. AVIF still wins on photos, but JPEG XL is better at lossless and progressive rendering. #image #firefox hacks.mozilla.org/20...
Photo of a fox curled up in grass, split into four strips labeled “4%”, “15%”, “50%”, “100%”, each sharper than the last, with the Firefox logo and the title “Intent to Ship JPEG XL”.
093
Web Standards @web-standards.dev · 24/08/2026
A look at the <geolocation> HTML element and how it works. @dxnny.fun explains the Chrome 144 element that replaces the Geolocation API with markup: autolocate, watch, onlocation, a :granted pseudo-class, and rules against clickjacking. #html #chrome piccalil.li/blog/a-l...
Author’s photo and the title “A look at the geolocation HTML element and how it works” above a code snippet with a <geolocation> element and a fallback button.
021
Web Standards @web-standards.dev · 21/08/2026
My HTML boilerplate in 2026. @matuzo.at explains every line of his <head>, including the new additions: the text-scale meta tag, dark mode SVG favicons, a markdown alternate link, and fediverse:creator. #html #learn www.matuzo.at/blog/2...
Author’s photo, name “Matuzović”, tagline “Front-end / A11y / HTML / CSS”, title “My HTML boilerplate in 2026”, a code snippet, and labels “required”, “optional”, “essential”.
0104
Web Standards @web-standards.dev · 20/08/2026
A field guide to the Chrome DevTools Performance panel. Joan León explains it with interactive figures: the colors, network request bars, flame chart depth and self time, the four LCP phases, CLS, and INP. #performance #devtools perf.reviews/profile...
Label “Chrome DevTools. Performance Panel”, title “Reading a performance profile”, subtitle “An interactive field guide to the waterfall, flame chart, LCP, CLS, INP, and the Insights panel”.
041
Web Standards @web-standards.dev · 19/08/2026
The case for tri-state dark mode toggles. Bramus replies to @lea.verou.me: when the OS switches by the clock, a two-state toggle flips a daytime choice for light to dark at night. Tri-state is clearer. #design #color www.bram.us/2026/08/...
Title “The Case for Tri-State Dark Mode Toggles”, the author’s photo, a pill control with sun, monitor, and moon icons with the monitor selected, and three two-state sun and moon controls: sun highlighted, nothing highlighted, and moon highlighted on dark.
130
Web Standards @web-standards.dev · 18/08/2026
Firefox 154 release notes for developers. This adds the sibling-count() and sibling-index() CSS functions, text-box-trim, and the Iterator methods includes(), join(), chunks(), and windows(). Plus unprefixed line-clamp behind a flag. #firefox #browser developer.mozilla.or...
Screenshot of browser developer tools with the Inspector panel open on web-standards.dev, a large Firefox logo overlaid, and the text “Firefox 154”.
0113
Web Standards @web-standards.dev · 17/08/2026
Can emails include dark and light mode themes? Matthew Guay explains that @​media (prefers-color-scheme) works in about 42% of email clients, mostly Apple Mail, while Gmail, Outlook on Windows, and Yahoo Mail invert colors or ignore dark mode. #email #css buttondown.com/blog/...
Title “Ask a Nerd: Can emails include dark and light mode themes?”, author’s photo, name Matthew Guay, date August 14, 2026, and a stage spotlight beam shining through darkness.
162
Web Standards @web-standards.dev · 14/08/2026
Progressive Web Apps mostly rock. Martin Grubinger weighs the wins, like URLs, the back button, and instant updates, against what still hurts: iOS install flows, unpredictable install prompts, and missing platform capabilities. #pwa #browser grooovinger.com/note...
Author’s photo, name grooovinger, title “Progressive Web Apps – mostly – rock”, section names: “Install experience”, “URLs, baby!”, “Back Button”, “Instant updates”, “Conclusion”.
0126
Web Standards @web-standards.dev · 13/08/2026
Five best practices for preventing chaos in Tailwind CSS. Nina Torgunakova shows how semantic design tokens, fewer utility classes, automated class ordering, and predefined component variants keep a growing project readable. #css #tools evilmartians.com/chr...
Evil Martians logo, title “5 best practices for preventing chaos in Tailwind CSS”, tags Blog Post, Frontend, Tailwind CSS, and a green alien surfing a wave on a surfboard.
180
Web Standards @web-standards.dev · 12/08/2026
How Baseline can help you ship less JavaScript. Jad Joubran walks through five dependency clusters where the platform replaces npm packages: Intl instead of timeago.js, fetch instead of axios, <dialog> instead of modal libraries. #baseline #js www.smashingmagazine...
New on Smashing Magazine: “How Baseline Can Help You Ship Less JavaScript”, tagged JavaScript, Coding, Techniques, written by Jad Joubran, beside a running red cat and a bird.
0157
Web Standards @web-standards.dev · 11/08/2026
Source maps or not? James and Alexander Lichter explain when npm packages should ship source maps. They only pay off when the published code is lossy, like minified output. Otherwise, ship readable, unminified code instead. #npm #performance e18e.dev/blog/source...
e18e.dev / blog with the title “Source maps or not?”, subtitle “Source maps are great for debugging, but should we be shipping them in production?”, by James Garbutt & Alex Lichter, July 30, 2026.
020
Web Standards @web-standards.dev · 10/08/2026
State of CSS 2026 survey results. Sacha Greif and Devographics polled 4,902 developers, and anchor positioning came out as the year’s favorite new feature, topping both the wish list and the browser support complaints. #css #survey 2026.stateofcss.com/...
“State of CSS 2026” logo with sections Features, Pain Points, Other Tools, CSS Usage, Resources, Demographics, Awards, Conclusion, and a chart: Grid 31%, Browser vendor issues 17%, Flexbox 16%.
033
Web Standards @web-standards.dev · 07/08/2026
Dark mode toggles: two states are enough. @lea.verou.me argues the three-state light, dark, and system control is implementation-driven, since people switch themes only when the current one feels wrong. Keep three states under the hood, show two. #design #css lea.verou.me/blog/20...
Title “Dark mode toggles: two states are enough” by Lea Verou, PhD, beside four browser mockups with “System appearance” sun and moon toggles, shown in light and dark themes.
052
Web Standards @web-standards.dev · 06/08/2026
Styling the navigation: declarative route and navigation matching in CSS. Bramus walks through a CSS proposal to style navigation declaratively, with @​route, @​navigation, :nav-source, and :link-to() replacing JavaScript wiring. #css #router www.bram.us/2026/07/...
Title “Styling the Navigation: Declarative Route and Navigation Matching in CSS”, clay monster cards labeled “Zorp” and “Fluffy” with a hand cursor, and a @navigation code snippet.
052
Web Standards @web-standards.dev · 05/08/2026
3D CSS guide: perspective, preserve-3d and translateZ. Carmen Ansio walks through real 3D scenes with perspective, perspective-origin, preserve-3d, cuboids, and translateZ, rotateX/Y/Z, scale3d, and matrix3d. All six are Baseline. #css #3d www.carmenansio.com/...
Title “3D CSS, from Super Mario Bros 3 to Mario 64” with axis, angle, translateZ, and scale sliders beside an isometric 3D scene of green and brown blocks, coins, and a star cube.
051
Web Standards @web-standards.dev · 04/08/2026
Liquid Glass 2.0 in CSS (Aqua’s revenge). Jared White recreates Apple’s refined Liquid Aqua in pure CSS with dark borders, vertical gradients, @​property variables, and ontouchstart for touch, warning not to trade readability for shine. #css #design thathtml.blog/2026/0...
Title “Liquid Glass 2.0 in CSS (Aqua’s Revenge)”, a CSS @property snippet, and five glass buttons reading “It’s Aqua, Yet Refined” with star and check icons over different backgrounds.
0151
Web Standards @web-standards.dev · 03/08/2026
CSS infinity use cases. @nerdy.dev shows what calc(infinity * 1px) and -infinity can do: perfect circles and pills, maxed-out z-index, frozen animations for DevTools, floor-free clamp(), boolean logic, and scroll-driven ranges. #css #animation nerdy.dev/css-infini...
Title “CSS Infinity & Beyond” with the skull logo and “CSS Infinity Use Cases” below, beside Buzz Lightyear flying with his wings extended.
020
Web Standards @web-standards.dev · 31/07/2026
Cheatsheets for flex, grid, anchor positioning and invoker commands. Kilian Valkhof shares four CSS references he made after forgetting anchor positioning and grid-area syntax. Free as PDF and PNG in print-ready A5. #css #learn polypane.app/blog/ch...
Title “Cheatsheets for flex, grid, anchor positioning and invoker commands” and four overlapping Polypane cheatsheet cards: CSS Flexbox, CSS Grid, Anchor Positioning, and Invoker Commands.
0134
Web Standards @web-standards.dev · 30/07/2026
The secure way to release an npm package in 2026. Andrey Sitnik frames it as raising attackers’ costs: npm Trusted and Staged Publishing, org-wide 2FA, CI actions pinned to SHA, and a 3-day dependency cooldown. #npm #security evilmartians.com/chr...
Evil Martians logo and the title “The secure way to release an npm package in 2026” beside a startled green Martian and an npm box with a jack-in-the-box smiley on a spring.
053
Web Standards @web-standards.dev · 29/07/2026
What’s new in Chrome 151. The <usermedia> element manages camera and microphone access, shadowrootslotassignment enables manual slot assignment in HTML, and soft-navigation and interaction-contentful-paint entries measure SPA performance. #chrome #browser developer.chrome.com...
Graphic with the text “New in Chrome” and the number 151, alongside the Chrome logo on a yellow grid background.
010
Web Standards @web-standards.dev · 28/07/2026
WebKit features for Safari 26.6. Jen Simmons covers a new compileOptions parameter for JS String Builtins in WebAssembly streaming compilation, plus eight bug fixes across CSS, networking, service workers, and WebRTC. #safari #wasm webkit.org/blog/1817...
Safari Web Inspector Timelines view with Layout & Rendering, JavaScript & Events, CPU, and Memory graphs, overlaid by the Safari icon and the headline “WebKit Features for Safari 26.6”.
041
Web Standards @web-standards.dev · 27/07/2026
Cross-Origin Storage API: stop downloading twice. @morello.dev explains a proposed standard that stores large files by their SHA-256 hash, so origins share one device cache instead of downloading duplicates. #performance #browser morello.dev/blog/cro...
“Cross-Origin Storage” title with the subtitle “Share one copy of a file across origins” above a code editor window and the name Dennis Morello.
273
Web Standards @web-standards.dev · 24/07/2026
Building an accessible modal dialog on the native <dialog>. Agustin Barrientos uses showModal() for free focus trapping and Escape handling, wraps it in a Lit component, and animates it with the :open pseudo-class and @​starting-style. #dialog #a11y agustinbarrientos.co...
“Building an accessible modal dialog on the native <dialog>” title above a modal “Delete account?” with the text “This permanently removes your account and data. This cannot be undone.” and buttons.
010
Web Standards @web-standards.dev · 23/07/2026
Rebuilding FIFA standings layout with CSS subgrid. Ahmad Shadeed rebuilds the World Cup bracket with a cleaner DOM: CSS Grid sets the tracks, subgrid lets nested matches inherit them, and negative grid lines keep positioning flexible. #css #layout ishadeed.com/article...
Rebuilding FIFA Standings Layout with CSS Subgrid title above a tournament bracket of country flags and a photo of the author, beside a CSS code block using subgrid.
020