mailwal

Ten CSS features worth voting for

Frontend Focus
Plus Safari blocks post-cookie trackers, JPEG XL vs AVIF, and the State of HTML survey returns.
Together with
🚀 Frontend Focus

#763 — October 21, 2026 | Read on the web

Everyone's Interop 2027 Wishlists

Last week we shared that you can now rank the Interop web platform proposals for 2027. Since then, plenty of folks have shared their own rankings and explained their choices:

Inspired to submit your own? Rank about ten proposals you'd like to see prioritized. The Firefox team says that's enough to provide useful input.

Would You Let Your AI Agent Grade Its Own Homework? — Agents write code faster than ever. They even review their own work. But who’s reviewing them? Dropbox, Notion & ElevenLabs don’t take the risk. With Meticulous, every change is exhaustively verified, with zero developer effort.

Meticulous sponsor

🗳️ The State of HTML 2026 — The annual survey returns to measure the awareness and adoption of HTML features and browser APIs. This year covers Web Components, progressive enhancement, AI, and more. It takes less than 15 minutes and you can learn new things just by taking it.

Devographics

Safari Blocks 'Identity Resolution' Tracking Infrastructure — Cross-site cookies are long gone in Safari, so trackers moved to 'identity resolution' where third parties get the email address you type into forms and turn it into a cross-site, cross-device tracking ID. Safari now blocks them at the domain level.

Wilander, Wolfe, and Finkel (WebKit)

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

JPEG XL vs AVIF for Web Use-Cases — Now that JPEG XL has landed in all major browsers, Jake took the format for a spin, benchmarking it against AVIF. There's a lot of detail here with some good takeaways. You might also be surprised at what you can cram in under 200 bytes with JPEG XL.

Jake Archibald

Embracing Playful Imperfection with CSS's random() Function — A look at how to approach adding some randomness into our projects, and whether it makes sense on the web. The demos here show off some ideas, like organic typography, bouncing letters, and splayed cards.

Brecht De Ruyte

Photorealistic 3D in the Browser Without the Rendering Overhead — Learn how radiance fields and spatial streaming bridge real-time photorealistic 3D to the web with just 2 lines of Three.js.

Miris sponsor

Fitting an Element's Height to Its Background Pattern with calc-size() — A repeating pattern cut off at the bottom is a classic annoyance. Ahmad uses calc-size() (Chromium only for now, Safari soon) with round() to snap an element's auto height to a multiple of the tile height.

Ahmad Shadeed

Core Web Vitals Now (Experimentally) Count Soft Navigations — Most sites won’t notice, but navigation-heavy SPAs should see scores improve, with Search Console switching over when it goes stable next year.

Annie Sullivan (Google)

Using Math to Balance Your Heading Styles — Craig outlines a simple system for styling heading levels using a modular scale.

Craig Abbott

▶ Do We Really Need alpha()? — We now have three ways to lower the opacity of a color in CSS. Kevin has the details, highlighting what the alpha function brings to the table in particular.

Kevin Powell

WCAG 3: A Different Future for Accessibility — Why binary pass/fail made WCAG 2 a ceiling, and how WCAG 3 aims to make conformance a floor.
Léonie Watson (TetraLogical)

Compression and Concatenation on the Web — A hands-on look at how gzip, brotli and zstd each cope with concatenation on the web.
Phil Eaton

🧰 Tools, Code & Resources

📊 Chartist 2.0: This Lightweight SVG Charting Library Is Back — A freshly modernized SVG charting library that you style with CSS. It originally popped up in 2014, but "went stale". It's back with a composable API, server-side rendering, and still remains small. There's a migration guide for existing users.

Gion Kunz et al.

A DevTools Extension for Debugging CSS Scroll-Triggered Animations — Adds a pane to Chrome DevTools that draws a scroll-triggered animation's activation and active ranges on a minimap, shows a live status light, and lets you edit the ranges in place. Chrome Web Store, or source here.

Bramus Van Damme

Mobile AI Infrastructure for Web Devs Who Code with Agents — Point the agent you use for the web at iOS and Android. Expo takes care of the native builds and the trip to the stores.

Expo sponsor

Pele: Mermaid Diagrams as Lightweight, Themeable SVG — A zero-dependency renderer for the Mermaid diagram syntax that outputs responsive SVG you can theme with CSS variables. It claims to be a sixth the size of Mermaid.js. You can try the playground here.

Steph Ango (Obsidian)

pour: A Free Accessibility Checker & WCAG Audit Tool — Available as a browser extension or bookmarklet. Run it on any page to see an overlay with violations categorized as critical, serious, moderate, minor, etc.

David Yarham

🤖 Lighthouse for Claude Code: Turn PageSpeed Audits into a CLAUDE.md Fix Plan — Enter a URL and this tool will run a Google PageSpeed Insights and Lighthouse audit and generate instructions for Claude Code tailored to the audits.

Baris Kocdur

3dsvg: The Easiest Way to Turn SVGs Into 3D — A web-based editor that takes an uploaded SVG, text, or drawing and renders the flat image as 3D. Exports in a 3D software compatible format such as GLB, STL, etc.

Renato Costa

🔤 A font that annotates itself

Furifont: A Japanese Font That Draws Its Own Furigana — Furigana, the small readings above kanji, usually mean using <ruby> markup or JavaScript. Anthony's font does it with OpenType features alone! Repo here.

Anthony Fu

📬

Got a new email address? You can change your email here.

Bored of us? Click here to stop getting this newsletter.

Got a link for us? Reply and tell us. We can't include everything but we'll take a look.

Published by Cooper Press Ltd.
Curated by Chris Brandrick & Peter Cooper.
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom

Stop getting this newsletter