Entry 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. Compare their results side-by-side below and install Modern Web Guidance here → goo.gle/mwg With the guidance, the agent: ✅ Decoupled entry and exit animations ✅ Avoided fragile percentage calculations ✅ Implemented fallbacks for browsers that don't support needed animation properties
Chrome for Developers
Technology, Information and Internet
Helping you build, grow, and innovate on the web.
About us
The official Chrome for Developers LinkedIn account from Google. We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users.
- Website
-
https://developer.chrome.com/
External link for Chrome for Developers
- Industry
- Technology, Information and Internet
- Company size
- 5,001-10,000 employees
Updates
-
We expanded DevTools for agents capabilities so coding agents can perform deep memory debugging and added soft navigation tracking to the Performance panel so SPA route changes can be swiftly measured. On top of that, you can resend network requests straight from the context menu, inspect decoded binary WebSocket payloads, and check CSS specificity on hover → https://goo.gle/4hApcKj
-
-
Chrome for Developers reposted this
🎥 What's new in DevTools in October: https://lnkd.in/dzibMh7B I am back! After meeting so many of you across Google I/O Connect in Berlin, Bengaluru, and Shanghai, I went to the studio for a brand-new episode of What's New in DevTools, covering everything that landed in Chrome 152, 153, and 154! 🏎️ ♻️ Apart from the new, faster release cycle, which brings you two Chrome releases per month going forward, this video brings you up to speed on: • DevTools for Agents with Agent Plugins 1.0, memory debugging, and fine-grained JavaScript execution controls • Performance with full soft navigation support, plus custom CPU performance tier overrides • Elements & Styles with plenty of quality-of-life improvements, like hiding inactive styles and specificity tooltips 📖 If you would rather read than watch, you can find the full breakdown here: https://lnkd.in/dk-ecPzZ As always, thanks to Aaron Gove and Matt Bayfield who produced this with me. Aaron even brought his LEGOs along for some fun bits in our upcoming Developer Tooling Tips episodes! For those of you who want to dive deeper into memory debugging, my colleague Jose Luis Zapata De Santiago wrote excellent documentation on exactly that, walking through how to hand a heap snapshot to an AI agent and actually get somewhere: https://lnkd.in/dqDiVpci 👀 And there is more coming! We also recorded two new Developer Tooling Tips episodes in London: • An episode on Memory debugging with agents, putting Zapata's docs into practice • And one about CLI vs. MCP, when to reach for which, and why the answer isn't always obvious Which of these updates are you trying first?
-
-
Advance your CSS animations with scroll-triggered animations in Chrome → https://goo.gle/4dhcvmh If you're familiar with scroll-driven animations, scroll-triggered animations are the next iteration, already available in Chrome. Instead of linking animation progress directly to scroll movement, this feature lets you start time-based CSS keyframes when scrolling past specific offsets, all in CSS without JavaScript.
-
Listen to The CSS Podcast to learn about carousel scroll APIs → https://goo.gle/47reBwt Carousels are evolving beyond heavy scripts. In this episode of The CSS Podcast, Una and Bramus walk through CSS features that empower you to build full-featured, interactive carousels directly in the browser. Learn how to configure scroll buttons, set up scroll markers, use the :target-current pseudo-class to style active states, and leverage scroll-target-group for effortless scroll spy patterns, all without writing JavaScript.
-
-
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.
-
Chrome for Developers reposted this
The HTML-in-Canvas API is shaping up! 🏋️♀️ All thanks to developer feedback. Check out the updates here: https://lnkd.in/eaRUNATi
-
Swipe-to-remove is a gesture users expect from native apps. On the web, until lately, it needed a pile of touch-event JavaScript. We gave a coding agent the same prompt twice: once on its own, once with Modern Web Guidance installed. Watch them side-by-side → goo.gle/mwg With the guidance, the agent: ✅ Built the swipe with CSS scroll snap and web animations ✅ Checked each feature's Baseline status ✅ Added fallbacks for browsers that don't support the newer APIs yet
-
With Googlebooks bringing together Android app compatibility and ChromeOS desktop foundations, identifying these devices accurately in your web applications in Chrome is key for analytics and routing users to compatible experiences. Because User-Agent reduction keeps the standard UA string aligned with ChromeOS, the recommended detection path uses User-Agent Client Hints (UA-CH) 📱 Sec-CH-UA-Platform: "Android" 💻 Sec-CH-UA-Mobile: ?0 (False) Since these are low-entropy hints, you can capture them instantly on initial server requests (Node.js, Python, Java, Go, Ruby, PHP) or client-side via `navigator.userAgentData` without extra round-trips or special permissions. We’ve published a 1-page documentation overview and technical identification guide to help you update your detection logic today → https://goo.gle/3V7ON5U
-
-
August was a big month for feature availability across browsers 🌐 With Chrome 152 and Firefox 154, several key features have officially reached Baseline Newly Available. You can now take advantage of precise vertical text alignment using text-box properties, calculate dynamic layouts purely in CSS with sibling-count() and sibling-index(), and enjoy broader control over input forms with the global autocorrect attribute. Plus, Chrome 152 brings relative alpha colors with the alpha() function, CSSPseudoElement support for ::backdrop, and the standard window-drag property for desktop apps. Check out our blog post for full code snippets and browser support breakdowns → https://goo.gle/4iIdCis