---
title: "When CSS could run JavaScript"
publication: "Frontend Focus"
issue: 758
published_at: "2026-09-16"
canonical_url: "https://frontendfoc.us/issues/758"
---

Plus hand-drawn CSS annotations, Safari 27 and Chrome 153, and why CSS-Tricks has gone quiet.       

Together with [![Tiger Data logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_282/e_make_transparent/co_white,e_outline:30/px1u7kjyvz7xnbm6ytir.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter)        

🚀 **Frontend** Focus 

#​758 — September 16, 2026 | [Read on the web](https://frontendfoc.us/issues/758)      

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/k6lzihdml7pitxrpadxq.jpg)](https://vale.rocks/posts/css-relics)  

[CSS Curiosities of the Past](https://vale.rocks/posts/css-relics) — 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](https://tantek.com/CSS/Examples/boxmodelhack.html), and more. 

Declan Chidlow   [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/3d1b5c6f.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) 

[Your Users Filter Faster Than Your Queries Can Run](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) — 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](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter). 

Tiger Data (creators of TimescaleDB) sponsor   

✅ [The Front-End Checklist](https://frontendchecklist.io/) — We've shared this before, but it's kept improving and now has [almost 400 frontend quality rules](https://frontendchecklist.io/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](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes) (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](https://developer.apple.com/documentation/safari-developer-tools/connecting-an-ai-agent-to-safari), as of Safari 27, for testing, debugging, etc.
- 🌐 [Chrome 153](https://developer.chrome.com/blog/new-in-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](https://developer.chrome.com/blog/chrome-154-beta), too.
- 🤔 Last week, Automattic's board forced CEO Matt Mullenweg into a [leave of absence](https://techcrunch.com/2026/09/09/automattics-board-forces-ceo-matt-mullenweg-into-leave-of-absence/), before Mullenweg [declared](https://techcrunch.com/2026/09/11/matt-mullenweg-tells-automattic-staff-in-slack-hes-back-in-control-after-ceo-ouster/) that he was "_back in control_".
- ✳️ We often share links to the helpful articles on [_CSS-Tricks_](https://css-tricks.com/), but it's gone quiet recently. Editor Geoff Graham [sheds some light on why](https://geoffgraham.me/why-css-tricks-has-been-quiet/).       

📙 Articles, Opinions & Tutorials  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1789556645/ysdrc8x57rihe9bm6mct.png)](https://ishadeed.com/article/aligning-list-icons/)  

[Better Icon and Label Alignment](https://ishadeed.com/article/aligning-list-icons/) — 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)](https://giannirosato.com/blog/post/case-against-jxl/) — 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](https://blog.sentry.io/metrics-caught-ai-size-estimate/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=metrics-fy27q3-evergreen&utm_content=newsletter-sponsored-link-blog-learnmore) — 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?)](https://www.bram.us/2026/09/11/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   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1789558018/zb4lmhosri2i8f9dh05c.png)](https://vincent.bernat.ch/en/blog/2026-css-sidenotes)  

[Sidenotes with CSS Anchor Positioning](https://vincent.bernat.ch/en/blog/2026-css-sidenotes) — 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](https://yatil.net/blog/wcag-3-road-to-hell-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`](https://css-tricks.com/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](https://flaviocopes.com/stylex/) — Here's a hands-on tour of Meta’s [StyleX](https://stylexjs.com/), 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](https://adrianroselli.com/2026/09/support-for-headers-attribute.html) 
Adrian Roselli   

[Google and OpenAI Want Your Site to Talk to Agents](https://agenticweb.nearestnabors.com/p/webmcp-agentic-web-openai-google) 
Rachel Nabors   

▶[WebMCP Is Here and You Should Care](https://www.youtube.com/watch?v=xtVvkRTH5ck) 
Syntax    

🧰 Tools, Code & Resources  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1789557313/crpjqoc9ssmdanb1ijub.png)](https://neat-annotations.syabro.com/)  

[Neat Annotations: Elegant Hand-Drawn Annotations with CSS](https://neat-annotations.syabro.com/) — 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](https://github.com/syabro/neat-annotations). 

Maxim Syabro   

[<`rich-input`>: A Rich Input Field](https://rich-input.netlify.app/) — Acts like a regular <`input type="text"`> but adds contextual keyword-based autocompletion and highlighting powered by <`datalist`>, [OpaqueRange](https://chromestatus.com/feature/6297362687066112) and the [CSS Custom Highlight](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API)APIs. 

Bramus Van Damme   

[Your Agents Have Been Coding Blindfolded. Simulators Give Them Sight](https://try.expo.dev/fef-simulators) — Cloud Simulators give your agents the ability to see the mobile apps you are building. [Join the waitlist](https://try.expo.dev/fef-simulators). 

Cloud Simulator sponsor   

[SnapDOM 3.0: Turn DOM Elements Into Images](https://snapdom.dev/) — A no-dependency [html2canvas](https://github.com/niklasvh/html2canvas) alternative with support for web fonts, pseudo-elements and Shadow DOM. [v3.0](https://github.com/zumerlab/snapdom/releases/tag/v3.0.0) adds ‘incremental recapture’ for faster repeat captures, automatic web font embedding, and `fromString()` for turning raw HTML markup into images. 

Zumerlab   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1789557625/ezqu6mnliczls05h80ie.png)](https://github.com/spiritov/ds.css)  

[ds.css: A Nintendo DS-Inspired CSS Framework](https://github.com/spiritov/ds.css) — I also run a [Nintendo newsletter](https://hanafuda.report/?ref=frontendfocus), 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](https://css.ds.dreamyard.xyz/). Perfect for a homepage! 

spiritov   

[EaseMotion CSS: A Zero-Dependency, Animation-First CSS Framework](https://github.com/SAPTARSHI-coder/EaseMotion-css) — 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](https://saptarshi-coder.github.io/EaseMotion-css/). 

Saptarshi Sadhu   

[UI Skills: A Collection of Design-Engineering Skills to Help Humans and Agents Create Better Interfaces](https://www.ui-skills.com/) 
Interface Office       

📰 Classifieds   

📄 No more regex hacks for PDF data. [Foxit's Extraction API](https://developer-api.foxit.com/developer-blogs/api-guides-tutorials/pdf-data-extraction-api-structured-json/?utm_source=draftdev&utm_medium=newsletter&utm_campaign=frontendfocus_20260916-) reads tables, fields, and layout, then returns clean JSON. 

--- 

⚡️ Add lightning-fast 1D/2D barcode scanning to your web app with [STRICH](https://strich.io/?ref=frontend-focus), a lean JS SDK. Simple, predictable pricing. [Free trial and demo!](https://strich.io/?ref=frontend-focus)      

😡 ...and finally  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/srntkimv1sggaljt2cej.jpg)](https://page-rage.com/)   

[Page Rage: Take Out Your Stress on a Web Page](https://page-rage.com/) — 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    

📬 

**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). 

--- 

**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). 

--- 

**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](https://bsky.app/profile/brandrick.bsky.social) & [Peter Cooper](https://twitter.com/cooperx86).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)