iiinova — where your digital self keeps evolving

Chrome for Developers @developer.chrome.com · 3h

Loved scroll-driven animations? Meet their scroll-triggered sibling. Instead of tying animation progress directly to the scrollbar, you can trigger full time-based CSS animations when crossing a scroll offset. See how to build them with pure CSS → goo.gle/4dhcvmh

140

Chrome for Developers @developer.chrome.com · 5h

Build JS-free interactive carousels with new CSS APIs → goo.gle/47reBwt Learn how to use scroll buttons, scroll markers, :target-current, and scroll-target-group to create built-in, responsive scrollers without writing a single line of JavaScript.

020

Chrome for Developers @developer.chrome.com · 29/09/2026

Teach your coding agent to write scroll-driven animations with Modern Web Guidance → goo.gle/mwg See how Modern Web Guidance helps your coding agent build resilient scroll animations that won't break on different screen sizes.

040

Reposted by Chrome for Developers

Rick Viscomi @rviscomi.dev · 29/09/2026

v0.0.191 of Modern Web Guidance is out and it's a big one! *16* new guides covering: web components by @castastrophe.bsky.social Cross-Origin Storage by @tomayac.com security by @rowan.fyi UI and PWA by @jamessw.com and @sturobson.com Wasm by @sbc100.bsky.social github.com/GoogleChrome...

accessible-web-components: Make custom elements accessible by default, setting roles and ARIA state via the ElementInternals ARIA mixin, managing focus with delegatesFocus, and keeping ARIA relationships within a single shadow root.
custom-elements: Define, register, and manage the lifecycle of autonomous custom elements, covering constructor rules, lifecycle callbacks, upgrade timing, attribute/property reflection, and naming conventions.
form-associated-custom-elements: Make a custom control participate natively in forms with formAssociated and ElementInternals, submitting its own value, integrating with constraint validation, and reacting to reset, disable, and state-restore.
prerendering-custom-elements: Server-render a custom element, then hydrate it in place without re-rendering or a flash of unstyled content.
shadow-dom: Encapsulate a component's DOM and styles with Shadow DOM, construct the tree efficiently with HTML templates, and project consumer content with slots.
styling-web-components: Style across the shadow boundary with :host selectors, inherited and custom properties for theming, ::slotted and ::part, and cascade layers and container queries inside components.
web-components: Orientation and cross-cutting principles for authoring and using Web Components, covering Custom Elements, Shadow DOM, templates and slots, Declarative Shadow DOM, styling across the shadow boundary, Form-Associated Custom Elements, and accessibility requirements. Use this guide when building reusable UI components, design systems, or server-rendered custom elements.
avoid-redundant-large-asset-downloads: Avoid re-downloading and re-storing large shared assets, such as AI models, Wasm modules, or fully-bundled JavaScript libraries, that a visitor's browser may already hold from an unrelated site.
load-shared-resources-declaratively: Serve popular, unmodified scripts, stylesheets, and JavaScript modules from a shared cross-origin cache using markup or import syntax alone, witho…

New Guides
migrate-web-app-origin: Transfer an installed web app to a new origin while preserving user configuration and OS-level shortcuts.
local-network-access: Access resources on a user's local network or loopback interface from a public web application.
trusted-types: Help prevent DOM-based XSS attacks by ensuring all untrusted content is sanitized before being inserted into the page.
responsive-table: Build a data table that presents tabular data with proper header semantics, and remains readable and navigable on small screens and with assistive technologies.
spatial-navigation: Implement accessible spatial navigation using arrow keys that works correctly in different layout modes (grid etc)
cpp-on-the-web: Compile C/C++ to WebAssembly using Emscripten

Updated the animated-select-picker guide to advise using standard value attributes on <option> elements to ensure standard form submission behavior.
Updated the branded-select-styling guide to emphasize retaining standard value attributes on <option> elements to preserve default form submission behaviors.
Updated the custom-select-picker-layouts guide with guidance on using :open::picker(select) selectors, customizing the ::checkmark pseudo-element, wrapping <selectedcontent> in a <button>, and managing keyboard navigation and accessibility constraints for grid layouts.
Updated the rich-media-picker guide to clarify that standard value attributes should be maintained on <option> elements to preserve form submission functionality.
Updated the out-of-order-html-streaming guide to document the full suite of static and streaming DOM insertion methods, detailing built-in sanitizer behaviors, WritableStream integration, and processing instruction marker practices.
Updated the sanitize-untrusted-html guide to detail node manipulation patterns using Document.parseHTML() to avoid mutation XSS, explain child preservation rules via replaceWithChildrenElements, and provide aligned DOMPurify fallback configurations.
Updated…

Removed the prevent-text-wrapping guide.

HTML processing instructions: Added Chrome 150 and Edge 150 support in out-of-order-html-streaming.

A four-column table titled "Benchmark Evaluations" comparing unguided versus guided pass rates across 132 tasks and 1,124 assertions.

Row 1: codex_cli (gpt-5.6-sol) achieved a 59% unguided pass rate and an 81% guided pass rate, an uplift of +22 percentage points.

Row 2: claude_code (claude-sonnet-5) achieved a 54% unguided pass rate and an 87% guided pass rate, an uplift of +33 percentage points.

Row 3: antigravity (gemini-3.8-flash-medium) achieved a 65% unguided pass rate and a 91% guided pass rate, an uplift of +26 percentage points.

12310

Chrome for Developers @developer.chrome.com · 29/09/2026

See how Modern Web Guidance helps your coding agent write a swipe-to-remove feature. Compare side-by-side with an unassisted agent. Modern Web Guidance provides best practices, smooth web animation patterns, and cross-browser fallbacks directly to your coding agent → goo.gle/mwg

082

Chrome for Developers @developer.chrome.com · 24/09/2026

Build interactive components like sticky headers and overflow indicators with state-based container queries → goo.gle/4d53htk In this episode, learn how to use scroll state queries for stuck, snapped, and scrollable UI elements to create dynamic web experiences without relying on extra JavaScript.

goo.gle

93: State queries in 2025

Una and Bramus dive into the latest advancements in CSS with state-based container queries. Learn how to create responsive and dynamic user experiences by qu...

031

Chrome for Developers @developer.chrome.com · 24/09/2026

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

goo.gle

New to the web platform in August | Blog | web.dev

Discover some of the interesting features that have landed in stable and beta web browsers during August 2026.

170

Chrome for Developers @developer.chrome.com · 23/09/2026

Building dynamic touch gestures like swipe-to-remove often causes coding agents to generate overly complex JavaScript, leading to janky animations. Modern Web Guidance solves this by providing your agent with structured, up-to-date implementation guides → goo.gle/mwg

0111

Chrome for Developers @developer.chrome.com · 21/09/2026

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

goo.gle

Fresher features, faster fixes: The two-week release cycle is here | Blog | Chrome for Developers

With Chrome 153, we're launching a faster, two-week release cycle.

1101

Chrome for Developers @developer.chrome.com · 21/09/2026

Is browser scroll-locking helping your site users, or just frustrating their diagonal gestures? 📐 @bram.us breaks down how `scroll-axis-lock: none` gives you control over 2D panning behavior. Check out the interactive demos → goo.gle/46SrOOC

010

Chrome for Developers @developer.chrome.com · 18/09/2026

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. Learn more on MDN → goo.gle/3TuiZYl

051

Chrome for Developers @developer.chrome.com · 18/09/2026

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.

020

Chrome for Developers @developer.chrome.com · 17/09/2026

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

goo.gle

Release v0.0.187 · GoogleChrome/modern-web-guidance

Release Notes: v0.0.187 🆕 New Guides Introduced a new guide for progress-ring detailing how to build accessible, customizable circular progress indicators that visually communicate task completion...

0113

Chrome for Developers @developer.chrome.com · 17/09/2026

Conditional logic and custom functions directly in your stylesheet? Yes please → bit.ly/4j7Ej02 No more convoluted hacks! In The CSS Podcast, @una.im and @bram.us break down how inline if() and custom function rules streamline your code.

020

Chrome for Developers @developer.chrome.com · 16/09/2026

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

181

Chrome for Developers @developer.chrome.com · 16/09/2026

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.

010

Chrome for Developers @developer.chrome.com · 16/09/2026

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/4AfHN6Z Guides and fallbacks are in Modern Web Guidance → goo.gle/4AhBGPG

0174

Reposted by Chrome for Developers

Barry Pollard @tunetheweb.com · 15/09/2026

We just launched experimental ad metrics in the Chrome User Experience Report (CrUX): - Ad Count - Ad Density - Ad Weight: Network - Ad Weight: CPU These metrics are a set of ad-related measurements that provide transparency into sites' ad experiences. developer.chrome.com/blog/crux-ad... 1/8 🧵

developer.chrome.com

New ad metrics in Chrome User Experience Report | Blog | Chrome for Developers

Learn about the new ad metrics now available in the Chrome User Experience Report (CrUX)

23014

Chrome for Developers @developer.chrome.com · 14/09/2026

Check out what's arriving in Chrome 154 beta → goo.gle/4yq2n2I Explore new CSS features like scroll-marker-group modes, WebCrypto post-quantum algorithms, and Iterator includes() method.

030

Chrome for Developers @developer.chrome.com · 10/09/2026

Open up your app's inner workings to AI agents with custom tools in DevTools for agents→ goo.gle/4r5H3x7 Write plain JavaScript to build tailored third-party tools that save tokens and bypass manual steps like login forms built for humans.

020

Chrome for Developers @developer.chrome.com · 09/09/2026

Handling protected APIs clipboard access, fullscreen mode, or media autoplay requires knowing if a visitor is actively engaged. The UserActivation API, now Baseline widely available, provides details about whether a user is interacting with your page or has done so since loading → goo.gle/4r3DGqz

020

Reposted by Chrome for Developers

Bramus @bram.us · 07/09/2026

Back in June I shared a demo of a grid that smoothly animates on resize without JS or View Transitions. I finally sat down to write up how it works: CSS Anchor Positioning + scoped anchors + regular CSS transitions. → brm.us/animated-grid

410710

Reposted by Chrome for Developers

Sarah Drasner @sarahedo.bsky.social · 08/09/2026

I’m excited to share that we've added a consequential hint to the WebMCP spec! For site devs: set to true when WebMCP tools may perform a high-stakes action: anything that needs explicit user permission in order to execute. If you’re going to make a purchase, send an email, or book travel.

developer.chrome.com

Imperative API | AI in Chrome | Chrome for Developers

Define many types of WebMCP tools with standard JavaScript.

3274

Chrome for Developers @developer.chrome.com · 08/09/2026

Here's what's new in Modern Web Guidance v0.0.186 → goo.gle/4xcsdWW ⌨️ New guide on IME-safe textarea submission, along with recs for handling KeyboardEvent.isComposing for IME 🔎 Mandatory code verification step for agents in the global MWG skill

goo.gle

Release v0.0.186 · GoogleChrome/modern-web-guidance

Release Notes: v0.0.186 🆕 New Guides Added the ime-safe-enter-submit guide, which provides implementation strategies for handling "Enter to submit" patterns in textareas without interrupting Input...

091

Chrome for Developers @developer.chrome.com · 03/09/2026

Time is running out to enter the OpenAIDevs WebMCP Challenge ⌛ Polish up your final submissions, show us your agent-ready web apps, and win prizes → goo.gle/4x20isR

000

Chrome for Developers @developer.chrome.com · 03/09/2026

Interop 2027 proposals are officially open → goo.gle/4xh1tEY Which web platform features need better cross-browser compatibility next year? Submit your ideas before September 23rd. Also be sure to like and comment on submitted ideas.

0187

Chrome for Developers @developer.chrome.com · 28/08/2026

Chrome 153 is now in beta → goo.gle/4xY3INV Try out new CSS scroll container options, Rust-based XML parsing, declarative camera and microphone HTML elements, and the new WebGPU buffer_view feature.

goo.gle

Chrome 153 beta | Blog | Chrome for Developers

Get a preview of the next Chrome release with this post detailing the features in the current beta.

140

Chrome for Developers @developer.chrome.com · 27/08/2026

Why choose between local performance and cloud reliability? Firebase AI Logic lets you run Gemini Nano directly in Chrome for Desktop, automatically switching to cloud models whenever needed, providing local privacy with cloud fallback. Try the setup workflow → goo.gle/4gmipV9

120

Chrome for Developers @developer.chrome.com · 25/08/2026

Plus, Chrome's @sarahedo.bsky.social is on the judging panel! What will you create?

130

Chrome for Developers @developer.chrome.com · 25/08/2026

Create agent-ready web apps for the WebMCP Challenge → goo.gle/4qpDQYV We're excited to see ChatGPT supporting WebMCP, the experimental standard that lets users and AI agents navigate websites together. In the @openaibot.bsky.social WebMCP Challenge you can experiment with it and win prizes.

goo.gle

WebMCP Challenge

Join the OpenAI WebMCP Challenge to build agent-ready web apps that work with ChatGPT. Submit your project by September 3, 2026, at 1 p.m. PT.

175

Chrome for Developers @developer.chrome.com · 25/08/2026

Discover web platform capabilities landing this month → goo.gle/4zkP8S9 Explore additions like the ruby-overhang CSS property, declarative Shadow DOM manual slot assignment, and the new usermedia element.

030

Chrome for Developers @developer.chrome.com · 24/08/2026

Explicitly set subgroup sizes in WGSL compute shaders with WebGPU. Fine-tune AI workloads on specific platforms using the new @subgroup_size attribute. See the full release details → goo.gle/4gLeGj9

050

Chrome for Developers @developer.chrome.com · 21/08/2026

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here → goo.gle/4a1HJMM

1204

Chrome for Developers @developer.chrome.com · 20/08/2026

Chrome 152 is now in beta Explore new capabilities including connection allowlists, native PWA notification attribution on macOS, and relative alpha colors in CSS. Get all the details → goo.gle/4hKiumS

040

Chrome for Developers @developer.chrome.com · 19/08/2026

For any devs in the region, we have a great opportunity for you to collaborate with us ⬇️

040

Chrome for Developers @developer.chrome.com · 19/08/2026

We are looking for a few more developers to join our WebDev Insights community → goo.gle/3OvuA6T This is your chance to participate in user research, test out experimental tools, & directly shape upcoming Chrome features. Grab one of the last spots and help us build the future of the web ecosystem.

030

Chrome for Developers @developer.chrome.com · 17/08/2026

Check out the latest updates in Chrome 151 DevTools → bit.ly/4x6YmQE Explore CSS specificity tooltips, improved JavaScript memory debugging, and updated device emulation presets.

083

Chrome for Developers @developer.chrome.com · 17/08/2026

What if we could remove the friction in the email → goo.gle/4fsFpjG The proposed Email Verification API would let your site validate the email address right in the browser! No email sent, no confirmation click needed.

1123

Chrome for Developers @developer.chrome.com · 14/08/2026

Check web platform feature availability in Lighthouse → goo.gle/3TXx3cO Baseline status details are now in the Best Practices section, including: 🌐 Widely available features 🛠️ Newly available capabilities ⚠️ Limited availability code

082

Chrome for Developers @developer.chrome.com · 12/08/2026

Meet Chrome DevTools Connect for WebStorm → goo.gle/4i2wPuL Now your AI agent can open Chrome, inspect rendering, read console logs, and verify runtime fixes without you leaving the WebStorm IDE.

040

Chrome for Developers @developer.chrome.com · 12/08/2026

Modern Web Guidance passkey skills give coding agents like Claude Code and Antigravity the knowledge to build secure authentication loops autonomously → goo.gle/4bLzqp1 In our test on Claude Code Opus 4.8, an implementation using these passkey skills significantly outperformed one without them.

080

Chrome for Developers @developer.chrome.com · 11/08/2026

✨ Get deeper insights into your data within the AI assistance panel → goo.gle/4p3oIzA Nine additional widgets now feature data from across your panels to help you understand what Gemini uses: 📊 Performance events 🌐 Network requests 📜 Resource content

020

Chrome for Developers @developer.chrome.com · 10/08/2026

Evaluate your production feature support more easily using the updated Baseline Checker tool. Now you can check your own user support levels without the headache of downloading and uploading manual files. The new Google Analytics API integration does the heavy lifting for you → goo.gle/3T7ePoF

030

Reposted by Chrome for Developers

WebStorm, a JetBrains IDE @webstorm.jetbrains.com · 10/08/2026

Chrome DevTools Connect for WebStorm is live. Your agent now opens Chrome, reads console logs and network requests, takes screenshots, and interacts with the page directly in the browser. Design → code → browser. Built with @developer.chrome.com team! Read more: jetbrains.blog/jfeii5

051

Chrome for Developers @developer.chrome.com · 22/07/2026

Chrome 151 beta introduces powerful capabilities for web performance and accessibility → goo.gle/4yuqBcV Discover new soft navigation timeline entries, the aria-actions attribute, and the <usermedia> element for interacting with media streams.

0132

Chrome for Developers @developer.chrome.com · 21/07/2026

Set up custom triggers on webstatus.dev to monitor the Baseline features you care about. Choose your notification frequency: 🗓️ Monthly digests ⏰ Weekly roundups ⚡ Real-time updates Create a personalized newsletter or shareable lists for your audience → goo.gle/3RJA5Ay

070

Chrome for Developers @developer.chrome.com · 21/07/2026

Make your Chrome extension stand out! Engaging with user reviews on the Chrome Web Store creates valuable connection and proves active maintenance.

050

Chrome for Developers @developer.chrome.com · 20/07/2026

At #GoogleIOConnect India we asked Dhananjay Kumar, the VP of Engineering at MakeMyTrip, how they are putting WebMCP to work. Listen up ⬇️ #BuildwithGemini

050