@developer.chrome.com
The Official Chromium Developers Account.
Check out our developer portals: https://developer.chrome.com/ and https://web.dev/
@rviscomi.devReposted by @developer.chrome.comTwo Modern Web Guidance releases in one week?! v0.0.193 is out, teaching coding agents how to: • restrict outbound network connections (Connection-Allowlist) • validate origins without string parsing (Origin API) • verify email address ownership without OTPs • build draggable floating elements
@developer.chrome.comBy installing this CLI tool, your agent searches a database of best practices before writing a single line of code. The result is forms complete with proper autocomplete values, enterkeyhint attributes, and autofill CSS pseudo-classes.
Upgrade your agent today → goo.gle/mwg
@developer.chrome.comBuilding web forms with an AI agent means you might be missing the progressive enhancements that boost conversions. Modern Web Guidance helps with this 🧵⬇️
@developer.chrome.comPayPal recently tested the WebMCP proposed standard to streamline agentic commerce. By replacing more than 30 complex interface-interaction steps with 3 structured tool calls, they delivered a significantly faster and more consistent E2E checkout experience for AI assistants → goo.gle/4yXHc8E
@rviscomi.devReposted by @developer.chrome.comModern Web Guidance v0.0.192 is out. With it your coding agent now knows how to: • build SMS one-time-code forms that autofill (WebOTP) • make dark mode toggles that follow the OS • honor the OS text size setting • reduce INP and lazy-load video/audio • feature-detect CSS at-rules with @supports
@bram.usReposted by @developer.chrome.comAfter 7.5 months of tweaking, reviewing, and rewriting, the docs for Scroll-Triggered Animations have landed on @developer.mozilla.org (MDN)!
→ developer.mozilla.org/en-US/docs/W...
Congrats and thanks to Chris Mills and @estelle.bsky.social for their hard work and sweating the details on this!
@developer.chrome.comEnsure your coding agent creates more accessible, progressively enhanced web forms, with Modern Web Guidance→ goo.gle/mwg
Discover how Modern Web Guidance skills help agents handle:
⌨️ Adding the Enter key hint attribute
🏷️ Correct autocomplete values
🎨 Autofill styling as a progressive enhancement
@bram.usReposted by @developer.chrome.com
@developer.chrome.comStop adding !important to solve CSS specificity issues → goo.gle/4729nY4
Starting in Chrome 151, DevTools breaks down the exact specificity calculation right inside the Styles tab.
@developer.chrome.comWith the guidance, the agent: ✅ Decoupled entry and exit animations ✅ Avoided fragile percentage calculations ✅ Implemented fallbacks for browsers that don't support needed animation properties
@developer.chrome.comEntry and exit animations in a card-based UI can break if card or screen dimensions change. Newer CSS animation properties can help, but not all browsers support them. We gave a coding agent the same prompt twice: once unaided, once with Modern Web Guidance installed 🧵
@developer.chrome.comSpeed up your web debugging workflow with the latest DevTools features → goo.gle/4hApcKj
🧠 Debug memory issues with new tools in DevTools for agents
🧭 Track soft navigations in the Performance panel
🔄 Replay network requests instantly with new context menu options
@developer.chrome.comLoved 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
@developer.chrome.comBuild 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.
@developer.chrome.comTeach 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.
@rviscomi.devReposted by @developer.chrome.comv0.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
@agektmr.comReposted by @developer.chrome.comConnection Allowlists announcement blog post has been published.
developer.chrome.com/blog/connect...
@developer.chrome.comSee 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
@developer.chrome.comBuild 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.
@developer.chrome.comSee 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
