Frontend Focus
Plus hand-drawn CSS annotations, Safari 27 and Chrome 153, and why CSS-Tricks has gone quiet.
Together with  Tiger Data logo
🚀 Frontend Focus

#​758 — September 16, 2026 | Read on the web

CSS Curiosities of the Past — A wonderful tour of the non-standard CSS quirks developers used to make browsers behave, especially Internet Explorer. Covers the 'star hack', CSS expressions (JavaScript in your CSS!), IE's DirectX filters, the famous box model hack, and more.

Declan Chidlow

Your Users Filter Faster Than Your Queries Can Run — Zoom the chart, change the range, and the whole query reruns from scratch. TimescaleDB extends Postgres so those aggregations return instantly. Continuous aggregates pre-compute rollups so dashboards stay fast at scale. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

 The Front-End Checklist — We've shared this before, but it's kept improving and now has almost 400 frontend quality rules covering accessibility, performance, security, SEO, and more. You can also now connect it to Claude, Cursor, and other AI tools over MCP so they review against the same standards.

David Dias

⚡️ IN BRIEF

  • 🧭 Safari 27 has shipped (alongside iOS, iPadOS, and macOS 27), bringing customizable <select> elements, sizes="auto" on images, the :heading pseudo-class, alpha(), multi-color color-mix(), and more.

  • 🤖 Apple has also shared details on how you can hook up an AI agent to Safari, as of Safari 27, for testing, debugging, etc.

  • 🌐 Chrome 153 is out, adding single-axis scroll containers (in non-stable channels only) and the <camera> and <microphone> elements. Chrome 154 is now in beta, too.

  • 🤔 Last week, Automattic's board forced CEO Matt Mullenweg into a leave of absence, before Mullenweg declared that he was "back in control".

  • ✳️ We often share links to the helpful articles on CSS-Tricks, but it's gone quiet recently. Editor Geoff Graham sheds some light on why.

📙 Articles, Opinions & Tutorials

Better Icon and Label Alignment — When text is just one line, an accompanying icon is nicely vertically centered, but when the text has multiple lines, the icon is still 'centered' but can look oddly misplaced… Ahmad explores a fix using CSS's lh unit.

Ahmad Shadeed

The Case Against JPEG XL (in the Browser) — With JPEG XL decoding making its way into Chrome and Firefox, an AV1 encoder developer who once backed the format argues it offers little advantage over AVIF for the web.

Gianni Rosato

How Sentry Application Metrics Caught a Broken AI-Written Estimator — Real files came out up to 83% bigger than predicted. Read how a few browser metrics surfaced it.

Sentry sponsor

WebKit Supports interactive-widget (and Hopefully Safari Will Too?) — WebKit recently gained support for interactive-widget, the viewport <meta> directive that controls how a page resizes when the virtual keyboard appears. Bramus built WebKit locally to test it and recaps the three modes with side-by-side visuals.

Bramus Van Damme

Sidenotes with CSS Anchor Positioning — A walkthrough of building Tufte-style sidenotes (margin notes instead of footnotes - as above) with anchor positioning. It's JavaScript-free, multi-block, and degrades gracefully on narrow viewports and older browsers.

Vincent Bernat

WCAG 3: The Road to Hell is Paved with Supplemental Requirements — Accessibility expert Eric critiques the latest WCAG 3 draft's optional “Supplemental Requirements” and “Assertions,” arguing they'll see little uptake and proposing named, adoptable modules instead.

Eric Eggert

Animating CSS border-image — How to animate border styles (using an image or gradient) to create some interesting user interface effects.

Preethi Sam

A Deep Dive into StyleX — Here's a hands-on tour of Meta’s StyleX, a library which turns JavaScript style objects into plain atomic CSS at build time. Flavio also looks at why it can be a good fit for coding agents in particular.

Flavio Copes

Screen Readers Seem to Largely Ignore the headers Attribute on Table Cells
Adrian Roselli

Google and OpenAI Want Your Site to Talk to Agents
Rachel Nabors

▶  WebMCP Is Here and You Should Care
Syntax

🧰 Tools, Code & Resources

Neat Annotations: Elegant Hand-Drawn Annotations with CSS — A lovely way to add some flourish to your content - think hand-drawn arrows and labels, all in CSS. Scroll down on the demo page to get the idea, or see the repo.

Maxim Syabro

<rich-input>: A Rich Input Field — Acts like a regular <input type="text"> but adds contextual keyword-based autocompletion and highlighting powered by <datalist>, OpaqueRange and the CSS Custom Highlight APIs.

Bramus Van Damme

Your Agents Have Been Coding Blindfolded. Simulators Give Them Sight — Cloud Simulators give your agents the ability to see the mobile apps you are building. Join the waitlist.

Cloud Simulator sponsor

SnapDOM 3.0: Turn DOM Elements Into Images — A no-dependency html2canvas alternative with support for web fonts, pseudo-elements and Shadow DOM. v3.0 adds ‘incremental recapture’ for faster repeat captures, automatic web font embedding, and fromString() for turning raw HTML markup into images.

Zumerlab

ds.css: A Nintendo DS-Inspired CSS Framework — I also run a Nintendo newsletter, so this is like catnip to me. The DS was Nintendo's foldable, touchscreen handheld released in 2004. This framework attempts to recreate its pixelated charm. See a demo here. Perfect for a homepage!

spiritov

EaseMotion CSS: A Zero-Dependency, Animation-First CSS Framework — Includes animated buttons, cards, layout styles, and a full motion library with 20+ animations. The styles are easy to implement via human-readable class names and there's an integration layer for React. Try it here.

Saptarshi Sadhu

UI Skills: A Collection of Design-Engineering Skills to Help Humans and Agents Create Better Interfaces
Interface Office

📰 Classifieds

📄 No more regex hacks for PDF data. Foxit's Extraction API reads tables, fields, and layout, then returns clean JSON.


⚡️ Add lightning-fast 1D/2D barcode scanning to your web app with STRICH, a lean JS SDK. Simple, predictable pricing. Free trial and demo!

😡 ...and finally

Page Rage: Take Out Your Stress on a Web Page — Ever get a bit flustered when building a site? Work out some of that stress by destroying several pre-made pages here, or install the browser extension to smash up any web page to your heart’s content.

Alex Reardon

Issue 757 #758