The CSS Podcast

Alle afleveringen

100 afleveringen, van nieuw naar oud

  1. 100: Season 6 wrap up

    20 november 2025 · 17 min

    Afspelen
    Una and Bramus recap the season! They share some new updates and re-visit some of their favorite tips and tricks.Season 6 covered inline if() statements and custom functions, scroll state queries, carousel APIs, view transitions updates, anchor positioning, command invokers and interest invokers, customizable select, and a whole bunch of other CSS functions! Lees meer

    Resources:

    Same-document view transitions have become Baseline Newly available → https://goo.gle/4nCyFSe

    Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up (scrolled state query) → https://goo.gle/49uQMpN

    css-extras – A collection of useful CSS custom functions → https://goo.gle/4qFjIS5

    CSS Mixins Specification (ED): Defining Mixins → ​​ https://goo.gle/3JpX4MZ

    Invoker Commands: Scroll Commands (OpenUI Meeting Notes) → https://goo.gle/47onsQB

    Anchored queries → https://goo.gle/4oMCvJT

    Customizable select → https://goo.gle/4r9Xsjv

    Una Kravets (co-host)
    Bluesky | Twitter | YouTube | Website
    Making the web more colorful @googlechrome

    Bramus Van Damme (co-host)
    Bluesky | Mastodon | YouTube | Website
    @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

  2. 99: More CSS functions

    18 november 2025 · 37 min

    Afspelen
    In this episode of The CSS Podcast, Una and Bramus cover a bunch of CSS functions from comparison functions to tree counting functions, the random function, and more. Lees meer

    Resources:
    min(), max(), and clamp()
    Web Dev article → https://goo.gle/4nvMthu
    Article by Ahmad Shadeed → https://goo.gle/3JvPznI
    Comparison functions → https://goo.gle/3JmbJsx

    sibling-count() and sibling-index() → https://goo.gle/3JCj33i

    attr()
    CSS attr() gets an upgrade → https://goo.gle/3JCj33i
    New capabilities for attr() → https://goo.gle/47inI3p

    light-dark() → https://goo.gle/3X703wQ

    shape()
    Use shape() for responsive clipping → https://goo.gle/47zSHH0
    Better CSS Shapes Using shape() → https://goo.gle/47OZMop

    ident()
    Article introducing ident() → https://goo.gle/4oHdYW9
    ident() in the CSS Values and Units Specification → https://goo.gle/3LgN8pK

    random()
    Rolling the Dice with CSS random() → https://goo.gle/4oijnTO
    Generating Random Values → https://goo.gle/4hFwj3K
    CSS paint API: Being predictably random → https://goo.gle/3JEReau

    Una Kravets (co-host)
    Bluesky | Twitter | YouTube | Website
    Making the web more colorful @googlechrome
    Bramus Van Damme (co-host)
    Bluesky | Mastodon | YouTube | Website
    @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

  3. 98: Customizable select

    13 november 2025 · 14 min

    Afspelen
    In this episode of The CSS Podcast, Una and Bramus cover building customizable select menus. Have you ever had to build a dropdown menu where you want to do something as simple as change the color, or add little flag icons? You know how hard it can be! Discover how the web platform is solving this once and for all with the new customizable select API. Lees meer

    Resources:
    Customizable select demos → https://goo.gle/43G5ruv

    Una Kravets (co-host)
    Bluesky | Twitter | YouTube | Website
    Making the web more colorful @googlechrome
    Bramus Van Damme (co-host)
    Bluesky | Mastodon | YouTube | Website
    @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

  4. 97: Invokers and commands

    11 november 2025 · 13 min

    Afspelen
    In this episode of The CSS Podcast, we're diving into the power of invoker commands! Discover how the command and commandfor attributes allow you to declaratively open dialogs and show popovers. We'll explore standard commands and then jump into creating your own custom commands for more complex interactions. To close off, we're covering the concept of "interest invokers" and how the new CSS properties and selectors they bring. Lees meer

    Resources:

    Introducing command and commandfor blogpost → https://goo.gle/4ozmEy4

    Authors Cards (Interest Invokers Demo) → https://goo.gle/42LU3x2

    Invoker Commands Explainer → https://goo.gle/4o0DC8n

    Interest Invokers Explainer → https://goo.gle/4nfyZGi

    Una Kravets (co-host)
    Bluesky | Twitter | YouTube | Website
    Making the web more colorful @googlechrome

    Bramus Van Damme (co-host)
    Bluesky | Mastodon | YouTube | Website

  5. 96: CSS anchor positioning

    7 november 2025 · 13 min

    Afspelen
    Welcome back to The CSS Podcast! Una and Bramus dive into CSS anchor positioning, a powerful new API that revolutionizes how developers handle dynamic UI element placement. Learn how to create interactive tooltips, popovers, and menus directly in CSS, eliminating the need for complex JavaScript. Lees meer

    Resources:

    CSS anchor positioning → https://goo.gle/3KvYYeZ

    Anchor position tool → https://goo.gle/4gOYooL

    Follow-the-leader pattern with CSS anchor positioning → https://goo.gle/46s0kQD

    Anchor queries - Reposition tether arrow → https://goo.gle/42fXtI1

    Una Kravets (co-host)
    Bluesky | Twitter | YouTube | Website
    Making the web more colorful @googlechrome

    Bramus Van Damme (co-host)
    Bluesky | Mastodon | YouTube | Website
    @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

  6. 95: Updates to View Transitions

    5 november 2025 · 18 min

    Afspelen
    View Transitions have been around for a little while. This episode of The CSS Podcast covers some of the recent additions and changes since we last covered this in episode 89. Lees meer

    Resources:
    What's new in view transitions (2025 update) → https://goo.gle/47k7RAb

    Same-document view transitions have become Baseline Newly available → https://goo.gle/4otGpqx

    Learn View Transitions → https://goo.gle/42dNH9l

    View Transitions Demos → https://goo.gle/42dNH9l

    Nested View Transition Groups → https://goo.gle/3KtoVfi

    Scoped View Transitions → https://goo.gle/3VHdovd

    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 🤿

  7. 94: CSS carousels (and scroll)

    29 oktober 2025 · 17 min

    Afspelen
    Welcome back to The CSS Podcast! We're diving into a series of powerful scroll APIs that enable you to build custom, interactive carousels entirely with CSS, eliminating the need for JavaScript. These APIs, which also power customizable select elements, unlock even more innovative scroll-based experiences Lees meer

    Resources:
    Carousels with CSS → https://goo.gle/46PES79
    ::scroll-marker → https://goo.gle/4mEd3o8
    CSS Carousel Gallery → https://goo.gle/46Odsyp
    Carousel Configurator → https://goo.gle/46KEir4

    Una Kravets (co-host)
    Twitter | Instagram | YouTube
    Making the web more colorful ✨🎨 Web DevRel @googlechrome

    Bramus Van Damme (co-host)
    Bluesky | Mastodon | YouTube | Website
    @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

  8. 93: State queries in 2025

    16 oktober 2025 · 18 min

    Afspelen
    Una and Bramus dive into the latest advancements in CSS with state-based container queries. Learn how to create responsive and dynamic user experiences by querying the scroll state of UI elements, including 'stuck,' 'snapped,' and 'scrollable' states. Discover practical examples and techniques to replace complex JavaScript with declarative CSS, making your web development more efficient and powerful. Lees meer

    Resources:
    Scroll state queries → https://goo.gle/4mQDQ0M
    Scroll-state-container → https://goo.gle/487y4nI
    Anchor queries → https://goo.gle/3IBDVaw
    Episode 59 → https://goo.gle/3KB7M3z

    Una Kravets (co-host)
    Bluesky | Twitter | YouTube | Website
    Making the web more colorful @googlechrome

    Bramus Van Damme (co-host)
    Bluesky | Mastodon | YouTube | Website
    @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

  9. 92: CSS if() and custom functions

    13 oktober 2025 · 26 min

    Afspelen
    Welcome back to the new season of the CSS Podcast, where Una and Bramus are your guides, your cohosts, and your CSS best friends. Lees meer

    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 🤿

  10. 091: Season 5 Wrap-up

    3 oktober 2024 · 43 min

    Afspelen
    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! Lees meer

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

  11. 090: Scroll-driven animations

    26 september 2024 · 47 min

    Afspelen
    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. Lees meer

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

  12. 089: View transitions

    19 september 2024 · 42 min

    Afspelen
    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. Lees meer

    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

  13. 088: State queries

    12 september 2024 · 23 min

    Afspelen
    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. Lees meer

    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

  14. 087: Anchor positioning

    22 augustus 2024 · 38 min

    Afspelen
    In this episode Una and Adam explain anchor positioning and all its amazing features. Lees meer

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

  15. 086: Nesting 2024+

    8 augustus 2024 · 8 min

    Afspelen
    In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Lees meer

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

  16. 085: Linear easing function fun

    1 augustus 2024 · 16 min

    Afspelen
    In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Lees meer

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

  17. 084: Text Wrap

    11 juli 2024 · 13 min

    Afspelen
    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. Lees meer

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

  18. 083: :has() tips and tricks

    3 juli 2024 · 36 min

    Afspelen
    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. Lees meer

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

  19. 082: What's new in color & color functions

    27 juni 2024 · 18 min

    Afspelen
    In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Lees meer

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

  20. 081: Trigonometric Functions

    20 juni 2024 · 43 min

    Afspelen
    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. Lees meer

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

  21. 80: Animating to and from top-layer

    13 juni 2024 · 31 min

    Afspelen
    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. Lees meer

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

  22. 79: Popover and Dialog

    6 juni 2024 · 20 min

    Afspelen
    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. Lees meer

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

  23. 78: Season 4 wrap!

    6 december 2023 · 20 min

    Afspelen
    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. Lees meer

    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)

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

    Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

  24. 77: Why isn't percentage working here?

    28 november 2023 · 15 min

    Afspelen
    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. Lees meer

    Links

    → https://goo.gle/47XtWU1

    Understanding CSS Percentage → https://goo.gle/3RhLJzG

    CSS Box Sizing Module Level 3 → https://goo.gle/46FRF9T

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

    Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

  25. 76: Why isn't my element stuck where I wanted it to stick?

    15 november 2023 · 10 min

    Afspelen
    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. Lees meer

    Links:

    sticky stack - https://goo.gle/3QICxTz

    sticky desperado - https://goo.gle/3sC3OPj

    sticky slide - https://goo.gle/47bcRGb

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

    Subscribe to Chrome for Developers YouTube → https://goo.gle/ChromeDevs

  26. 75: Why isn't my custom property the value I expect?

    27 oktober 2023 · 20 min

    Afspelen
    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! Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

  27. 74: How do I center a div?

    11 oktober 2023 · 17 min

    Afspelen
    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. Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

  28. 73: Why is my animation glitching?

    21 september 2023 · 26 min

    Afspelen
    On this episode of the #CSSpodcast, we're diving into how to deal with glitchy animations in your code base! Lees meer

    Links:

    MDN transform-style - https://goo.gle/45YFu8B

    MDN backface-visibility - https://goo.gle/46mPvfE

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

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

  29. 72: Why does my gradient have muddy colors in the middle?

    8 september 2023 · 16 min

    Afspelen
    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. Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  30. 71: Why do I have layout shift?

    31 augustus 2023 · 12 min

    Afspelen
    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. Lees meer

    Links:

    CLS - https://goo.gle/3kle3AW

    Optimizing CLS - https://goo.gle/3fxu6IE

    CSS for Web Vitals - https://goo.gle/3E98gY9

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

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

  31. 70: Why is my image distorted?

    25 augustus 2023 · 18 min

    Afspelen
    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. Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

  32. 69: Why is it overflowing?

    16 augustus 2023 · 15 min

    Afspelen
    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. Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  33. 68: Why isn't the margin applying?

    9 augustus 2023 · 16 min

    Afspelen
    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! Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs

  34. 67: Why isn't z-index working?

    1 augustus 2023 · 17 min

    Afspelen
    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. Lees meer

    Links:

    Stacking context → https://goo.gle/43It8jl

    Una Kravets (co-host)

    Twitter | Instagram | YouTube

    Making the web more colorful ✨🎨 Web DevRel @googlechrome 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; 💀🤘

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs

  35. 66: Season 3 recap & what's next!

    22 november 2022 · 36 min

    Afspelen
    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! Lees meer

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

    Catch more episodes on YouTube→ https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  36. 65: Nesting

    15 november 2022 · 32 min

    Afspelen
    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. Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  37. 64: Subgrid

    8 november 2022 · 10 min

    Afspelen
    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. Lees meer

    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)

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  38. 63: Media query range syntax

    2 november 2022 · 6 min

    Afspelen
    Media query range syntax is a really nice addition. Lees meer

    Links

    Polyfill: https://goo.gle/3TXcyYD

    New syntax for range media queries: https://goo.gle/3DQlHg0

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

    Catch more episodes on YT → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  39. 62: Color functions: An update

    26 oktober 2022 · 13 min

    Afspelen
    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. Lees meer

    Links

    CSS Color Module Level 5 → https://goo.gle/3f8BgpT

    CSS Color Module Level 6 → https://goo.gle/3TIsPAI

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  40. 61 :has()

    18 oktober 2022 · 23 min

    Afspelen
    :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. Lees meer

    Links

    Blog → https://goo.gle/3CIs1EF

    Selectors → https://goo.gle/3EQsPde

    Pseudo-classes → https://goo.gle/3SgvH69

    Creative CSS Layout → https://goo.gle/3yRv4sZ

    Quantity Queries for CSS → https://goo.gle/3a4NPwT

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

    Catch more episodes → https://goo.gle/CSSpodcast

    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

    The CSS Podcast

    #CSSpodcast

  41. 60: Inert

    11 oktober 2022 · 8 min

    Afspelen
    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. Lees meer

    Links

    Inert spec - https://goo.gle/3SXid0C

    MDN - https://goo.gle/3rK1Ybd

    Chrome Developers: Introducing Inert - https://goo.gle/3CLygZE

    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

    #CSSpodcast

  42. 59: Container queries

    6 oktober 2022 · 16 min

    Afspelen
    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! Lees meer

    Links

    CQ + :has() → https://goo.gle/3ymiwJS

    MDN Docs → https://goo.gle/3ogyIrp

    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

    #CSSpodcast

  43. 58: Cascade layers

    20 september 2022 · 18 min

    Afspelen
    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. Lees meer

    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)

    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

    #CSSpodcast

  44. 57: DevTools Mini Series - Interaction

    29 december 2021 · 15 min

    Afspelen
    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. Lees meer

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

    Jecelyn Yeen

    Twitter | Facebook | YouTube

    Developer advocate @ChromeDevTools 📐🤩

    The CSS Podcast

    #CSSpodcast

  45. 56: DevTools Mini Series - Accessibility

    22 december 2021 · 14 min

    Afspelen
    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. Lees meer

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

    Jecelyn Yeen

    Twitter | Facebook | YouTube

    Developer advocate @ChromeDevTools 📐🤩

    The CSS Podcast

    #CSSpodcast

  46. 55: DevTools Mini Series - Layout

    15 december 2021 · 17 min

    Afspelen
    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. Lees meer

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

    Jecelyn Yeen

    Twitter | Facebook | YouTube

    Developer advocate @ChromeDevTools 📐🤩

    The CSS Podcast

    #CSSpodcast

  47. 54: DevTools Mini Series - Color

    8 december 2021 · 14 min

    Afspelen
    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. Lees meer

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

    Jecelyn Yeen

    Twitter | Facebook | YouTube

    Developer advocate @ChromeDevTools 📐🤩

    The CSS Podcast

    #CSSpodcast

  48. 53: Season 2 wrap up

    3 augustus 2021 · 36 min

    Afspelen
    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! Lees meer

    Episodes reminisced
    E30 → Lists
    E31 → @rules
    E32 → Page Media Queries
    E33 → Preference Media Queries
    E34 → Overflow
    E35 → Background
    E36 → Text & Typography
    E37 → Cursors & Pointers
    E38 → N-Match Notation
    E39 → Paths, Shapes, Clipping and Masking
    E40 → @font-face
    E41 → Transforms
    E42 → Snap Points
    E43 → Containment
    E44 → Transitions
    E45 → @scroll-timeline
    E46 → Custom Properties
    E47 → :is(), :where(), and @nest
    E48 → Touch Interaction
    E49 → Accessibility
    E50 → Inherit, initial, inset, and revert
    E51 → Styling SVG
    E52 → Counters & @counter-style

    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
    #CSSpodcast

  49. 52: counters and @counter-style

    27 juli 2021 · 27 min

    Afspelen
    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! Lees meer

    Links

    Counters Level 3 → https://goo.gle/3f2BP18

    Pure CSS Games Collection → https://goo.gle/3l0wrQe

    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

    #CSSpodcast

  50. 51: Styling SVG in CSS

    20 juli 2021 · 33 min

    Afspelen
    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! Lees meer

    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)

    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

    #CSSpodcast