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
In this episode Una and Adam explain anchor positioning and all its amazing features.
Resources: Introducing the CSS anchor positioning API → https://goo.gle/3SWrvM5
CSS anchor positioning → https://goo.gle/4dwgmd9
Tab’s talk from CSS Day → https://goo.gle/4ds8g5B
Una's Anchor Tool → https://goo.gle/3yDYDSd
Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
In this episode Una and Adam catch you up to the latest syntax features of CSS nesting.
Resources: Episode 47 → https://goo.gle/3SvM9T4 Episode 65 → https://goo.gle/3ygA7X1 CSS Nesting Update → https://goo.gle/3WHCRpK
Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects.
Resources:
Ep 22 on Animation → https://goo.gle/4frnp8y
linear() generator → https://goo.gle/46xs2JZ
Complex animation curves in CSS with linear() → https://goo.gle/4ftm0Oz
Open Props premade spring and bounce variables → https://goo.gle/46uaGOc
Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code.
Resources: text-wrap on MDN → https://goo.gle/3zvwixd
soft breaks → https://goo.gle/4cXKLAq
Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.
Resources: Ep 61 → https://goo.gle/4cID6pE
Piccali → https://goo.gle/4ePKJMG
Ahmad Shadeed → https://goo.gle/4bsk85F
The Looper → https://goo.gle/3yKmXkI
Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
In this episode Una and Adam provide a color update, covering changes to the specs and new functions.
Links RCS calc() tool → https://goo.gle/4cRRJHt
Apple Annie CSS Color Modules and Changes, Part I → https://goo.gle/3xtTr2A
Lea verou article on RCS for contrast → https://goo.gle/3L3x5YF
Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
In this episode Una and Adam share practical use cases, syntax and strategies for all the new math functions in CSS. From trig to algebra, they'll help you get a good idea on where and how these fit into your UI toolbelt.
Links Ana Tudor tests your browser for CSS math function support → https://goo.gle/4cmBm5r
Great guide and overview from Daniel Wilson → https://goo.gle/4enKgBe
layout pow() → https://goo.gle/3RlvAsI
Using Absolute Value, Sign, Rounding and Modulo in CSS Today → https://goo.gle/4aY3OJz
Time based animation → https://goo.gle/3x6Dm2K
CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → https://goo.gle/4bZyrj2
Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → https://goo.gle/45uqikj
CSS physics for transitions and keyframes with these math functions → https://goo.gle/3VltDgX Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations.
Links: top-layer CSS spec → https://goo.gle/4c2elUW Four new CSS features for smooth entry and exit animations by Una → https://goo.gle/3KpyB7e Using @starting-style and transition-behavior for enter and exit stage effects → https://goo.gle/452FG7p Popover on MDN → https://goo.gle/453xfss :popover-open on MDN → https://goo.gle/3x5XLVl Dialog and popover animated → https://goo.gle/3Kn1Ck7 Popover animated with nesting → https://goo.gle/3wW3Qns What is the top layer? → https://goo.gle/457rUjQ overlay property on MDN → https://goo.gle/3yKNRsT MDN demos → https://goo.gle/4c2eIyO Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
The CSS Podcast is back, with an episode highlighting the popover API and dialog element! Learn what they can do, and when to use which when.
Links Popover API lands in Baseline → https://goo.gle/3Vo2dIs Dialogs and popovers seem similar. How are they different? → https://goo.gle/3wXD1z5 Dialog dilemmas and modal mischief → https://goo.gle/3R9nmDE Semantics and the popover attribute → https://goo.gle/3Vl3NuM Building a dialog component GUI Challenges → https://goo.gle/4c0YFkK Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
I can’t believe we’re already at the end of season 4! This season, we’ve been focusing on CSS gotchas and resolving these common CSS pitfalls. And alas, on our last episode of the season, we’re going to take a look back at all of those tips and tricks and pick some of our favorites to highlight in this recap episode.
Links:
Why isn’t percentage working → https://goo.gle/418EnBG
Why isn’t my element stuck → https://goo.gle/3uSX7Jk
Why isn’t my custom property the value I expect → https://goo.gle/47BcZPj
How do I center a div → https://goo.gle/3RiOBLA
Why isn’t my animation glitching → https://goo.gle/4a5fzPh
Una Kravets (co-host)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
Your feedback is valuable to us. Should you encounter any bugs, glitches, lack of functionality or other problems, please email us on [email protected] or join Moon.FM Telegram Group where you can talk directly to the dev team who are happy to answer any queries.