088: State queries
Listen now
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
More Episodes
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...
Published 10/03/24
Published 10/03/24
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...
Published 09/26/24