New Sep 16, 2026

When CSS could run JavaScript

Multi Author Blogs All from Frontend Focus View When CSS could run JavaScript on frontendfoc.us

šŸš€ 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

Scroll to top