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.
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
-
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
-
Chrome for Developers reposted this
"Responsive iframes" are now available in Chrome 154, letting an iframe size itself to fit the content of the document it embeds. Until now, embeds with changing heights, like comment widgets or social posts, meant measuring the content, sending the size to the parent page with postMessage(), and resizing the iframe by hand. Now the embedding page sets frame-sizing: content-height in CSS, and the embedded document opts in with <meta name="responsive-embedded-sizing">. If the content changes later, call window.requestResize() to update the size. For cross-origin embeds, allow-origins controls which sites can use the content size. For now this works only in Chrome and isn't Baseline yet. Also watch out for layout shifts that can hurt CLS. With @supports, you can keep your current approach as a fallback and adopt this step by step. Details and a demo: https://lnkd.in/gDAEZJ2e Authors: Bramus Van Damme , Dr. Sebastian Benz
-
Chrome for Developers reposted this
New video 🎉 I've mentioned Modern Web Guidance once or twice here 👀 AI coding agents write code the common way, not the best way. And, they don't know about recent web platform changes. That's the gap Modern Web Guidance closes, and we've just launched a video series showing some of the individual guides 🎉 Creating these videos has been a journeyyy, so I'd love to hear what you think. All feedback welcome 😀 Link in the first comment 👇
-
-
This episode of The CSS Podcast explores state-based container queries for JavaScript-less UI features → https://goo.gle/4d53htk Container queries have evolved beyond size and style checks! Hosts Una Kravets and Bramus break down the power of scroll state queries, including stuck, snapped, and scrollable states. Learn how these new CSS features allow you to build interactive components like sticky headers, active carousel items, and overflow indicators natively in CSS, eliminating the need for heavy JavaScript scroll listeners. Tune in to upgrade your web styling toolkit.
-