088: State queries // TRAIN BRAIN

088: State queries

In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS, this feature will be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky.
Resources:
:stuck, :snapped, :on-screen, etc → https://goo.gle/3WVhSi6
state queries syntax → https://goo.gle/3T2gI33
explainer → https://goo.gle/3XevW7x
Intent To Prototype → https://goo.gle/3Au8rOY
Scroll Snap Events → https://goo.gle/47koXO1
Una Kravets (co-host)
Twitter → https://goo.gle/452aBRb
YouTube → https://goo.gle/457oMnS
Making the web more colorful ✨? Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC &
Designing in the Browser ? → https://goo.gle/4e4YTcM
Adam Argyle (co-host)
Twitter → https://goo.gle/3yFnHYu
Instagram → https://goo.gle/3wUb6QJ
YouTube → https://goo.gle/4dZNKK7
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; ??
CSSWG → https://goo.gle/4bFErxq
VisBug → https://goo.gle/4bDcVQZ
The CSS Podcast
#CSSpodcast
Watch more The CSS Podcast → https://goo.gle/CSSpodcast
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#CSSPodcast #ChromeForDevelopers #Chrome
Speaker: Una Kravets, Adam Argyle

Chrome for Developers

Making the web more awesome....

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

Over-Easy Anchor + Popover Mini Web Machine

Promise.try

Caching demystified: Inspect, clear, and disable caches #DevToolsTips

Distinguishing the anchor from the positioned element

Line-breaks for the ruby element

A promising feature: JavaScript Promise Integration with Francis McCabe - WasmAssembly

087: Anchor positioning

Learn how to transition dialog elements with the Pop n’ Lock Mini Web Machine

New in Chrome 128: line-breaks for the ruby element, Promise.try, and more

What are content scripts?

Top 10 web updates from Google I/O ‘24

Say goodbye to the & symbol for nesting bare HTML elements

Create bounce and spring effects with linear()

String built-ins with Mozilla's Ryan Hunt - WasmAssembly

085: Linear easing function fun

How to inspect disappearing elements

How to add a custom cursor to Chrome

Pop n' Lock Dialog Mini Web Machine

CSS font-size-adjust

Freeze screen & inspect disappearing elements #DevToolsTips

New in Chrome 127: cross-document view transitions, CloseWatcher API re-enabled, and more

Testing best practices for web apps

Professional text wrapping with one line of CSS

084: Text Wrap

Save time with the has() selector

083: :has() tips and tricks

The updates to color in CSS

What is a Remote Hosted Code?

082: What's new in color & color functions

What’s new in DevTools: Chrome 124-126

Math functions in CSS

Gamepad API trigger-rumble extension

The WASI Revolution: Luke Wagner on WebAssembly's Past, Present, and Future

081: Trigonometric Functions

Animating dialogs and popovers to and from top-layer

View Transitions API

080: Animating to and from top-layer

What is Chrome?

Dialog over a popover #CSSPodcast

New in Chrome 126: Cross-document view transitions, CloseWatcher API re-enabled and more

079: Popover and Dialog

Test UI changes with overrides in Chrome DevTools

3 new ways to customize the DevTools Performance panel (Part 2)

3 new ways to customize the DevTools Performance panel (Part 3)

3 new ways to customize the DevTools Performance panel (Part 1)

What’s the Looper-Pile Mini Web Machine?

Chrome user, Chrome profile, Chrome client