The official Chrome Devs X account from Google. We want to help you build beautiful, accessible, fast, & secure websites that work for everyone, everywhere.
See what new web platform features arrived in August → goo.gle/4iIdCis
Highlights reaching Baseline:
📦 Precision text-box alignment controls
🔎 Dynamic sibling-count() and sibling-index() functions
🌐 Global autocorrect HTML attribute support
Build interactive components like sticky headers and overflow indicators with state-based container queries → goo.gle/4d53htk
In this episode of The CSS Podcast, learn how to use scroll state queries for stuck, snapped, and scrollable UI elements to create dynamic web experiences without relying on extra JavaScript.
Single-axis scroll containers fix long-standing CSS overflow quirks → goo.gle/4yeg4SM
Key capabilities ready for testing in Chrome 153 (Beta, Dev, or Canary):
📌 Pair `auto` with `clip` to enable a single-axis scroll container
🔍 Detect support reliably using `@ supports named-feature()`
🚫 Prevent accidental two-dimensional scrollers in your layouts
It's great to see the work on responsively sized iframes landing in Chrome - developer.chrome.com/blog/re…
In my post about the browser being a great sandbox, I said: "We need a way to size the outer-iframe (or iframes in general) that doesn’t rely on access to iframe.contentDocument.body.innerHeight and sandbox='allow-same-origin'"
aifoc.us/the-browser-is-the-…
This is the start of that.
Happy to see this starting to land, because as we generate more experiences dynamically, we need the sandbox to improve *and* we need to be able improve how iframes work so we don't accidentally introduce user-land sandbox escapes to improve the UX of sites.
🔄 Every software loop needs feedback: design, build, test, launch, and review.
When human users hit broken flows on a site, some file support tickets. But when AI agents hit dead ends, they fail silently or apologize in prose.
What if we give agents a bug-reporting tool? 🧵👇
Ever watched your coding agent confidently write massive amounts of JavaScript for a simple swipe gesture, only for the animation to stutter? 😅
Watch our side-by-side test: with Modern Web Guidance enabled, the coding agent pulls expert-vetted swipe-to-remove guide into its context window, handling features like scroll snap and intersection observer with ease → goo.gle/mwg
We launched our new two-week release cycle → goo.gle/4hsULH0
Here's what this means for web devs:
🔭 Smaller, more manageable release scopes
🌐 Modern Web Platform capabilities land sooner
🔒 Speedier delivery for critical security patches
Is browser scroll-locking helping your site users, or just frustrating their diagonal gestures? 📐
Bramus breaks down how `scroll-axis-lock: none` gives you control over 2D panning behavior.
Check out the interactive demos → goo.gle/46SrOOC
hasStorageAccess() and requestStorageAccess() are now widely available baseline web platform features. The Storage Access API lets embedded content access cookies and unpartitioned state seamlessly, keeping user privacy intact while supporting modern standards.
Get all the details on MDN → goo.gle/3TuiZYl
Design effective WebMCP tools to help AI agents complete users' workflows→ goo.gle/4ixF7eG
Follow our practical framework to map user goals, define application states, and role-play scenarios to support agentic interactions.
Modern Web Guidance v0.0.187 brings new and updated guides and Codex plugin support → goo.gle/4harAXQ
✨ New guides: progress rings, scrollspy nav menus, loading spinners
📝 Updated guidance to avoid bfcache breakage and unwanted inline layout gaps
🔌 Added plugin manifest support for Codex
In case you missed it, the WebGPU meetup is happening in Paris Nov 5th. CFP is still open until next Wednesday!
Survey will drive prioritization for the standardization group and your input will be extremely valuable (bindless is already in progress ^^)
Links in the thread 🧵👇
🚀 The WebGPU Working Group is meeting in Paris this November, and they need your real-world insights to shape the future of the standard!
Tell us what works well and what needs improvement 👇
📊 Take the survey: forms.gle/H57wGhsTFjQbeBTv7
[1/3]
Conditional logic and custom functions directly in your stylesheet? Yes please → bit.ly/4j7Ej02
No more convoluted hacks! In The CSS Podcast, Una and Bramus break down how inline if() and custom @function rules streamline your code.
10,000 installs and counting! 📈 We created Modern Web Guidance to bring web platform expertise right into your agent workflows. Have you tried pairing these skills with Chrome DevTools for agents to audit performance and automatically fix code?
Check it out and join 10K+ web developers who are coding smarter → goo.gle/4yEVz1h
Chrome 152 introduces Connection Allowlists for web security → goo.gle/3T8iH9d
If your site uses federated authentication alongside this network sandbox, ensure your Identity Provider endpoints are included to prevent login issues.
In case you missed it - we have support for WebMCP in Chrome DevTools! 🎉
Find it inside the Application panel under "WebMCP" to easily debug your WebMCP tools!
Let us know what is missing and what should be improved!
#WebMCP#ChromeDevTools#AIAgents#WebDev
sibling-index() = knowing your exact spot in line
sibling-count() = knowing how long the line is
Both CSS functions have reached Baseline Newly Available status for the latest browsers.
Read the full docs → goo.gle/4ho0ePn
Guides and fallbacks are in Modern Web Guidance → goo.gle/4AhBGPG