The CSS Podcast

Welcome back to the new season of the CSS Podcast, where Una and Bramus are your guides, your cohosts, and your CSS best friends. In this episode we dig into two very powerful new CSS features: inline conditionals  with the if() function, and custom functions. Resources: CSS if() function specification → https://goo.gle/3IBChWo Article on if() by Una → https://goo.gle/4nUxIp2 Article on if() by Lea Verou → https://goo.gle/4nt2UvS CSS mixins specification →  https://goo.gle/48H8SEH Article on @function by Una → https://goo.gle/48H99rd Article on @function and if() by Bramus → https://goo.gle/46qPbzy The CSS Space Toggle by Chris Coyier → https://goo.gle/4874qio  Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬  Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube | Website@GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

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) 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 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 → https://goo.gle/3Uw31up  Video Course direct link: https://goo.gle/learn-scroll-driven-animations   Adam's Demos: scroll() the hue wheel → https://goo.gle/4emb3NO  CSS scroll() feature time warp → https://goo.gle/4exH3yv  view() long bento list → https://goo.gle/4gtcCLx  view() scrolly telling → https://goo.gle/3TAq2vA  view() iOS-like app switcher → https://goo.gle/4etvCI6  view() variable font animation → https://goo.gle/4e8eJmd    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 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 → https://goo.gle/4aHY7zo  Quick intro to View Transitions (Google I/O 2023 video) → https://goo.gle/3ZieRLp  What's new in View Transitions? (Google I/O 2024 video) → https://goo.gle/3zeYNj3  Misconceptions about View Transitions → https://goo.gle/3Tpsu7O  Bramus's Demos: Collection of various demos, both SPA and MPA → https://goo.gle/3B4edY8  Accordion → https://goo.gle/3B4egDi     Adam's Demos: Grid gallery → https://goo.gle/4giz0XV  Always great grid → https://goo.gle/3MH68Lu  Flexbox visualizer → https://goo.gle/47kmJOB  Editable tabs → https://goo.gle/4ghNfMx  Dollar number input → https://goo.gle/4e0FsBf  Stateful morphing button → https://goo.gle/4ebBNR2  Drag and Drop → https://goo.gle/3XlP2Yn  Isotope recreation → https://goo.gle/4dVX5lN  Local development animated → https://goo.gle/3XHjm17    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  

Discover the innovative concept of state queries in CSS, a powerful tool for assessing an element's internal state like its sticky position or scroll behavior. The discussion dives into how these features can enhance responsive design and improve user experience. Insightful talks on new JavaScript events related to scrolling and snapping reveal their potential to transform web interactions. Plus, the importance of subtle micro-animations in UI design and the growing relationship between CSS and JavaScript are explored, inviting community contributions!

This discussion dives into the innovative Anchor Positioning API, enhancing UI element placement effortlessly. It emphasizes the importance of unique identifiers for effective linking and explores techniques like dual anchor methods. Listeners will discover unique strategies for managing media buttons and improving user navigation. The complexities of tooltip design are tackled, focusing on dynamic positioning and adaptability. The rich history of anchor positioning in web development is highlighted, encouraging community engagement for shared insights.

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; 💀🤘

Dive into the world of CSS with a focus on the linear easing function! Discover how it creates fun bounce and spring effects in animations. Learn about the performance limits and the pitfalls of overloading animations. Explore tools for simplifying complex easing curves and visualizing SVG data, tackling the challenges of intricate animation syntax. Don't miss insights on the importance of animation duration for realistic motion, especially when utilizing linear easing.

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; 💀🤘

Learn about advanced techniques with the :has() selector in CSS, including targeting parent elements, combining selectors, and practical styling applications. Explore interactive CSS animations, focus control in popovers, and 3D game development using :has(). Dive into building a CSS-only 3D tic-tac-toe game and optimizing code with 'has()' in CSS.