Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation. What a year for CSS! Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨  Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬  Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><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; 💀🤘

<description>&lt;div dir="ltr" align="left"&gt; &lt;table&gt; &lt;colgroup&gt; &lt;col width="554" /&gt;&lt;/colgroup&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;p dir="ltr"&gt;Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation. What a year for CSS!&lt;/p&gt; &lt;p dir="ltr"&gt;Una Kravets (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/Una"&gt;Twitter&lt;/a&gt; | &lt;a href= "http://instagram.com/unakrav"&gt;Instagram&lt;/a&gt; | &lt;a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"&gt;YouTube&lt;br /&gt; &lt;/a&gt;Making the web more colorful ✨🎨  Web DevRel &lt;a href= "https://twitter.com/googlechrome"&gt;@googlechrome&lt;/a&gt; Unicorn face host of &lt;a href="https://twitter.com/toolsday"&gt;@toolsday&lt;/a&gt; &amp; &lt;a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&amp;redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&amp;event=video_description&amp;v=Irp6R69pZGA"&gt; Designing in the Browser&lt;/a&gt; 🎬 &lt;/p&gt; &lt;strong id= "docs-internal-guid-8cd29415-7fff-143a-61fa-649aeb965be9"&gt;Adam Argyle (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/argyleink"&gt;Twitter&lt;/a&gt; | &lt;a href= "https://www.instagram.com/argyleink/"&gt;Instagram&lt;/a&gt; | &lt;a href= "https://a.nerdy.dev/youtube"&gt;YouTube&lt;br /&gt;&lt;/a&gt;&lt;a href= "https://twitter.com/GoogleChrome"&gt;@GoogleChrome&lt;/a&gt; CSS DevRel; &lt;a href="https://twitter.com/CSSWG"&gt;@CSSWG&lt;/a&gt;; &lt;a href= "https://a.nerdy.dev/gimme-visbug"&gt;VisBug&lt;/a&gt; maker; punk; CSS/JS/UX addict; 💀🤘&lt;/strong&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;p&gt; &lt;/p&gt;</description>

Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring,...

091: Season 5 Wrap-up

In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers.   Resources: Bramus's Demos: All mentioned Demos + Tools + Video Course + DevTools Extension link → <a href= "https://goo.gle/3Uw31up">https://goo.gle/3Uw31up</a>  Video Course direct link: <a href= "https://goo.gle/learn-scroll-driven-animations">https://goo.gle/learn-scroll-driven-animations</a>   Adam's Demos: scroll() the hue wheel → <a href= "https://goo.gle/4emb3NO">https://goo.gle/4emb3NO</a>  CSS scroll() feature time warp → <a href= "https://goo.gle/4exH3yv">https://goo.gle/4exH3yv</a>  view() long bento list → <a href= "https://goo.gle/4gtcCLx">https://goo.gle/4gtcCLx</a>  view() scrolly telling → <a href= "https://goo.gle/3TAq2vA">https://goo.gle/3TAq2vA</a>  view() iOS-like app switcher → <a href= "https://goo.gle/4etvCI6">https://goo.gle/4etvCI6</a>  view() variable font animation → <a href= "https://goo.gle/4e8eJmd">https://goo.gle/4e8eJmd</a>    Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨  Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA">Designing in the Browser</a> 🎬  Adam Argyle (co-host) <a href= "https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube </a><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; 💀🤘

<description>&lt;p dir="ltr"&gt;In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers.&lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Resources:&lt;/p&gt; &lt;p dir="ltr"&gt;Bramus's Demos:&lt;/p&gt; &lt;p dir="ltr"&gt;All mentioned Demos + Tools + Video Course + DevTools Extension link → &lt;a href= "https://goo.gle/3Uw31up"&gt;https://goo.gle/3Uw31up&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Video Course direct link: &lt;a href= "https://goo.gle/learn-scroll-driven-animations"&gt;https://goo.gle/learn-scroll-driven-animations&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Adam's Demos:&lt;/p&gt; &lt;p dir="ltr"&gt;scroll() the hue wheel → &lt;a href= "https://goo.gle/4emb3NO"&gt;https://goo.gle/4emb3NO&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;CSS scroll() feature time warp → &lt;a href= "https://goo.gle/4exH3yv"&gt;https://goo.gle/4exH3yv&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;view() long bento list → &lt;a href= "https://goo.gle/4gtcCLx"&gt;https://goo.gle/4gtcCLx&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;view() scrolly telling → &lt;a href= "https://goo.gle/3TAq2vA"&gt;https://goo.gle/3TAq2vA&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;view() iOS-like app switcher → &lt;a href= "https://goo.gle/4etvCI6"&gt;https://goo.gle/4etvCI6&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;view() variable font animation → &lt;a href= "https://goo.gle/4e8eJmd"&gt;https://goo.gle/4e8eJmd&lt;/a&gt; &lt;/p&gt; &lt;p&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Una Kravets (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/Una"&gt;Twitter&lt;/a&gt; | &lt;a href= "http://instagram.com/unakrav"&gt;Instagram&lt;/a&gt; | &lt;a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"&gt;YouTube&lt;br /&gt; &lt;/a&gt;Making the web more colorful ✨🎨  Web DevRel &lt;a href= "https://twitter.com/googlechrome"&gt;@googlechrome&lt;/a&gt; Unicorn face host of &lt;a href= "https://twitter.com/toolsday"&gt;@toolsday&lt;/a&gt; &amp; &lt;a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&amp;redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&amp;event=video_description&amp;v=Irp6R69pZGA"&gt;Designing in the Browser&lt;/a&gt; 🎬 &lt;/p&gt; &lt;p dir="ltr"&gt;Adam Argyle (co-host)&lt;br /&gt; &lt;a href= "https://twitter.com/argyleink"&gt;Twitter&lt;/a&gt; | &lt;a href= "https://www.instagram.com/argyleink/"&gt;Instagram&lt;/a&gt; | &lt;a href="https://a.nerdy.dev/youtube"&gt;YouTube&lt;br /&gt; &lt;/a&gt;&lt;a href= "https://twitter.com/GoogleChrome"&gt;@GoogleChrome&lt;/a&gt; CSS DevRel; &lt;a href= "https://twitter.com/CSSWG"&gt;@CSSWG&lt;/a&gt;; &lt;a href= "https://a.nerdy.dev/gimme-visbug"&gt;VisBug&lt;/a&gt; maker; punk; CSS/JS/UX addict; 💀🤘&lt;/p&gt;</description>

In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll...

090: Scroll-driven animations

In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos.  Resources: Developer Documentation → <a href= "https://goo.gle/4aHY7zo">https://goo.gle/4aHY7zo</a>  Quick intro to View Transitions (Google I/O 2023 video) → <a href= "https://goo.gle/3ZieRLp">https://goo.gle/3ZieRLp</a>  What's new in View Transitions? (Google I/O 2024 video) → <a href= "https://goo.gle/3zeYNj3">https://goo.gle/3zeYNj3</a>  Misconceptions about View Transitions → <a href= "https://goo.gle/3Tpsu7O">https://goo.gle/3Tpsu7O</a>  Bramus's Demos: Collection of various demos, both SPA and MPA → <a href= "https://goo.gle/3B4edY8">https://goo.gle/3B4edY8</a>  Accordion → <a href= "https://goo.gle/3B4egDi">https://goo.gle/3B4egDi</a>     Adam's Demos: Grid gallery → <a href= "https://goo.gle/4giz0XV">https://goo.gle/4giz0XV</a>  Always great grid → <a href= "https://goo.gle/3MH68Lu">https://goo.gle/3MH68Lu</a>  Flexbox visualizer → <a href= "https://goo.gle/47kmJOB">https://goo.gle/47kmJOB</a>  Editable tabs → <a href= "https://goo.gle/4ghNfMx">https://goo.gle/4ghNfMx</a>  Dollar number input → <a href= "https://goo.gle/4e0FsBf">https://goo.gle/4e0FsBf</a>  Stateful morphing button → <a href= "https://goo.gle/4ebBNR2">https://goo.gle/4ebBNR2</a>  Drag and Drop → <a href= "https://goo.gle/3XlP2Yn">https://goo.gle/3XlP2Yn</a>  Isotope recreation → <a href= "https://goo.gle/4dVX5lN">https://goo.gle/4dVX5lN</a>  Local development animated → <a href= "https://goo.gle/3XHjm17">https://goo.gle/3XHjm17</a>    Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> → <a href= "https://goo.gle/452aBRb">https://goo.gle/452aBRb</a> <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> → <a href= "https://goo.gle/457oMnS">https://goo.gle/457oMnS</a> 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"> Designing in the Browser</a> 🎬  → <a href= "https://goo.gle/4e4YTcM">https://goo.gle/4e4YTcM</a>    Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> → <a href= "https://goo.gle/3yFnHYu">https://goo.gle/3yFnHYu</a> <a href="https://www.instagram.com/argyleink/">Instagram</a> → <a href="https://goo.gle/3wUb6QJ">https://goo.gle/3wUb6QJ</a> <a href="https://a.nerdy.dev/youtube">YouTube</a> → <a href= "https://goo.gle/4dZNKK7">https://goo.gle/4dZNKK7</a> <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; 💀🤘 CSSWG → <a href= "https://goo.gle/4bFErxq">https://goo.gle/4bFErxq</a> VisBug → <a href= "https://goo.gle/4bDcVQZ">https://goo.gle/4bDcVQZ</a>     The CSS Podcast  #CSSpodcast

<description>&lt;p dir="ltr"&gt;In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos. &lt;/p&gt; &lt;p dir="ltr"&gt;Resources:&lt;br /&gt; Developer Documentation → &lt;a href= "https://goo.gle/4aHY7zo"&gt;https://goo.gle/4aHY7zo&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Quick intro to View Transitions (Google I/O 2023 video) → &lt;a href= "https://goo.gle/3ZieRLp"&gt;https://goo.gle/3ZieRLp&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;What's new in View Transitions? (Google I/O 2024 video) → &lt;a href= "https://goo.gle/3zeYNj3"&gt;https://goo.gle/3zeYNj3&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Misconceptions about View Transitions → &lt;a href= "https://goo.gle/3Tpsu7O"&gt;https://goo.gle/3Tpsu7O&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;&lt;br /&gt; Bramus's Demos:&lt;br /&gt; Collection of various demos, both SPA and MPA → &lt;a href= "https://goo.gle/3B4edY8"&gt;https://goo.gle/3B4edY8&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Accordion → &lt;a href= "https://goo.gle/3B4egDi"&gt;https://goo.gle/3B4egDi&lt;/a&gt; &lt;/p&gt; &lt;p&gt;&lt;strong&gt;  &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Adam's Demos:&lt;br /&gt; Grid gallery → &lt;a href= "https://goo.gle/4giz0XV"&gt;https://goo.gle/4giz0XV&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Always great grid → &lt;a href= "https://goo.gle/3MH68Lu"&gt;https://goo.gle/3MH68Lu&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Flexbox visualizer → &lt;a href= "https://goo.gle/47kmJOB"&gt;https://goo.gle/47kmJOB&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Editable tabs → &lt;a href= "https://goo.gle/4ghNfMx"&gt;https://goo.gle/4ghNfMx&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Dollar number input → &lt;a href= "https://goo.gle/4e0FsBf"&gt;https://goo.gle/4e0FsBf&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Stateful morphing button → &lt;a href= "https://goo.gle/4ebBNR2"&gt;https://goo.gle/4ebBNR2&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Drag and Drop → &lt;a href= "https://goo.gle/3XlP2Yn"&gt;https://goo.gle/3XlP2Yn&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Isotope recreation → &lt;a href= "https://goo.gle/4dVX5lN"&gt;https://goo.gle/4dVX5lN&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Local development animated → &lt;a href= "https://goo.gle/3XHjm17"&gt;https://goo.gle/3XHjm17&lt;/a&gt; &lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Una Kravets (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/Una"&gt;Twitter&lt;/a&gt; → &lt;a href= "https://goo.gle/452aBRb"&gt;https://goo.gle/452aBRb&lt;/a&gt;&lt;br /&gt; &lt;a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"&gt;YouTube&lt;/a&gt; → &lt;a href= "https://goo.gle/457oMnS"&gt;https://goo.gle/457oMnS&lt;/a&gt;&lt;br /&gt; Making the web more colorful ✨🎨  Web DevRel &lt;a href= "https://twitter.com/googlechrome"&gt;@googlechrome&lt;/a&gt; Unicorn face Host of Tools Today → &lt;a href= "https://goo.gle/4aI6JpC"&gt;https://goo.gle/4aI6JpC&lt;/a&gt; &amp; &lt;a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&amp;redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&amp;event=video_description&amp;v=Irp6R69pZGA"&gt; &lt;br /&gt; Designing in the Browser&lt;/a&gt; 🎬  → &lt;a href= "https://goo.gle/4e4YTcM"&gt;https://goo.gle/4e4YTcM&lt;/a&gt; &lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Adam Argyle (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/argyleink"&gt;Twitter&lt;/a&gt; → &lt;a href= "https://goo.gle/3yFnHYu"&gt;https://goo.gle/3yFnHYu&lt;/a&gt;&lt;br /&gt; &lt;a href="https://www.instagram.com/argyleink/"&gt;Instagram&lt;/a&gt; → &lt;a href="https://goo.gle/3wUb6QJ"&gt;https://goo.gle/3wUb6QJ&lt;/a&gt;&lt;br /&gt; &lt;a href="https://a.nerdy.dev/youtube"&gt;YouTube&lt;/a&gt; → &lt;a href= "https://goo.gle/4dZNKK7"&gt;https://goo.gle/4dZNKK7&lt;/a&gt;&lt;br /&gt; &lt;a href="https://twitter.com/GoogleChrome"&gt;@GoogleChrome&lt;/a&gt; CSS DevRel; &lt;a href="https://twitter.com/CSSWG"&gt;@CSSWG&lt;/a&gt;; &lt;a href= "https://a.nerdy.dev/gimme-visbug"&gt;VisBug&lt;/a&gt; maker; punk; CSS/JS/UX addict; 💀🤘&lt;br /&gt; CSSWG → &lt;a href= "https://goo.gle/4bFErxq"&gt;https://goo.gle/4bFErxq&lt;/a&gt;&lt;br /&gt; VisBug → &lt;a href= "https://goo.gle/4bDcVQZ"&gt;https://goo.gle/4bDcVQZ&lt;/a&gt;    &lt;/p&gt; &lt;p dir="ltr"&gt;The CSS Podcast &lt;br /&gt; #CSSpodcast&lt;/p&gt; &lt;p&gt; &lt;/p&gt;</description>

In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to...

089: View transitions

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 → <a href= "https://goo.gle/3WVhSi6">https://goo.gle/3WVhSi6</a>   state queries syntax → <a href= "https://goo.gle/3T2gI33">https://goo.gle/3T2gI33</a>  explainer → <a href= "https://goo.gle/3XevW7x">https://goo.gle/3XevW7x</a>  Intent To Prototype → <a href= "https://goo.gle/3Au8rOY">https://goo.gle/3Au8rOY</a>  Scroll Snap Events → <a href= "https://goo.gle/47koXO1">https://goo.gle/47koXO1</a>     Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> → <a href= "https://goo.gle/452aBRb">https://goo.gle/452aBRb</a> <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> → <a href= "https://goo.gle/457oMnS">https://goo.gle/457oMnS</a>  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"> Designing in the Browser</a> 🎬  → <a href= "https://goo.gle/4e4YTcM">https://goo.gle/4e4YTcM</a>  Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> → <a href= "https://goo.gle/3yFnHYu">https://goo.gle/3yFnHYu</a> <a href="https://www.instagram.com/argyleink/">Instagram</a> → <a href="https://goo.gle/3wUb6QJ">https://goo.gle/3wUb6QJ</a> <a href="https://a.nerdy.dev/youtube">YouTube</a> → <a href= "https://goo.gle/4dZNKK7">https://goo.gle/4dZNKK7</a>  <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; 💀🤘 CSSWG → <a href= "https://goo.gle/4bFErxq">https://goo.gle/4bFErxq</a> VisBug → <a href= "https://goo.gle/4bDcVQZ">https://goo.gle/4bDcVQZ</a>       The CSS Podcast #CSSpodcast   Watch more The CSS Podcast → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/</a><a href="https://goo.gle/CSSpodcast">CSSpodcast</a>  Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>  #CSSPodcast #ChromeForDevelopers #Chrome   Speaker: Una Kravets, Adam Argyle

<description>&lt;p dir="ltr"&gt;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.&lt;/p&gt; &lt;p dir="ltr"&gt;Resources:&lt;br /&gt; :stuck, :snapped, :on-screen, etc → &lt;a href= "https://goo.gle/3WVhSi6"&gt;https://goo.gle/3WVhSi6&lt;/a&gt;  &lt;/p&gt; &lt;p dir="ltr"&gt;state queries syntax → &lt;a href= "https://goo.gle/3T2gI33"&gt;https://goo.gle/3T2gI33&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;explainer → &lt;a href= "https://goo.gle/3XevW7x"&gt;https://goo.gle/3XevW7x&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Intent To Prototype → &lt;a href= "https://goo.gle/3Au8rOY"&gt;https://goo.gle/3Au8rOY&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Scroll Snap Events → &lt;a href= "https://goo.gle/47koXO1"&gt;https://goo.gle/47koXO1&lt;/a&gt;  &lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Una Kravets (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/Una"&gt;Twitter&lt;/a&gt; → &lt;a href= "https://goo.gle/452aBRb"&gt;https://goo.gle/452aBRb&lt;/a&gt;&lt;br /&gt; &lt;a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"&gt;YouTube&lt;/a&gt; → &lt;a href= "https://goo.gle/457oMnS"&gt;https://goo.gle/457oMnS&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Making the web more colorful ✨🎨  Web DevRel &lt;a href="https://twitter.com/googlechrome"&gt;@googlechrome&lt;/a&gt; Unicorn face Host of Tools Today → &lt;a href= "https://goo.gle/4aI6JpC"&gt;https://goo.gle/4aI6JpC&lt;/a&gt; &amp; &lt;a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&amp;redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&amp;event=video_description&amp;v=Irp6R69pZGA"&gt; &lt;br /&gt; Designing in the Browser&lt;/a&gt; 🎬  → &lt;a href= "https://goo.gle/4e4YTcM"&gt;https://goo.gle/4e4YTcM&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Adam Argyle (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/argyleink"&gt;Twitter&lt;/a&gt; → &lt;a href= "https://goo.gle/3yFnHYu"&gt;https://goo.gle/3yFnHYu&lt;/a&gt;&lt;br /&gt; &lt;a href="https://www.instagram.com/argyleink/"&gt;Instagram&lt;/a&gt; → &lt;a href="https://goo.gle/3wUb6QJ"&gt;https://goo.gle/3wUb6QJ&lt;/a&gt;&lt;br /&gt; &lt;a href="https://a.nerdy.dev/youtube"&gt;YouTube&lt;/a&gt; → &lt;a href= "https://goo.gle/4dZNKK7"&gt;https://goo.gle/4dZNKK7&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;&lt;a href= "https://twitter.com/GoogleChrome"&gt;@GoogleChrome&lt;/a&gt; CSS DevRel; &lt;a href="https://twitter.com/CSSWG"&gt;@CSSWG&lt;/a&gt;; &lt;a href= "https://a.nerdy.dev/gimme-visbug"&gt;VisBug&lt;/a&gt; maker; punk; CSS/JS/UX addict; 💀🤘&lt;br /&gt; CSSWG → &lt;a href= "https://goo.gle/4bFErxq"&gt;https://goo.gle/4bFErxq&lt;/a&gt;&lt;br /&gt; VisBug → &lt;a href= "https://goo.gle/4bDcVQZ"&gt;https://goo.gle/4bDcVQZ&lt;/a&gt;    &lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;The CSS Podcast&lt;/p&gt; &lt;p dir="ltr"&gt;#CSSpodcast&lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Watch more &lt;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"}"&gt; The CSS Podcast&lt;/span&gt; → &lt;a href= "https://goo.gle/CSSpodcast"&gt;https://goo.gle/&lt;/a&gt;&lt;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"}"&gt;&lt;a href="https://goo.gle/CSSpodcast"&gt;CSSpodcast&lt;/a&gt; &lt;/span&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Subscribe to Chrome for Developers → &lt;a href= "https://goo.gle/ChromeDevs"&gt;https://goo.gle/ChromeDevs&lt;/a&gt; &lt;br /&gt; &lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;#CSSPodcast #ChromeForDevelopers #Chrome&lt;/p&gt; &lt;p&gt;&lt;strong&gt; &lt;/strong&gt;&lt;/p&gt; &lt;p dir="ltr"&gt;Speaker: Una Kravets, Adam Argyle&lt;/p&gt;</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...

088: State queries

In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → <a href= "https://goo.gle/3SWrvM5">https://goo.gle/3SWrvM5</a>  CSS anchor positioning → <a href= "https://goo.gle/4dwgmd9">https://goo.gle/4dwgmd9</a>  <a href= "https://www.youtube.com/watch?v=p18LhnYNkDQ&list=PLjnstNlepBvO0-I7iwqpkOY_fwAop6Pl-&index=11"> Tab’s talk from CSS Day</a> → <a href= "https://goo.gle/4ds8g5B">https://goo.gle/4ds8g5B</a>  Una's Anchor Tool → <a href= "https://goo.gle/3yDYDSd">https://goo.gle/3yDYDSd</a>  Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨  Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬  Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><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; 💀🤘

<description>&lt;p dir="ltr"&gt;In this episode Una and Adam explain anchor positioning and all its amazing features.&lt;/p&gt; &lt;p dir="ltr"&gt;Resources:&lt;br /&gt; Introducing the CSS anchor positioning API → &lt;a href= "https://goo.gle/3SWrvM5"&gt;https://goo.gle/3SWrvM5&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;CSS anchor positioning → &lt;a href= "https://goo.gle/4dwgmd9"&gt;https://goo.gle/4dwgmd9&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;&lt;a href= "https://www.youtube.com/watch?v=p18LhnYNkDQ&amp;list=PLjnstNlepBvO0-I7iwqpkOY_fwAop6Pl-&amp;index=11"&gt; Tab’s talk from CSS Day&lt;/a&gt; → &lt;a href= "https://goo.gle/4ds8g5B"&gt;https://goo.gle/4ds8g5B&lt;/a&gt; &lt;/p&gt; &lt;p dir="ltr"&gt;Una's Anchor Tool → &lt;a href= "https://goo.gle/3yDYDSd"&gt;https://goo.gle/3yDYDSd&lt;/a&gt; &lt;br /&gt; &lt;br /&gt;&lt;/p&gt; &lt;div dir="ltr" align="left"&gt; &lt;table&gt; &lt;colgroup&gt; &lt;col width="554" /&gt;&lt;/colgroup&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;p dir="ltr"&gt;Una Kravets (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/Una"&gt;Twitter&lt;/a&gt; | &lt;a href= "http://instagram.com/unakrav"&gt;Instagram&lt;/a&gt; | &lt;a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"&gt;YouTube&lt;br /&gt; &lt;/a&gt;Making the web more colorful ✨🎨  Web DevRel &lt;a href= "https://twitter.com/googlechrome"&gt;@googlechrome&lt;/a&gt; Unicorn face host of &lt;a href="https://twitter.com/toolsday"&gt;@toolsday&lt;/a&gt; &amp; &lt;a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&amp;redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&amp;event=video_description&amp;v=Irp6R69pZGA"&gt; Designing in the Browser&lt;/a&gt; 🎬 &lt;/p&gt; &lt;p dir="ltr"&gt;Adam Argyle (co-host)&lt;br /&gt; &lt;a href="https://twitter.com/argyleink"&gt;Twitter&lt;/a&gt; | &lt;a href= "https://www.instagram.com/argyleink/"&gt;Instagram&lt;/a&gt; | &lt;a href= "https://a.nerdy.dev/youtube"&gt;YouTube&lt;br /&gt;&lt;/a&gt;&lt;a href= "https://twitter.com/GoogleChrome"&gt;@GoogleChrome&lt;/a&gt; CSS DevRel; &lt;a href="https://twitter.com/CSSWG"&gt;@CSSWG&lt;/a&gt;; &lt;a href= "https://a.nerdy.dev/gimme-visbug"&gt;VisBug&lt;/a&gt; maker; punk; CSS/JS/UX addict; 💀🤘&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;p dir="ltr"&gt; &lt;/p&gt;</description>

In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API →   CSS anchor positioning →    →   Una's Anchor Tool →           Una Kravets...

087: Anchor positioning

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

The CSS Podcast

Details

Recent Episodes