![<description><p dir="ltr">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.</p> <p dir="ltr">Resources:<br /> :stuck, :snapped, :on-screen, etc → <a href= "https://goo.gle/3WVhSi6">https://goo.gle/3WVhSi6</a> </p> <p dir="ltr">state queries syntax → <a href= "https://goo.gle/3T2gI33">https://goo.gle/3T2gI33</a> </p> <p dir="ltr">explainer → <a href= "https://goo.gle/3XevW7x">https://goo.gle/3XevW7x</a> </p> <p dir="ltr">Intent To Prototype → <a href= "https://goo.gle/3Au8rOY">https://goo.gle/3Au8rOY</a> </p> <p dir="ltr">Scroll Snap Events → <a href= "https://goo.gle/47koXO1">https://goo.gle/47koXO1</a> </p> <p><strong> </strong></p> <p dir="ltr">Una Kravets (co-host)<br /> <a href="https://twitter.com/Una">Twitter</a> → <a href= "https://goo.gle/452aBRb">https://goo.gle/452aBRb</a><br /> <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> → <a href= "https://goo.gle/457oMnS">https://goo.gle/457oMnS</a> </p> <p dir="ltr">Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face Host of Tools Today → <a href= "https://goo.gle/4aI6JpC">https://goo.gle/4aI6JpC</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> <br /> Designing in the Browser</a> 🎬 → <a href= "https://goo.gle/4e4YTcM">https://goo.gle/4e4YTcM</a> </p> <p dir="ltr">Adam Argyle (co-host)<br /> <a href="https://twitter.com/argyleink">Twitter</a> → <a href= "https://goo.gle/3yFnHYu">https://goo.gle/3yFnHYu</a><br /> <a href="https://www.instagram.com/argyleink/">Instagram</a> → <a href="https://goo.gle/3wUb6QJ">https://goo.gle/3wUb6QJ</a><br /> <a href="https://a.nerdy.dev/youtube">YouTube</a> → <a href= "https://goo.gle/4dZNKK7">https://goo.gle/4dZNKK7</a> </p> <p dir="ltr"><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘<br /> CSSWG → <a href= "https://goo.gle/4bFErxq">https://goo.gle/4bFErxq</a><br /> VisBug → <a href= "https://goo.gle/4bDcVQZ">https://goo.gle/4bDcVQZ</a> </p> <p><strong> </strong></p> <p dir="ltr">The CSS Podcast</p> <p dir="ltr">#CSSpodcast</p> <p><strong> </strong></p> <p dir="ltr">Watch more <span data-rich-links= "{"dde_di":"kix.kv4yk58thqp3","dde-fdv":"The CSS Podcast","dde-sii":"dropdownItem.v3hpoutznh35","ddefe-ddi":{"cv":{"op":"set","opValue":[{"di-id":"dropdownItem.qly9quk1i2d","di-v":"Please Select","di-dv":"Please Select","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#ffcfc9"},"ts_fgc2":{"clr_type":0,"hclr_color":"#b10202"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.vlpr339db3ed","di-v":"New in Chrome","di-dv":"New in Chrome","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.3z7ohn67mwpu","di-v":"Chrome Dev Labs","di-dv":"Chrome Dev Labs","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.g6ptmrtvim72","di-v":"Chrome Passkeys","di-dv":"Chrome Passkeys","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.gwsgrhe4jvkq","di-v":"Chrome Shorts","di-dv":"Chrome Shorts","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.7in3u5yugut5","di-v":"ChromeOS Customer Stories","di-dv":"ChromeOS Customer Stories","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.4zzj72c17vmg","di-v":"Designing in the Browser","di-dv":"Designing in the Browser","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.h2qf4ep8sszt","di-v":"DevTools Tips","di-dv":"DevTools Tips","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.opik57z5gbsb","di-v":"GUI Challenges","di-dv":"GUI Challenges","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.rhpehaso3q1w","di-v":"What's New in DevTools","di-dv":"What's New in DevTools","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.56mgq24g6avu","di-v":"What is Privacy Sandbox?","di-dv":"What is Privacy Sandbox?","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.ecczfpc9pnpq","di-v":"GUI Snippets","di-dv":"GUI Snippets","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.v3hpoutznh35","di-v":"The CSS Podcast","di-dv":"The CSS Podcast","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}}]}},"ddefe-t":"Chrome Series","type":"dropdown"}"> The CSS Podcast</span> → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/</a><span data-rich-links="{"dde_di":"kix.ainnedpjmcik","dde-fdv":"CSSpodcast ","dde-sii":"dropdownItem.d74ii3f45nm5","ddefe-ddi":{"cv":{"op":"set","opValue":[{"di-id":"dropdownItem.qvxlzhrxyzcv","di-v":"Please Select","di-dv":"Please Select","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#ffcfc9"},"ts_fgc2":{"clr_type":0,"hclr_color":"#b10202"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.4wbsj0a6qb58","di-v":"cc","di-dv":"cc","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.d74ii3f45nm5","di-v":"CSSpodcast ","di-dv":"CSSpodcast ","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.yhje6bh6k62e","di-v":"DevToolsTips ","di-dv":"DevToolsTips ","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.dr2spzn8xdrk","di-v":"GUIchallenges","di-dv":"GUIchallenges","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.ymnfay1r0ysd","di-v":"NewInDevTools ","di-dv":"NewInDevTools ","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.6stx37ntbil5","di-v":"NewInChrome","di-dv":"NewInChrome","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.8l2ilcq3l6xx","di-v":"Privacy-Sandbox","di-dv":"Privacy-Sandbox","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}}]}},"ddefe-t":"Chrome Playlists","type":"dropdown"}"><a href="https://goo.gle/CSSpodcast">CSSpodcast</a> </span></p> <p dir="ltr">Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> <br /> <strong><br /></strong></p> <p dir="ltr">#CSSPodcast #ChromeForDevelopers #Chrome</p> <p><strong> </strong></p> <p dir="ltr">Speaker: Una Kravets, Adam Argyle</p></description>](https://us-central1-podcastguru-217d6.cloudfunctions.net/gcf_get_image?image_url=https://static.libsyn.com/p/assets/0/0/0/f/000f46d88b74118de55e3c100dce7605/unnamed_22-20240924-isyx55aeie.png&width=300&height=300&api_key=xqFmUFX5BHLBTA)
The CSS Podcast
The CSS Podcast
088: State queries
088: State queries
Description
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