---
title: "12 CSS features that can retire your dependencies"
publication: "Frontend Focus"
issue: 759
published_at: "2026-09-23"
canonical_url: "https://frontendfoc.us/issues/759"
---

Plus Safari 27's big update, native blurry image previews, and a sneaky scrolling trap.       

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 

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

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/urmdbbhgpgphno40bksv.jpg)](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/)  

🧭 [WebKit Features for Safari 27.0](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/) — An [epic set of release notes](https://developer.apple.com/documentation/safari-release-notes/safari-27-release-notes) covers Safari 27's enhancements, including [its new MCP server](https://webkit.org/blog/18136/introducing-the-safari-mcp-server-for-web-developers/) (let agents debug your work), [scroll anchoring](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_anchoring/Overview), the customizable `<select>` element, a `controls` attribute for images in visionOS, `sizes="auto"` for images, and more. 

WebKit  

💡 In related news, [Xcode 27.1 Beta](https://developer.apple.com/documentation/xcode-release-notes/xcode-27_1-release-notes) includes an _iPhone Duo_ simulator if you want to see how things look on Apple's forthcoming foldable.  [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/338febeb.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) 

[Skeleton Loaders Are Just Slow Queries in Disguise](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) — You add a skeleton loader to hide the wait. But that wait is a slow query, and it only grows with your data. TimescaleDB extends Postgres so the data behind your components returns fast at scale, no matter how big it gets. [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   

[12 CSS Features You Can Use Today with No Build Step](https://flaviocopes.com/modern-css-features/) — Highlights various CSS features that we can turn to _now_, retiring some toolchain dependencies in turn. Things like native nesting instead of Sass, `:has()` instead of wrapper-class hacks, and more. 

Flavio Copes   

[Blurry Before Beautiful: Image Previews for the Web?](https://patrickbrosset.com/articles/2026-09-22-blurry-before-beautiful-image-previews-for-the-web/) — Having a 'blurry' version of an image load in before the full version isn't new, but the Edge team is proposing a `previewsrc` attribute so browsers can handle it natively. 

Patrick Brosset (Microsoft)     

⚡️ IN BRIEF 

- 🛠️ [Chrome's latest DevTools update](https://developer.chrome.com/blog/new-in-devtools-october-2026) brings DevTools MCP server improvements, ad script tracking, more modern devices in Device Mode, and more.
- 🌏 A [recent Edge update](https://blogs.windows.com/msedgedev/2026/09/21/new-in-edge-for-developers-create-better-components-and-make-your-site-agent-ready/) adds the [OpaqueRange API](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md) for text-range UIs, component accessibility improvements, and the agent-ready WebMCP API.
- ☑️ [Chrome 155 beta adds support](https://developer.chrome.com/blog/chrome-155-beta) for the CSS `symbols()` function, `margin-trim`, JPEG XL images, and more.      

📙 Articles, Opinions & Tutorials   

[The Root Scroller and How Not to Lose It](https://polypane.app/blog/the-root-scroller-and-how-not-to-lose-it/) — The ‘root scroller’ is the viewport’s scroll container and handles things like scroll restoration and collapsing mobile address bars. But common CSS patterns can hand scrolling to other elements and lose those features, as shown in this demo-packed explainer. 

Kilian Valkhof   

["AI, Make the Website Good"](https://www.zachleat.com/web/ai-websites/) — Zach argues that, no matter the tools, caring about the _quality_ of output matters more than ever. He amusingly illustrates this point by highlighting the front of house output of top AI companies. 

Zach Leatherman   

[The Era of Agentic Mobile Development Is Built on Expo](https://try.expo.dev/fef-expo) — Build with our CLI and dev tools. Test on our cloud simulators. And ship with the best CI/CD for mobile development. 

Expo sponsor   

[19½ Things You Didn't Know About Accessibility in HTML and CSS](https://noti.st/matuzo/OD53aV/slides) — A neat slide-driven writeup of a StripeCon Europe talk rounds up lesser-known accessibility details. 

Manuel Matuzovic   

['CSS Scroll-Triggered Animations Are Here, And I Completely Missed Them'](https://cydstumpel.nl/css-scroll-triggered-animations-are-here-and-i-completely-missed-them/) — Scroll-_triggered_ animations shipped in Chrome back in February. Cyd catches us up on how they differ from regular and scroll-driven animations, and looks at the `timeline-trigger` and `animation-trigger` properties specifically. 

Cyd Stumpel   

[Responsive `iframes` in Chrome 154](https://developer.chrome.com/blog/responsive-iframes) — Landed in Chrome, and in preview in Edge, responsively-sized iframes are now a thing. You can set an iframe to be the size of its content, set which dimension that size is derived from, and tweak dynamically. The only catch is the embedded document must opt in. 

Sebastian Benz & Bramus van Damme   

[A Decent Custom Checkbox Pattern for Until `::checkmark` is Ready](https://piccalil.li/blog/a-decent-custom-checkbox-for-until-checkmark-is-ready/) — Until `::checkmark` reaches checkboxes, Andy lays a transparent native input over a custom box with an SVG tick. 

Andy Bell   

[We Found a Fix for 'Wobbly Spinners' in Safari](https://www.sanity.io/engineering/we-fixed-wobbly-spinners-in-safari-without-ai) — CSS’s `round()` function came to the rescue here. 
Cody Olsen   

[The Death of Web Development Education: Rescuing a Field From Disappearing](https://molily.de/web-dev-education/) 
Mathias Schäfer    

🧰 Tools, Code & Resources   

[Critical 9.0: Extract and Inline Critical Path CSS in HTML](https://github.com/addyosmani/critical) — A total rewrite of the popular critical CSS inliner, used to improve first render and LCP. [Version 9](https://github.com/addyosmani/critical/releases/tag/v9.0.0) picks between two engines: a fast, browser-free one for prerendered HTML and a Playwright-based one for SPAs. Plus MCP support. 

Addy Osmani and Ben Zörb   

📊 [Plotly.js 4: A Major Update for the Popular Charting Library](https://plotly.com/blog/announcing-plotly-js-4-plotly-py-7/) — It adds ‘quiver’ plots for drawing vector fields (with many fantastic examples in the post), accepts any CSS Color 4 color string, and removes the use of Mapbox GL in favor of MapLibre. 

Chris Parmer   

[Build Forms That Fit Your Frontend—and Any Backend](https://surveyjs.io/?utm_source=frontend&utm_medium=email) — Create custom themes for your form UI or use style adapters for Bootstrap, MUI, and Shadcn/UI. Dedicated npm packages for React, Angular, and Vue. 

SurveyJS sponsor   

[Semfont: A Font That Reads What You Wrote](https://rohanadwankar.github.io/posts/semfont.html) — A small library that auto-styles text word-by-word, scoring each word (by sentiment, salience, and more) and then applying color, weight, and slant. [Repo here](https://github.com/RohanAdwankar/semfont). 

Rohan Adwankar   

[Slidev: Presentation Slides for Developers](https://sli.dev/) — Uses a Vue-based tech stack, providing a developer-focused set of tools for creating Markdown-based slides for tech talks. 

Anthony Fu   

🧪 ...and finally  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ppduux6gi6ovqquqrnt9.jpg)](https://blog.alena.rocks/en/artifacts/html-elements/)  

[The Periodic Table of HTML Elements](https://blog.alena.rocks/en/artifacts/html-elements/) — Contains all 115 elements of the current HTML Living Standard. A modernization of Josh Duck’s version [included in](https://atomicdesign.bradfrost.com/chapter-2/) Brad Frost’s Atomic Design book. 

Alena Batitskaia    

📬 

**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|*)