Dynamic and adaptable designs with CSS Container Queries // TRAIN BRAIN

Dynamic and adaptable designs with CSS Container Queries

Unlock the power of dynamic layouts with CSS Container Queries. Learn how to adapt your web designs seamlessly to any container size. You’ll have unprecedented control over your layouts to unlock the true component-driven design!
Resources:
Container queries land in stable browsers → https://goo.gle/cq-stable
Baseline → https://goo.gle/baseline-webdev
Watch more This is Baseline → https://goo.gle/TiB
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome
Products Mentioned: Baseline, Baseline APIs, Chrome

Chrome for Developers

Making the web more awesome....

scheduler.yield API

Re-imagine the web with scroll-driven animations

Dynamic and adaptable designs with CSS Container Queries

Boost your workflow with File System Observer

CSSNestedDeclarations

Help us fix the Chrome DevTools plane with AI assistance #DevToolsAI

Simpler sign-ins, stronger security with passkeys

MediaPipe Web: Bringing cross-platform AI tech to the browser

ML training on the web: Building Simple ML for Google Sheets

Transforming access to healthcare through Web AI

Declarative Shadow DOM: Hello HTML

Beyond the banner: The power of Web AI to personalize paid rich media ads

Why are Web Extensions fantastic for AI?

The future of AI is now: Real-life case studies for on client-side AI adoption in web apps

Web AI in industry: How TensorFlow.js has driven what you see on the supermarket shelves

Lessons learned from being customer zero of Chrome's built-in APIs

Styling improvements to details and summary elements

AI assistance helps aligning things in CSS #DevToolsAI

Overview of Chrome built-in AI

Exploring alternative interactions in JavaScript

Visual Blocks: Visual prototyping of AI pipelines

State isn't all you need, but It helps: building better LLM apps in the browse"

WebLLM: A high-performance in-browser LLM Inference engine

Accurately segment text in different language with Intl.Segmenter

CSS highlight inheritance is changing

Squishy Wasm apps using Extism with Dylibso's Steve Manuel - WasmAssembly

Live metrics in Performance panel #DevToolTips

Modern CSS for sites: View transitions, scroll effects, and more!

CSS light-dark function

New in Chrome 131: external CSS highlight inheritance, improvements to details, and more!

ml5.js - Friendly machine learning for the web

Web AI on next generation AI PCs

The Web Neural Network (WebNN) API: Where we are and what's Next

Transformers.js: State-of-the-art Machine Learning for the web

Web AI Summit 2024: State of client side machine learning

Build confidently with Baseline

Monitor live Core Web Vitals in Chrome DevTools #DevToolsTips

Supercharge your forms with the Constraint Validation API

CSS property: box-decoration-break

The future of third-party cookies

A deep dive into WebAssembly with Thomas Nattestad - WasmAssembly

Preparing for Chrome’s third-party cookie changes

What are third-party cookies?

Behind the Chrome Web Store review process

Manage your JavaScript with Import Map

Document picture-in-picture improvements

Navigating the future of third-party cookies

An experience for user choice with third-party cookies

What is a Remote Hosted Code?

Test your site for third-party cookie breakages

Elevate UX with the Screen Wake Lock API

New in Chrome 130: Document Picture-in-Picture, CSS nesting improvements, and more!

Customize performance data in DevTools with extensibility API #DevToolsTips

Chrome shifts to user choice for third-party cookies

Special episode on the June meeting of the WebAssembly Community Group - WasmAssembly

Time to check your site for third-party cookies

Third-party cookies and the era of user choice

Build a custom chrome cursor

Intro to Long Animation Frames (LoAFs)

Subgrid: Stress-free, flexible grid layouts

Looking back on Season 5

Real-time metrics in the Performance panel #DevToolsTips

An introduction to WebAssembly

091: Season 5 wrap-up

Interactive pop-ups using dialog element and popover attribute

Visit scroll-driven-animations.style

Animate intrinsic sized elements with interpolate-size

Real-time metrics in the Performance panel

Exploring the Bytecode Alliance with Cosmonic's Hailey Bayes - WasmAssembly

090: Scroll-driven animations

Anchoring experiences

What are view transitions?

Yield long tasks with scheduler.yield()

Built-in AI: Gemini Nano in Chrome

089: View transitions

State queries in CSS

What’s new in DevTools: Chrome 127-129

New in Chrome 129: Yield long tasks, animate intrinsic sized elements, and more!

088: State queries

Simulate low storage quota with DevTools #DevToolsTips