Explore every episode of the podcast The CSS Podcast
| Title | Pub. Date | Duration | |
|---|---|---|---|
| 091: Season 5 Wrap-up | 03 Oct 2024 | 00:42:39 | |
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 @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
| |||
| 090: Scroll-driven animations | 26 Sep 2024 | 00:46:33 | |
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) Adam Argyle (co-host) | |||
| 089: View transitions | 19 Sep 2024 | 00:41:51 | |
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: 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
Accordion → https://goo.gle/3B4egDi
Adam's Demos: 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)
Adam Argyle (co-host) The CSS Podcast
| |||
| 088: State queries | 12 Sep 2024 | 00:23:13 | |
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: 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) Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC & Adam Argyle (co-host) @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
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 | |||
| 087: Anchor positioning | 22 Aug 2024 | 00:38:02 | |
In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: 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) Adam Argyle (co-host)
| |||
| 086: Nesting 2024+ | 08 Aug 2024 | 00:08:10 | |
In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Una Kravets (co-host) Adam Argyle (co-host) | |||
| 085: Linear easing function fun | 01 Aug 2024 | 00:16:10 | |
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) Adam Argyle (co-host)
| |||
| 084: Text Wrap | 11 Jul 2024 | 00:12:47 | |
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: soft breaks → https://goo.gle/4cXKLAq
Una Kravets (co-host) Adam Argyle (co-host) | |||
| 083: :has() tips and tricks | 03 Jul 2024 | 00:36:14 | |
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: Piccali → https://goo.gle/4ePKJMG Ahmad Shadeed → https://goo.gle/4bsk85F The Looper → https://goo.gle/3yKmXkI Una Kravets (co-host) Adam Argyle (co-host) | |||
| 082: What's new in color & color functions | 27 Jun 2024 | 00:18:24 | |
In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links 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) Adam Argyle (co-host)
| |||
| 081: Trigonometric Functions | 20 Jun 2024 | 00:43:04 | |
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 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 Adam Argyle (co-host) | |||
| 80: Animating to and from top-layer | 13 Jun 2024 | 00:31:23 | |
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: Adam Argyle (co-host) | |||
| 79: Popover and Dialog | 06 Jun 2024 | 00:19:55 | |
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 Adam Argyle (co-host) | |||
| 78: Season 4 wrap! | 06 Dec 2023 | 00:19:58 | |
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; 💀🤘
| |||
| 77: Why isn't percentage working here? | 28 Nov 2023 | 00:15:05 | |
In this episode, Una and Adam talk about percentage resolution for various properties like font-size, padding height and width. They break down and explain why percentages may not work or may not be what you expected.
Links Understanding CSS Percentage → https://goo.gle/3RhLJzG CSS Box Sizing Module Level 3 → https://goo.gle/46FRF9T
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; 💀🤘
| |||
| 76: Why isn't my element stuck where I wanted it to stick? | 15 Nov 2023 | 00:09:52 | |
In this episode Una and Adam help you uncover moments where a sticky element isn't sticking. There are a couple of gotcha around implementing a sticky element and by the end of the show you'll know what they are and a few ways to work around them.
Links: sticky stack - https://goo.gle/3QICxTz sticky desperado - https://goo.gle/3sC3OPj sticky slide - https://goo.gle/47bcRGb
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; 💀🤘
| |||
| 75: Why isn't my custom property the value I expect? | 27 Oct 2023 | 00:19:32 | |
In this episode, Una and Adam discuss common gotchas with custom properties, which often feel fully reactive during use, but their limits and implementation details can popup at unexpected times and create a headache. They'll cover these situations and their solutions!
Links: Value stages → https://goo.gle/3FDo7yA How custom property values are computed →https://goo.gle/49cOUiQ A complete guide to custom properties → https://goo.gle/40gtVb8 The big gotcha with custom properties → https://goo.gle/45VwUHe CodePen → https://goo.gle/3SdMnyY
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs | |||
| 74: How do I center a div? | 11 Oct 2023 | 00:17:01 | |
In this episode we tackle one of the most asked questions of all CSS history.. how do I center this div? We'll cover multiple strategies that each have tradeoffs and super powers over each other.
Links: Centering in CSS → https://goo.gle/3RRki02 Comparing grid and flex place-items and place-content → https://goo.gle/3ZE3NGM Centering in CSS: A Complete Guide → https://goo.gle/46xudw7 Centering examples from Una → https://goo.gle/3rF7lvR
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs | |||
| 73: Why is my animation glitching? | 21 Sep 2023 | 00:25:50 | |
On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base!
Links: MDN transform-style - https://goo.gle/45YFu8B MDN backface-visibility - https://goo.gle/46mPvfE
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; 💀🤘
| |||
| 72: Why does my gradient have muddy colors in the middle? | 08 Sep 2023 | 00:16:11 | |
In this episode, we tackle the issues around getting undesirable gradient results. Sometimes it's you, sometimes it's the color space. We'll help you identify, assess and remedy muddy gradients.
Links: HD color guide - https://goo.gle/3RhyvmP various gradients in color spaces - https://goo.gle/3Pc02TV modern css gradient tool - https://goo.gle/3P4KxNI try color mix - https://goo.gle/3r2toML color-mix() with white hover codepen - https://goo.gle/3Pw6mHm interpolation visualizer - https://goo.gle/45GwS6t
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
The CSS Podcast #CSSpodcast
| |||
| 71: Why do I have layout shift? | 31 Aug 2023 | 00:11:30 | |
In this episode we're shifting the topic to layout shift, that moment where you watch the page adapt to something lazily loaded which has impacted the layout in some way where you see content shift around.
Links: CLS - https://goo.gle/3kle3AW Optimizing CLS - https://goo.gle/3fxu6IE CSS for Web Vitals - https://goo.gle/3E98gY9
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; 💀🤘
| |||
| 70: Why is my image distorted? | 25 Aug 2023 | 00:17:52 | |
Too small? Too big? Learn how to make your images just right and all the reasons they might be looking a little funky when you’re adding media to your interface.
Links: CSS for Web Vitals → https://goo.gle/3E98gY9 Learn Responsive Images → https://goo.gle/45EFuds Aspect Ratio → https://goo.gle/3PdyjDS Demos → https://goo.gle/3qJuQ6z & https://goo.gle/45uDvZB
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs | |||
| 69: Why is it overflowing? | 16 Aug 2023 | 00:15:04 | |
In this episode we're overjoyed to overexplain why you may be having overflow in your page. somewhere over the rainbow, an overheating developer overcooked the inline sizes and ended up oversleeping for work the next day. Now let's overanalyze and overshare about CSS overflow.
Links: The rules of Margin Collapse → https://goo.gle/441OGaH Everything you need to know → https://goo.gle/4434Ctj Check out → https://goo.gle/3YrJDiw
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs The CSS Podcast #CSSpodcast
| |||
| 68: Why isn't the margin applying? | 09 Aug 2023 | 00:16:14 | |
In this episode we explore why margin may not be working for you. We’ll teach you about block formatting contexts and margin collapsing! We'll make you the space you want in your designs! Links: The Rules of Margin Collapse → https://goo.gle/441OGaH CSS Margins → https://goo.gle/4434Ctj Learn more → https://goo.gle/3YrJDiw
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs | |||
| 67: Why isn't z-index working? | 01 Aug 2023 | 00:16:55 | |
In this episode we explore why z-index isn’t working for you. We’ll teach you about stacking context and how to make sure you’ve set yourself up for layering success! Join us on this journey through positioning, variable architecture, tools, and more, to bring those elements to light. Links: Stacking context → https://goo.gle/43It8jl Una Kravets (co-host) Making the web more colorful ✨🎨 Web DevRel @googlechrome Host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs | |||
| 66: Season 3 recap & what’s next! | 22 Nov 2022 | 00:36:21 | |
Listen to Adam and Una recap all of the exciting landings they talked about in 2022 in this end-of-season recap. If you missed the others, don’t miss this one! 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; 💀🤘 Catch more episodes on YouTube→ https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs The CSS Podcast #CSSpodcast | |||
| 65: Nesting | 15 Nov 2022 | 00:31:59 | |
In this episode Una and Adam talk about CSS Nesting, per the current 2022 spec draft. They'll cover the syntax basics, some gotchas and of course a bunch of examples.
Links Nesting 1 Spec - https://goo.gle/3VgnoJR Adam exploring the prototype implementation in Canary - https://goo.gle/3UGsMpv @scope and @layer and nesting - https://goo.gle/3EyJ3Hq
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
The CSS Podcast #CSSpodcast | |||
| 64: Subgrid | 08 Nov 2022 | 00:09:43 | |
In this episode Una and Adam discuss subgrid, a special value for grid-template-rows or grid-template-columns. Learn the general details of usage, use cases, tips, tricks and gotchas, so you can use the feature with confidence.
Links CSS Grid Spec - https://goo.gle/3EfjoDq MDN - https://goo.gle/3tbooTx Smashing Magazine - https://goo.gle/3DUb7Ds Ahmad Shadeed on Subgrid - https://goo.gle/3EeStaP State of CSS (subgrid) - https://goo.gle/3fQDvP4 Full Bleed Subgrid demo - https://goo.gle/3TkZ1Jv
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs
The CSS Podcast #CSSpodcast | |||
| 63: Media query range syntax | 02 Nov 2022 | 00:05:57 | |
Media query range syntax is a really nice addition.
Links
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; 💀🤘
Catch more episodes on YT → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
The CSS Podcast #CSSpodcast | |||
| 62: Color functions: An update | 26 Oct 2022 | 00:13:14 | |
In this episode Una and Adam cover changes to the color level 5 and new color level 6 specs, so you can stay HD on the topic. Plus, a dive into CSS color functions for manipulating colors. Links CSS Color Module Level 5 → https://goo.gle/3f8BgpT CSS Color Module Level 6 → https://goo.gle/3TIsPAI
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
The CSS Podcast #CSSpodcast | |||
| 61 :has() | 18 Oct 2022 | 00:23:06 | |
:has() is a new CSS selector which allows developers to query for the presence of a child or state. It has been called the “parent selector”, but it’s much more than that! Using :has() you can style up and down a DOM tree, making this an incredible powerful feature. Learn how to take advantage of this new API with lots of examples in this episode. Links
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; 💀🤘
Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs The CSS Podcast #CSSpodcast | |||
| 60: Inert | 11 Oct 2022 | 00:07:31 | |
In this episode Una and Adam explain a non-CSS property, but very relevant front-end UI property, called inert. It's a way to have a visually guarded part of the UI also be guarded for keyboard and screen reader users. Links Inert spec - https://goo.gle/3SXid0C MDN - https://goo.gle/3rK1Ybd Chrome Developers: Introducing Inert - https://goo.gle/3CLygZE
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 59: Container queries | 06 Oct 2022 | 00:15:45 | |
Container queries (also known as @container) are a new entrypoint for truly component-based responsive design. In this episode, Adam and Una will walk you through how to use them, what browser support looks like, and upcoming features that will give you even more control over your responsive interfaces! Links
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 58: Cascade layers | 20 Sep 2022 | 00:18:08 | |
In this episode Una and Adam cover Cascade Layers (aka @layer). It's a way for authors to control and orchestrate their own CSS layering which can help avoid specificity and asynchronous loading issues. Instead of styles taking the most recent style based on order of appearance, orchestrate layers and place styles inside them to control which overrides which. Links MDN - https://goo.gle/3UjB6vL Smashing Magazine - https://goo.gle/3ByUT1u Una on YouTube - https://goo.gle/3Sm2zLc Bramus at CSS Day 2022 - https://goo.gle/3LtfxVg Bramus's blog - https://goo.gle/3xEj2CM Subscribe to Google Chrome Developers YouTube - https://goo.gle/ChromeDevs
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 57: DevTools Mini Series - Interaction | 29 Dec 2021 | 00:14:32 | |
DevTools Mini Series continues, this time on interactions. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss interaction, and interaction inspection/ debugging in DevTools.
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; 💀🤘
Jecelyn Yeen Developer advocate @ChromeDevTools 📐🤩
The CSS Podcast #CSSpodcast | |||
| 56: DevTools Mini Series - Accessibility | 22 Dec 2021 | 00:13:49 | |
DevTools Mini Series continues, this time on accessibility tooling. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss how DevTools can help you discover and fix accessibility issues.
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; 💀🤘
Jecelyn Yeen Developer advocate @ChromeDevTools 📐🤩
The CSS Podcast #CSSpodcast | |||
| 55: DevTools Mini Series - Layout | 15 Dec 2021 | 00:17:10 | |
DevTools Mini Series continues, this time on layout. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of how DevTools can help you create and debug layouts.
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; 💀🤘
Jecelyn Yeen Developer advocate @ChromeDevTools 📐🤩
The CSS Podcast #CSSpodcast | |||
| 54: DevTools Mini Series - Color | 08 Dec 2021 | 00:14:20 | |
Welcome to the DevTools Mini Series for The CSS Podcast. On this episode, Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of color and shared tips.
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; 💀🤘
Jecelyn Yeen Developer advocate @ChromeDevTools 📐🤩
The CSS Podcast #CSSpodcast | |||
| 53: Season 2 wrap up | 03 Aug 2021 | 00:35:45 | |
We’ve reached the end of season 2 of the CSS Podcast. In this closing episode, we recap every episode by sharing our favorite tips and learnings from the last few months! | |||
| 52: counters and @counter-style | 27 Jul 2021 | 00:26:48 | |
Count on The CSS Podcast to cover counters. Una and Adam teach all the ways to create, reset, and update counters. Use them for lists, games and more!
Links Counters Level 3 → https://goo.gle/3f2BP18 Pure CSS Games Collection → https://goo.gle/3l0wrQe
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 51: Styling SVG in CSS | 20 Jul 2021 | 00:32:54 | |
CSS and SVG are very intertwined, and you can create a lot of unique effects by combining the two. This episode dives into a few CSS + SVG tips and tricks, including where and how to use SVG on your page, icon systems, color theming, adding animations, filter effects, and more!
Links Solved with CSS: Colorizing SVG → https://goo.gle/3x0Uilb SVGOMG → https://goo.gle/3hS6ksJ SVG spec → https://goo.gle/3wVgRYe
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 50: inherit, initial, unset, and revert | 13 Jul 2021 | 00:11:31 | |
This episode is about the very available CSS values inherit, initial, unset and revert. We'll help explain what they are, what they do and when to use them.
Links CSS Tricks Article → https://goo.gle/2U5PxJw Quirksmode Article → https://goo.gle/2TY80rz
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 49: Accessibility | 06 Jul 2021 | 00:31:38 | |
Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more! Links #lintHTMLwithCSS - https://goo.gle/3dSMIlU CSS Speech Level 1 - https://goo.gle/3xrg3vc Media Queries Level 5 - https://goo.gle/3qUcBXz
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 48: Touch interaction | 29 Jun 2021 | 00:25:54 | |
Today we touch on touch interaction. Covering CSS's ability to change a user's touch experience with properties like touch-action, scroll-behavior, user-select and more.
Links MDN - https://goo.gle/3y8My14 Spec - https://goo.gle/3dm4opF
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 47: :is(), :where(), & nesting | 22 Jun 2021 | 00:33:04 | |
In this episode, Adam and Una explore some CSS syntactic sugar! They discuss the :is and :where functions, how they differ, and how they’re paving the way for nesting.
Links Adam's post on web.dev → https://goo.gle/3qhYifl MDN :is() → https://goo.gle/3qgU0Vf Forgiving selector parsing → https://goo.gle/3xLTYHL
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 46: Custom properties | 15 Jun 2021 | 00:27:29 | |
Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex.
Links Module Level 1 → https://goo.gle/3wtADL1 82% of developers get this 3 line CSS quiz wrong → https://goo.gle/2U8oTPR A user’s guide to CSS variables → https://goo.gle/3zlmscV Locally Scoped CSS Variables: What, How, and Why → https://goo.gle/2KGESwR GitHub → https://goo.gle/3iOiVOa
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 45: Scroll timeline | 08 Jun 2021 | 00:22:26 | |
In this episode we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page.
Links Scroll animations level 1 draft →https://goo.gle/3pvWX49 Polyfill → https://goo.gle/3x8CQvw GUI Challenges - Tabs → https://goo.gle/34YYl5J Bramus's talk → https://goo.gle/2TPs7HU
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 44: Transitions | 01 Jun 2021 | 00:26:18 | |
In this episode it's all about transitions. What you can and can't transition, it's limits, and it's super powers. We'll finish up with ways to trigger transitions and a few tips and tricks.
Links CSS Transitions https://goo.gle/3vIDi31 Cont. https://goo.gle/3pcpueY
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 43: Containment | 26 May 2021 | 00:14:51 | |
The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them.
Links MDN doc on containment → https://goo.gle/3fRejEd Content-visibility → https://goo.gle/3wBMB52
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; 💀🤘
The CSS Podcast #CSSpodcast | |||
| 42: Snap points | 11 May 2021 | 00:16:49 | |
In this episode we're guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content.
Links Scroll Snap Level 1 draft → https://goo.gle/2R9hUow overscroll-behavior → https://goo.gle/3o7vLYE scroll-behavior → https://goo.gle/3uKvkWU
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; 💀🤘
The CSS Podcast #CSSpodcast | |||