CINXE.COM

<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:cc="http://web.resource.org/cc/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:media="http://search.yahoo.com/mrss/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:podcast="https://podcastindex.org/namespace/1.0" xmlns:googleplay="http://www.google.com/schemas/play-podcasts/1.0" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <channel> <atom:link href="https://thecsspodcast.libsyn.com/rss" rel="self" type="application/rss+xml"/> <title>The CSS Podcast</title> <pubDate>Thu, 03 Oct 2024 21:00:00 +0000</pubDate> <lastBuildDate>Thu, 13 Feb 2025 21:03:10 +0000</lastBuildDate> <generator>Libsyn WebEngine 2.0</generator> <link>https://thecsspodcast.libsyn.com</link> <language>en</language> <copyright><![CDATA[2024 © Google Chrome Developers]]></copyright> <docs>https://thecsspodcast.libsyn.com</docs> <managingEditor>gdevs.podcast@gmail.com (gdevs.podcast@gmail.com)</managingEditor> <itunes:summary><![CDATA[Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.]]></itunes:summary> <image> <url>https://static.libsyn.com/p/assets/0/0/0/f/000f46d88b74118de55e3c100dce7605/unnamed_22-20240924-isyx55aeie.png</url> <title>The CSS Podcast</title> <link><![CDATA[https://thecsspodcast.libsyn.com]]></link> </image> <itunes:author>The CSS Podcast</itunes:author> <itunes:keywords>coding,css,software</itunes:keywords> <itunes:category text="Technology"> </itunes:category> <itunes:image href="https://static.libsyn.com/p/assets/0/0/0/f/000f46d88b74118de55e3c100dce7605/unnamed_22-20240924-isyx55aeie.png" /> <itunes:explicit>false</itunes:explicit> <itunes:owner> <itunes:name><![CDATA[Google Developer Studio]]></itunes:name> <itunes:email>gdevs.podcast@gmail.com</itunes:email> </itunes:owner> <description><![CDATA[Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.]]></description> <itunes:type>episodic</itunes:type> <podcast:locked owner="gdevs.podcast@gmail.com">no</podcast:locked> <item> <title>091: Season 5 Wrap-up</title> <itunes:title>091: Season 5 Wrap-up</itunes:title> <pubDate>Thu, 03 Oct 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[c0f29b68-b75a-49fd-941a-8c0d5d3352ed]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/091-season-5-wrap-up]]></link> <description><![CDATA[<div dir="ltr" align="left"> <table> <colgroup> <col width="554" /></colgroup> <tbody> <tr> <td> 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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘</td> </tr> </tbody> </table> </div> ]]></description> <content:encoded><![CDATA[ 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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 ]]></content:encoded> <enclosure length="61869661" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP091_final.mp3?dest-id=1891556" /> <itunes:duration>42:39</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>the css podcast</itunes:keywords> <itunes:subtitle><![CDATA[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,...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>090: Scroll-driven animations</title> <itunes:title>090: Scroll-driven animations</itunes:title> <pubDate>Thu, 26 Sep 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[893fd362-588b-4344-92c0-ce4fd9c805f9]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/090-scroll-driven-animations]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3Uw31up">https://goo.gle/3Uw31up</a> Video Course direct link: <a href= "https://goo.gle/learn-scroll-driven-animations">https://goo.gle/learn-scroll-driven-animations</a> Adam's Demos: scroll() the hue wheel → <a href= "https://goo.gle/4emb3NO">https://goo.gle/4emb3NO</a> CSS scroll() feature time warp → <a href= "https://goo.gle/4exH3yv">https://goo.gle/4exH3yv</a> view() long bento list → <a href= "https://goo.gle/4gtcCLx">https://goo.gle/4gtcCLx</a> view() scrolly telling → <a href= "https://goo.gle/3TAq2vA">https://goo.gle/3TAq2vA</a> view() iOS-like app switcher → <a href= "https://goo.gle/4etvCI6">https://goo.gle/4etvCI6</a> view() variable font animation → <a href= "https://goo.gle/4e8eJmd">https://goo.gle/4e8eJmd</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA">Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href= "https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3Uw31up">https://goo.gle/3Uw31up</a> Video Course direct link: <a href= "https://goo.gle/learn-scroll-driven-animations">https://goo.gle/learn-scroll-driven-animations</a> Adam's Demos: scroll() the hue wheel → <a href= "https://goo.gle/4emb3NO">https://goo.gle/4emb3NO</a> CSS scroll() feature time warp → <a href= "https://goo.gle/4exH3yv">https://goo.gle/4exH3yv</a> view() long bento list → <a href= "https://goo.gle/4gtcCLx">https://goo.gle/4gtcCLx</a> view() scrolly telling → <a href= "https://goo.gle/3TAq2vA">https://goo.gle/3TAq2vA</a> view() iOS-like app switcher → <a href= "https://goo.gle/4etvCI6">https://goo.gle/4etvCI6</a> view() variable font animation → <a href= "https://goo.gle/4e8eJmd">https://goo.gle/4e8eJmd</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA">Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href= "https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></content:encoded> <enclosure length="67562058" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP090_final.mp3?dest-id=1891556" /> <itunes:duration>46:33</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>css,chrome,chromedeveloper,chromedevelopersweb,the css podcast</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> </item> <item> <title>089: View transitions</title> <itunes:title>089: View transitions</itunes:title> <pubDate>Thu, 19 Sep 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[5b2506bc-0d24-488b-a330-6211225dbbf8]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/089-view-transitions]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/4aHY7zo">https://goo.gle/4aHY7zo</a> Quick intro to View Transitions (Google I/O 2023 video) → <a href= "https://goo.gle/3ZieRLp">https://goo.gle/3ZieRLp</a> What's new in View Transitions? (Google I/O 2024 video) → <a href= "https://goo.gle/3zeYNj3">https://goo.gle/3zeYNj3</a> Misconceptions about View Transitions → <a href= "https://goo.gle/3Tpsu7O">https://goo.gle/3Tpsu7O</a> Bramus's Demos: Collection of various demos, both SPA and MPA → <a href= "https://goo.gle/3B4edY8">https://goo.gle/3B4edY8</a> Accordion → <a href= "https://goo.gle/3B4egDi">https://goo.gle/3B4egDi</a> Adam's Demos: Grid gallery → <a href= "https://goo.gle/4giz0XV">https://goo.gle/4giz0XV</a> Always great grid → <a href= "https://goo.gle/3MH68Lu">https://goo.gle/3MH68Lu</a> Flexbox visualizer → <a href= "https://goo.gle/47kmJOB">https://goo.gle/47kmJOB</a> Editable tabs → <a href= "https://goo.gle/4ghNfMx">https://goo.gle/4ghNfMx</a> Dollar number input → <a href= "https://goo.gle/4e0FsBf">https://goo.gle/4e0FsBf</a> Stateful morphing button → <a href= "https://goo.gle/4ebBNR2">https://goo.gle/4ebBNR2</a> Drag and Drop → <a href= "https://goo.gle/3XlP2Yn">https://goo.gle/3XlP2Yn</a> Isotope recreation → <a href= "https://goo.gle/4dVX5lN">https://goo.gle/4dVX5lN</a> Local development animated → <a href= "https://goo.gle/3XHjm17">https://goo.gle/3XHjm17</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> → <a href= "https://goo.gle/452aBRb">https://goo.gle/452aBRb</a> <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> → <a href= "https://goo.gle/457oMnS">https://goo.gle/457oMnS</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face Host of Tools Today → <a href= "https://goo.gle/4aI6JpC">https://goo.gle/4aI6JpC</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 → <a href= "https://goo.gle/4e4YTcM">https://goo.gle/4e4YTcM</a> Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> → <a href= "https://goo.gle/3yFnHYu">https://goo.gle/3yFnHYu</a> <a href="https://www.instagram.com/argyleink/">Instagram</a> → <a href="https://goo.gle/3wUb6QJ">https://goo.gle/3wUb6QJ</a> <a href="https://a.nerdy.dev/youtube">YouTube</a> → <a href= "https://goo.gle/4dZNKK7">https://goo.gle/4dZNKK7</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → <a href= "https://goo.gle/4bFErxq">https://goo.gle/4bFErxq</a> VisBug → <a href= "https://goo.gle/4bDcVQZ">https://goo.gle/4bDcVQZ</a> The CSS Podcast #CSSpodcast ]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/4aHY7zo">https://goo.gle/4aHY7zo</a> Quick intro to View Transitions (Google I/O 2023 video) → <a href= "https://goo.gle/3ZieRLp">https://goo.gle/3ZieRLp</a> What's new in View Transitions? (Google I/O 2024 video) → <a href= "https://goo.gle/3zeYNj3">https://goo.gle/3zeYNj3</a> Misconceptions about View Transitions → <a href= "https://goo.gle/3Tpsu7O">https://goo.gle/3Tpsu7O</a> Bramus's Demos: Collection of various demos, both SPA and MPA → <a href= "https://goo.gle/3B4edY8">https://goo.gle/3B4edY8</a> Accordion → <a href= "https://goo.gle/3B4egDi">https://goo.gle/3B4egDi</a> Adam's Demos: Grid gallery → <a href= "https://goo.gle/4giz0XV">https://goo.gle/4giz0XV</a> Always great grid → <a href= "https://goo.gle/3MH68Lu">https://goo.gle/3MH68Lu</a> Flexbox visualizer → <a href= "https://goo.gle/47kmJOB">https://goo.gle/47kmJOB</a> Editable tabs → <a href= "https://goo.gle/4ghNfMx">https://goo.gle/4ghNfMx</a> Dollar number input → <a href= "https://goo.gle/4e0FsBf">https://goo.gle/4e0FsBf</a> Stateful morphing button → <a href= "https://goo.gle/4ebBNR2">https://goo.gle/4ebBNR2</a> Drag and Drop → <a href= "https://goo.gle/3XlP2Yn">https://goo.gle/3XlP2Yn</a> Isotope recreation → <a href= "https://goo.gle/4dVX5lN">https://goo.gle/4dVX5lN</a> Local development animated → <a href= "https://goo.gle/3XHjm17">https://goo.gle/3XHjm17</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> → <a href= "https://goo.gle/452aBRb">https://goo.gle/452aBRb</a> <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> → <a href= "https://goo.gle/457oMnS">https://goo.gle/457oMnS</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face Host of Tools Today → <a href= "https://goo.gle/4aI6JpC">https://goo.gle/4aI6JpC</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 → <a href= "https://goo.gle/4e4YTcM">https://goo.gle/4e4YTcM</a> Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> → <a href= "https://goo.gle/3yFnHYu">https://goo.gle/3yFnHYu</a> <a href="https://www.instagram.com/argyleink/">Instagram</a> → <a href="https://goo.gle/3wUb6QJ">https://goo.gle/3wUb6QJ</a> <a href="https://a.nerdy.dev/youtube">YouTube</a> → <a href= "https://goo.gle/4dZNKK7">https://goo.gle/4dZNKK7</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → <a href= "https://goo.gle/4bFErxq">https://goo.gle/4bFErxq</a> VisBug → <a href= "https://goo.gle/4bDcVQZ">https://goo.gle/4bDcVQZ</a> The CSS Podcast #CSSpodcast ]]></content:encoded> <enclosure length="61574412" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP089_final.mp3?dest-id=1891556" /> <itunes:duration>41:51</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords /> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>088: State queries</title> <itunes:title>088: State queries</itunes:title> <pubDate>Thu, 12 Sep 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[8ed17cc7-529f-4788-8fe2-de258827f65e]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/088-state-queries]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3WVhSi6">https://goo.gle/3WVhSi6</a> state queries syntax → <a href= "https://goo.gle/3T2gI33">https://goo.gle/3T2gI33</a> explainer → <a href= "https://goo.gle/3XevW7x">https://goo.gle/3XevW7x</a> Intent To Prototype → <a href= "https://goo.gle/3Au8rOY">https://goo.gle/3Au8rOY</a> Scroll Snap Events → <a href= "https://goo.gle/47koXO1">https://goo.gle/47koXO1</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> → <a href= "https://goo.gle/452aBRb">https://goo.gle/452aBRb</a> <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> → <a href= "https://goo.gle/457oMnS">https://goo.gle/457oMnS</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face Host of Tools Today → <a href= "https://goo.gle/4aI6JpC">https://goo.gle/4aI6JpC</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 → <a href= "https://goo.gle/4e4YTcM">https://goo.gle/4e4YTcM</a> Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> → <a href= "https://goo.gle/3yFnHYu">https://goo.gle/3yFnHYu</a> <a href="https://www.instagram.com/argyleink/">Instagram</a> → <a href="https://goo.gle/3wUb6QJ">https://goo.gle/3wUb6QJ</a> <a href="https://a.nerdy.dev/youtube">YouTube</a> → <a href= "https://goo.gle/4dZNKK7">https://goo.gle/4dZNKK7</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → <a href= "https://goo.gle/4bFErxq">https://goo.gle/4bFErxq</a> VisBug → <a href= "https://goo.gle/4bDcVQZ">https://goo.gle/4bDcVQZ</a> The CSS Podcast #CSSpodcast Watch more <span data-rich-links= "{"dde_di":"kix.kv4yk58thqp3","dde-fdv":"The CSS Podcast","dde-sii":"dropdownItem.v3hpoutznh35","ddefe-ddi":{"cv":{"op":"set","opValue":[{"di-id":"dropdownItem.qly9quk1i2d","di-v":"Please Select","di-dv":"Please Select","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#ffcfc9"},"ts_fgc2":{"clr_type":0,"hclr_color":"#b10202"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.vlpr339db3ed","di-v":"New in Chrome","di-dv":"New in Chrome","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.3z7ohn67mwpu","di-v":"Chrome Dev Labs","di-dv":"Chrome Dev Labs","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.g6ptmrtvim72","di-v":"Chrome Passkeys","di-dv":"Chrome Passkeys","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.gwsgrhe4jvkq","di-v":"Chrome Shorts","di-dv":"Chrome Shorts","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.7in3u5yugut5","di-v":"ChromeOS Customer Stories","di-dv":"ChromeOS Customer Stories","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.4zzj72c17vmg","di-v":"Designing in the Browser","di-dv":"Designing in the Browser","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.h2qf4ep8sszt","di-v":"DevTools Tips","di-dv":"DevTools Tips","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.opik57z5gbsb","di-v":"GUI Challenges","di-dv":"GUI Challenges","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.rhpehaso3q1w","di-v":"What's New in DevTools","di-dv":"What's New in DevTools","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.56mgq24g6avu","di-v":"What is Privacy Sandbox?","di-dv":"What is Privacy Sandbox?","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.ecczfpc9pnpq","di-v":"GUI Snippets","di-dv":"GUI Snippets","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.v3hpoutznh35","di-v":"The CSS Podcast","di-dv":"The CSS Podcast","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}}]}},"ddefe-t":"Chrome Series","type":"dropdown"}"> The CSS Podcast → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/</a><span data-rich-links="{"dde_di":"kix.ainnedpjmcik","dde-fdv":"CSSpodcast ","dde-sii":"dropdownItem.d74ii3f45nm5","ddefe-ddi":{"cv":{"op":"set","opValue":[{"di-id":"dropdownItem.qvxlzhrxyzcv","di-v":"Please Select","di-dv":"Please Select","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#ffcfc9"},"ts_fgc2":{"clr_type":0,"hclr_color":"#b10202"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.4wbsj0a6qb58","di-v":"cc","di-dv":"cc","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.d74ii3f45nm5","di-v":"CSSpodcast ","di-dv":"CSSpodcast ","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.yhje6bh6k62e","di-v":"DevToolsTips ","di-dv":"DevToolsTips ","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.dr2spzn8xdrk","di-v":"GUIchallenges","di-dv":"GUIchallenges","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.ymnfay1r0ysd","di-v":"NewInDevTools ","di-dv":"NewInDevTools ","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.6stx37ntbil5","di-v":"NewInChrome","di-dv":"NewInChrome","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":null},"ts_fgc2":{"clr_type":0,"hclr_color":null},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}},{"di-id":"dropdownItem.8l2ilcq3l6xx","di-v":"Privacy-Sandbox","di-dv":"Privacy-Sandbox","di-ts":{"ts_bd":false,"ts_fs":11,"ts_ff":"Arial","ts_it":false,"ts_sc":false,"ts_st":false,"ts_tw":400,"ts_un":false,"ts_va":"nor","ts_bgc2":{"clr_type":0,"hclr_color":"#e8eaed"},"ts_fgc2":{"clr_type":0,"hclr_color":"#000000"},"ts_bd_i":false,"ts_fs_i":false,"ts_ff_i":false,"ts_it_i":false,"ts_sc_i":false,"ts_st_i":false,"ts_un_i":false,"ts_va_i":false,"ts_bgc2_i":false,"ts_fgc2_i":false}}]}},"ddefe-t":"Chrome Playlists","type":"dropdown"}"><a href="https://goo.gle/CSSpodcast">CSSpodcast</a> Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> #CSSPodcast #ChromeForDevelopers #Chrome Speaker: Una Kravets, Adam Argyle]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3WVhSi6">https://goo.gle/3WVhSi6</a> state queries syntax → <a href= "https://goo.gle/3T2gI33">https://goo.gle/3T2gI33</a> explainer → <a href= "https://goo.gle/3XevW7x">https://goo.gle/3XevW7x</a> Intent To Prototype → <a href= "https://goo.gle/3Au8rOY">https://goo.gle/3Au8rOY</a> Scroll Snap Events → <a href= "https://goo.gle/47koXO1">https://goo.gle/47koXO1</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> → <a href= "https://goo.gle/452aBRb">https://goo.gle/452aBRb</a> <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> → <a href= "https://goo.gle/457oMnS">https://goo.gle/457oMnS</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face Host of Tools Today → <a href= "https://goo.gle/4aI6JpC">https://goo.gle/4aI6JpC</a> & <a href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 → <a href= "https://goo.gle/4e4YTcM">https://goo.gle/4e4YTcM</a> Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> → <a href= "https://goo.gle/3yFnHYu">https://goo.gle/3yFnHYu</a> <a href="https://www.instagram.com/argyleink/">Instagram</a> → <a href="https://goo.gle/3wUb6QJ">https://goo.gle/3wUb6QJ</a> <a href="https://a.nerdy.dev/youtube">YouTube</a> → <a href= "https://goo.gle/4dZNKK7">https://goo.gle/4dZNKK7</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → <a href= "https://goo.gle/4bFErxq">https://goo.gle/4bFErxq</a> VisBug → <a href= "https://goo.gle/4bDcVQZ">https://goo.gle/4bDcVQZ</a> The CSS Podcast #CSSpodcast Watch more The CSS Podcast → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/</a><a href="https://goo.gle/CSSpodcast">CSSpodcast</a> Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> #CSSPodcast #ChromeForDevelopers #Chrome Speaker: Una Kravets, Adam Argyle]]></content:encoded> <enclosure length="33665211" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP088_final.mp3?dest-id=1891556" /> <itunes:duration>23:13</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>thecsspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>087: Anchor positioning</title> <itunes:title>087: Anchor positioning</itunes:title> <pubDate>Thu, 22 Aug 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[ce5d7ee4-fd83-4f30-abea-ae6c0ba64415]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/087-anchor-positioning]]></link> <description><![CDATA[In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → <a href= "https://goo.gle/3SWrvM5">https://goo.gle/3SWrvM5</a> CSS anchor positioning → <a href= "https://goo.gle/4dwgmd9">https://goo.gle/4dwgmd9</a> <a href= "https://www.youtube.com/watch?v=p18LhnYNkDQ&list=PLjnstNlepBvO0-I7iwqpkOY_fwAop6Pl-&index=11"> Tab’s talk from CSS Day</a> → <a href= "https://goo.gle/4ds8g5B">https://goo.gle/4ds8g5B</a> Una's Anchor Tool → <a href= "https://goo.gle/3yDYDSd">https://goo.gle/3yDYDSd</a> <div dir="ltr" align="left"> <table> <colgroup> <col width="554" /></colgroup> <tbody> <tr> <td> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 </td> </tr> </tbody> </table> </div> ]]></description> <content:encoded><![CDATA[In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → <a href= "https://goo.gle/3SWrvM5">https://goo.gle/3SWrvM5</a> CSS anchor positioning → <a href= "https://goo.gle/4dwgmd9">https://goo.gle/4dwgmd9</a> <a href= "https://www.youtube.com/watch?v=p18LhnYNkDQ&list=PLjnstNlepBvO0-I7iwqpkOY_fwAop6Pl-&index=11"> Tab’s talk from CSS Day</a> → <a href= "https://goo.gle/4ds8g5B">https://goo.gle/4ds8g5B</a> Una's Anchor Tool → <a href= "https://goo.gle/3yDYDSd">https://goo.gle/3yDYDSd</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 ]]></content:encoded> <enclosure length="55382957" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP087_final_1.mp3?dest-id=1891556" /> <itunes:duration>38:02</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,googlechrome,thecsspodcast,chromefordevelopers,anchorpositioning</itunes:keywords> <itunes:subtitle><![CDATA[In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → CSS anchor positioning → → Una's Anchor Tool → Una Kravets...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>086: Nesting 2024+</title> <itunes:title>086: Nesting 2024+</itunes:title> <pubDate>Thu, 08 Aug 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[e7ed2937-b264-4278-9789-0a09f2181d2f]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/086-nesting-2024]]></link> <description><![CDATA[In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → <a href= "https://goo.gle/3SvM9T4">https://goo.gle/3SvM9T4</a> Episode 65 → <a href= "https://goo.gle/3ygA7X1">https://goo.gle/3ygA7X1</a> CSS Nesting Update → <a href= "https://goo.gle/3WHCRpK">https://goo.gle/3WHCRpK</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></description> <content:encoded><![CDATA[In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → <a href= "https://goo.gle/3SvM9T4">https://goo.gle/3SvM9T4</a> Episode 65 → <a href= "https://goo.gle/3ygA7X1">https://goo.gle/3ygA7X1</a> CSS Nesting Update → <a href= "https://goo.gle/3WHCRpK">https://goo.gle/3WHCRpK</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></content:encoded> <enclosure length="12205391" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP086_final.mp3?dest-id=1891556" /> <itunes:duration>08:10</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>nesting,thecsspodcast</itunes:keywords> <itunes:subtitle><![CDATA[In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → Episode 65 → CSS Nesting Update → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>085: Linear easing function fun</title> <itunes:title>085: Linear easing function fun</itunes:title> <pubDate>Thu, 01 Aug 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[85daa516-ce0c-4e0b-b7ec-09b1f084b5e6]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/085-linear-easing-function-fun]]></link> <description><![CDATA[In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → <a href= "https://goo.gle/4frnp8y">https://goo.gle/4frnp8y</a> linear() generator → <a href= "https://goo.gle/46xs2JZ">https://goo.gle/46xs2JZ</a> Complex animation curves in CSS with linear() → <a href= "https://goo.gle/4ftm0Oz">https://goo.gle/4ftm0Oz</a> Open Props premade spring and bounce variables → <a href= "https://goo.gle/46uaGOc">https://goo.gle/46uaGOc</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 ]]></description> <content:encoded><![CDATA[In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → <a href= "https://goo.gle/4frnp8y">https://goo.gle/4frnp8y</a> linear() generator → <a href= "https://goo.gle/46xs2JZ">https://goo.gle/46xs2JZ</a> Complex animation curves in CSS with linear() → <a href= "https://goo.gle/4ftm0Oz">https://goo.gle/4ftm0Oz</a> Open Props premade spring and bounce variables → <a href= "https://goo.gle/46uaGOc">https://goo.gle/46uaGOc</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 ]]></content:encoded> <enclosure length="23808481" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP087_final.mp3?dest-id=1891556" /> <itunes:duration>16:10</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,developer,chrome,developers,googlechrome,adamargyle,unakravets,thecsspodcast,csspodcast,csstips,csslatest,cssupdates,chromefordevelopers,csstrick</itunes:keywords> <itunes:subtitle><![CDATA[In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → linear() generator → Complex animation curves in CSS with linear() → Open...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>084: Text Wrap</title> <itunes:title>084: Text Wrap</itunes:title> <pubDate>Thu, 11 Jul 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[fa886ca9-54fc-418b-aa53-5610c5f2b62f]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/084-text-wrap]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3zvwixd">https://goo.gle/3zvwixd</a> soft breaks → <a href= "https://goo.gle/4cXKLAq">https://goo.gle/4cXKLAq</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3zvwixd">https://goo.gle/3zvwixd</a> soft breaks → <a href= "https://goo.gle/4cXKLAq">https://goo.gle/4cXKLAq</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></content:encoded> <enclosure length="12269707" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP084_v1.mp3?dest-id=1891556" /> <itunes:duration>12:47</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>thecsspodcast,textwrap</itunes:keywords> <itunes:subtitle><![CDATA[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 →...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>083: :has() tips and tricks</title> <itunes:title>083: :has() tips and tricks</itunes:title> <pubDate>Wed, 03 Jul 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[753eabb8-acb6-40bf-86da-d9cf62f0c066]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/083-has-tips-and-tricks]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/4cID6pE">https://goo.gle/4cID6pE</a> Piccali → <a href= "https://goo.gle/4ePKJMG">https://goo.gle/4ePKJMG</a> Ahmad Shadeed → <a href= "https://goo.gle/4bsk85F">https://goo.gle/4bsk85F</a> The Looper → <a href= "https://goo.gle/3yKmXkI">https://goo.gle/3yKmXkI</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/4cID6pE">https://goo.gle/4cID6pE</a> Piccali → <a href= "https://goo.gle/4ePKJMG">https://goo.gle/4ePKJMG</a> Ahmad Shadeed → <a href= "https://goo.gle/4bsk85F">https://goo.gle/4bsk85F</a> The Looper → <a href= "https://goo.gle/3yKmXkI">https://goo.gle/3yKmXkI</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></content:encoded> <enclosure length="34789772" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP083_v2.mp3?dest-id=1891556" /> <itunes:duration>36:14</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>thecsspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 → Piccali → Ahmad Shadeed →...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> </item> <item> <title>082: What's new in color & color functions</title> <itunes:title>082: What's new in color & color functions</itunes:title> <pubDate>Thu, 27 Jun 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[68678ac5-0945-422c-81ff-23da2dfcca80]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/082-whats-new-in-color-color-functions]]></link> <description><![CDATA[In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → <a href= "https://goo.gle/4cRRJHt">https://goo.gle/4cRRJHt</a> Apple Annie CSS Color Modules and Changes, Part I → <a href= "https://goo.gle/3xtTr2A">https://goo.gle/3xtTr2A</a> Lea verou article on RCS for contrast → <a href= "https://goo.gle/3L3x5YF">https://goo.gle/3L3x5YF</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube </a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 ]]></description> <content:encoded><![CDATA[In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → <a href= "https://goo.gle/4cRRJHt">https://goo.gle/4cRRJHt</a> Apple Annie CSS Color Modules and Changes, Part I → <a href= "https://goo.gle/3xtTr2A">https://goo.gle/3xtTr2A</a> Lea verou article on RCS for contrast → <a href= "https://goo.gle/3L3x5YF">https://goo.gle/3L3x5YF</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube </a>Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a><a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 ]]></content:encoded> <enclosure length="17661523" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP082_v1.mp3?dest-id=1891556" /> <itunes:duration>18:24</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords /> <itunes:subtitle><![CDATA[In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → Apple Annie CSS Color Modules and Changes, Part I → Lea verou article on RCS for contrast → Una...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>081: Trigonometric Functions</title> <itunes:title>081: Trigonometric Functions</itunes:title> <pubDate>Thu, 20 Jun 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[b6435a70-a0ab-46a4-8db2-1bb5fb249be1]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/081-trigonometric-functions]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/4cmBm5r">https://goo.gle/4cmBm5r</a> Great guide and overview from Daniel Wilson → <a href= "https://goo.gle/4enKgBe">https://goo.gle/4enKgBe</a> layout pow() → <a href= "https://goo.gle/3RlvAsI">https://goo.gle/3RlvAsI</a> Using Absolute Value, Sign, Rounding and Modulo in CSS Today → <a href= "https://goo.gle/4aY3OJz">https://goo.gle/4aY3OJz</a> Time based animation → <a href= "https://goo.gle/3x6Dm2K">https://goo.gle/3x6Dm2K</a> CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → <a href= "https://goo.gle/4bZyrj2">https://goo.gle/4bZyrj2</a> Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → <a href= "https://goo.gle/45uqikj">https://goo.gle/45uqikj</a> CSS physics for transitions and keyframes with these math functions → <a href= "https://goo.gle/3VltDgX">https://goo.gle/3VltDgX</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/4cmBm5r">https://goo.gle/4cmBm5r</a> Great guide and overview from Daniel Wilson → <a href= "https://goo.gle/4enKgBe">https://goo.gle/4enKgBe</a> layout pow() → <a href= "https://goo.gle/3RlvAsI">https://goo.gle/3RlvAsI</a> Using Absolute Value, Sign, Rounding and Modulo in CSS Today → <a href= "https://goo.gle/4aY3OJz">https://goo.gle/4aY3OJz</a> Time based animation → <a href= "https://goo.gle/3x6Dm2K">https://goo.gle/3x6Dm2K</a> CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → <a href= "https://goo.gle/4bZyrj2">https://goo.gle/4bZyrj2</a> Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → <a href= "https://goo.gle/45uqikj">https://goo.gle/45uqikj</a> CSS physics for transitions and keyframes with these math functions → <a href= "https://goo.gle/3VltDgX">https://goo.gle/3VltDgX</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></content:encoded> <enclosure length="62505654" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP081_v2.mp3?dest-id=1891556" /> <itunes:duration>43:04</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>csspodcast,trigonometricfunctions,mathfunctionsincss,whatismathfunctionincss,canyoudocalculationsincss</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>80: Animating to and from top-layer</title> <itunes:title>80: Animating to and from top-layer</itunes:title> <pubDate>Thu, 13 Jun 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[e5656f83-f1d1-438a-83e0-fbbb6e77febd]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/80-animating-to-and-from-top-layer]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/4c2elUW">https://goo.gle/4c2elUW</a> Four new CSS features for smooth entry and exit animations by Una → <a href="https://goo.gle/3KpyB7e">https://goo.gle/3KpyB7e</a> Using @starting-style and transition-behavior for enter and exit stage effects → <a href= "https://goo.gle/452FG7p">https://goo.gle/452FG7p</a> Popover on MDN → <a href= "https://goo.gle/453xfss">https://goo.gle/453xfss</a> :popover-open on MDN → <a href= "https://goo.gle/3x5XLVl">https://goo.gle/3x5XLVl</a> Dialog and popover animated → <a href= "https://goo.gle/3Kn1Ck7">https://goo.gle/3Kn1Ck7</a> Popover animated with nesting → <a href= "https://goo.gle/3wW3Qns">https://goo.gle/3wW3Qns</a> What is the top layer? → <a href= "https://goo.gle/457rUjQ">https://goo.gle/457rUjQ</a> overlay property on MDN → <a href= "https://goo.gle/3yKNRsT">https://goo.gle/3yKNRsT</a> MDN demos → <a href= "https://goo.gle/4c2eIyO">https://goo.gle/4c2eIyO</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/4c2elUW">https://goo.gle/4c2elUW</a> Four new CSS features for smooth entry and exit animations by Una → <a href="https://goo.gle/3KpyB7e">https://goo.gle/3KpyB7e</a> Using @starting-style and transition-behavior for enter and exit stage effects → <a href= "https://goo.gle/452FG7p">https://goo.gle/452FG7p</a> Popover on MDN → <a href= "https://goo.gle/453xfss">https://goo.gle/453xfss</a> :popover-open on MDN → <a href= "https://goo.gle/3x5XLVl">https://goo.gle/3x5XLVl</a> Dialog and popover animated → <a href= "https://goo.gle/3Kn1Ck7">https://goo.gle/3Kn1Ck7</a> Popover animated with nesting → <a href= "https://goo.gle/3wW3Qns">https://goo.gle/3wW3Qns</a> What is the top layer? → <a href= "https://goo.gle/457rUjQ">https://goo.gle/457rUjQ</a> overlay property on MDN → <a href= "https://goo.gle/3yKNRsT">https://goo.gle/3yKNRsT</a> MDN demos → <a href= "https://goo.gle/4c2eIyO">https://goo.gle/4c2eIyO</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></content:encoded> <enclosure length="45190795" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP080_v2.mp3?dest-id=1891556" /> <itunes:duration>31:23</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>web,Google,chrome,developers,chromedevelopers,csspodcast,popoverapianddialogelement,whentousepopoverapi,whentousedialogelement</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>79: Popover and Dialog</title> <itunes:title>79: Popover and Dialog</itunes:title> <pubDate>Thu, 06 Jun 2024 21:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[557c5819-4438-418b-9585-e6d7d8bdbfc0]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/79-popover-and-dialog]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3Vo2dIs">https://goo.gle/3Vo2dIs</a> Dialogs and popovers seem similar. How are they different? → <a href="https://goo.gle/3wXD1z5">https://goo.gle/3wXD1z5</a> Dialog dilemmas and modal mischief → <a href= "https://goo.gle/3R9nmDE">https://goo.gle/3R9nmDE</a> Semantics and the popover attribute → <a href= "https://goo.gle/3Vl3NuM">https://goo.gle/3Vl3NuM</a> Building a dialog component GUI Challenges → <a href="https://goo.gle/4c0YFkK">https://goo.gle/4c0YFkK</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3Vo2dIs">https://goo.gle/3Vo2dIs</a> Dialogs and popovers seem similar. How are they different? → <a href="https://goo.gle/3wXD1z5">https://goo.gle/3wXD1z5</a> Dialog dilemmas and modal mischief → <a href= "https://goo.gle/3R9nmDE">https://goo.gle/3R9nmDE</a> Semantics and the popover attribute → <a href= "https://goo.gle/3Vl3NuM">https://goo.gle/3Vl3NuM</a> Building a dialog component GUI Challenges → <a href="https://goo.gle/4c0YFkK">https://goo.gle/4c0YFkK</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakrav">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘]]></content:encoded> <enclosure length="19123339" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP079_v2.mp3?dest-id=1891556" /> <itunes:duration>19:55</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>css,chrome,chromedevelopers,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 → Dialogs and popovers seem similar. How are they different? → ...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>78: Season 4 wrap!</title> <itunes:title>Season 4 wrap!</itunes:title> <pubDate>Wed, 06 Dec 2023 19:28:12 +0000</pubDate> <guid isPermaLink="false"><![CDATA[648f79e0-6c96-4295-ae8f-57e2749539ae]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/78-season-4-wrap]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/418EnBG">https://goo.gle/418EnBG</a> Why isn’t my element stuck → <a href= "https://goo.gle/3uSX7Jk">https://goo.gle/3uSX7Jk</a> Why isn’t my custom property the value I expect → <a href= "https://goo.gle/47BcZPj">https://goo.gle/47BcZPj</a> How do I center a div → <a href= "https://goo.gle/3RiOBLA">https://goo.gle/3RiOBLA</a> Why isn’t my animation glitching → <a href= "https://goo.gle/4a5fzPh">https://goo.gle/4a5fzPh</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/418EnBG">https://goo.gle/418EnBG</a> Why isn’t my element stuck → <a href= "https://goo.gle/3uSX7Jk">https://goo.gle/3uSX7Jk</a> Why isn’t my custom property the value I expect → <a href= "https://goo.gle/47BcZPj">https://goo.gle/47BcZPj</a> How do I center a div → <a href= "https://goo.gle/3RiOBLA">https://goo.gle/3RiOBLA</a> Why isn’t my animation glitching → <a href= "https://goo.gle/4a5fzPh">https://goo.gle/4a5fzPh</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="19776053" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP078_v4.mp3?dest-id=1891556" /> <itunes:duration>19:58</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords /> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>77: Why isn't percentage working here?</title> <itunes:title>Why isn't percentage working here?</itunes:title> <pubDate>Tue, 28 Nov 2023 18:15:27 +0000</pubDate> <guid isPermaLink="false"><![CDATA[de940b9e-c23a-49a0-92a9-e6f4cf1a2da8]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/77-why-isnt-percentage-working-here]]></link> <description><![CDATA[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 <percentage> → <a href= "https://goo.gle/47XtWU1">https://goo.gle/47XtWU1</a> Understanding CSS Percentage → <a href= "https://goo.gle/3RhLJzG">https://goo.gle/3RhLJzG</a> CSS Box Sizing Module Level 3 → <a href= "https://goo.gle/46FRF9T">https://goo.gle/46FRF9T</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/47XtWU1">https://goo.gle/47XtWU1</a> Understanding CSS Percentage → <a href= "https://goo.gle/3RhLJzG">https://goo.gle/3RhLJzG</a> CSS Box Sizing Module Level 3 → <a href= "https://goo.gle/46FRF9T">https://goo.gle/46FRF9T</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="15055774" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP077_v3.mp3?dest-id=1891556" /> <itunes:duration>15:05</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,thecsspodcast,csspodcast,csslatest,cssupdates,csspod,chromefordevelopers,thecsspod,chromelatest</itunes:keywords> <itunes:subtitle><![CDATA[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 <percentage>...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>76: Why isn't my element stuck where I wanted it to stick?</title> <itunes:title>Why isn't my element stuck where I wanted it to stick?</itunes:title> <pubDate>Wed, 15 Nov 2023 18:21:36 +0000</pubDate> <guid isPermaLink="false"><![CDATA[bd2f013e-89ed-4a1b-b4fc-53ef6da384f8]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/76-why-isnt-my-element-stuck-where-i-wanted-it-to-stick]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3QICxTz">https://goo.gle/3QICxTz</a> sticky desperado - <a href= "https://goo.gle/3sC3OPj">https://goo.gle/3sC3OPj</a> sticky slide - <a href= "https://goo.gle/47bcRGb">https://goo.gle/47bcRGb</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3QICxTz">https://goo.gle/3QICxTz</a> sticky desperado - <a href= "https://goo.gle/3sC3OPj">https://goo.gle/3sC3OPj</a> sticky slide - <a href= "https://goo.gle/47bcRGb">https://goo.gle/47bcRGb</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="9963248" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP076_v3.mp3?dest-id=1891556" /> <itunes:duration>09:52</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,developer,chrome,developers,googlechrome,adamargyle,unakravets,thecsspodcast,csspodcast,csstips,csslatest,cssupdates,chromefordevelopers,csstrick</itunes:keywords> <itunes:subtitle><![CDATA[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....]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>75: Why isn't my custom property the value I expect?</title> <itunes:title>Why isn't my custom property the value I expect?</itunes:title> <pubDate>Fri, 27 Oct 2023 17:14:06 +0000</pubDate> <guid isPermaLink="false"><![CDATA[d9b6af07-b920-4ea2-91e8-332c07931ceb]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/75-why-isnt-my-custom-property-the-value-i-expect]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3FDo7yA">https://goo.gle/3FDo7yA</a> How custom property values are computed →<a href= "https://goo.gle/49cOUiQ">https://goo.gle/49cOUiQ</a> A complete guide to custom properties → <a href= "https://goo.gle/40gtVb8">https://goo.gle/40gtVb8</a> The big gotcha with custom properties → <a href= "https://goo.gle/45VwUHe">https://goo.gle/45VwUHe</a> CodePen → <a href= "https://goo.gle/3SdMnyY">https://goo.gle/3SdMnyY</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3FDo7yA">https://goo.gle/3FDo7yA</a> How custom property values are computed →<a href= "https://goo.gle/49cOUiQ">https://goo.gle/49cOUiQ</a> A complete guide to custom properties → <a href= "https://goo.gle/40gtVb8">https://goo.gle/40gtVb8</a> The big gotcha with custom properties → <a href= "https://goo.gle/45VwUHe">https://goo.gle/45VwUHe</a> CodePen → <a href= "https://goo.gle/3SdMnyY">https://goo.gle/3SdMnyY</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Chrome for Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="28629827" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP075_v1.mp3?dest-id=1891556" /> <itunes:duration>19:32</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>css,chrome,googlechrome,adamargyle,unakravets,chromedevelopers,thecsspodcast,csspodcast,chromedeveloper,csslatest,cssupdates,chromefordevelopers</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>74: How do I center a div?</title> <itunes:title>How do I center a div?</itunes:title> <pubDate>Wed, 11 Oct 2023 17:30:29 +0000</pubDate> <guid isPermaLink="false"><![CDATA[31b5abb2-c123-4d4e-8a3c-ec9e67fe78c7]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/74-how-do-i-center-a-div]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3RRki02">https://goo.gle/3RRki02</a> Comparing grid and flex place-items and place-content → <a href= "https://goo.gle/3ZE3NGM">https://goo.gle/3ZE3NGM</a> Centering in CSS: A Complete Guide → <a href= "https://goo.gle/46xudw7">https://goo.gle/46xudw7</a> Centering examples from Una → <a href= "https://goo.gle/3rF7lvR">https://goo.gle/3rF7lvR</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3RRki02">https://goo.gle/3RRki02</a> Comparing grid and flex place-items and place-content → <a href= "https://goo.gle/3ZE3NGM">https://goo.gle/3ZE3NGM</a> Centering in CSS: A Complete Guide → <a href= "https://goo.gle/46xudw7">https://goo.gle/46xudw7</a> Centering examples from Una → <a href= "https://goo.gle/3rF7lvR">https://goo.gle/3rF7lvR</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="24922000" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP074_v5.mp3?dest-id=1891556" /> <itunes:duration>17:01</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,chromedevelopers,thecsspodcast,csspodcast,chromefordevelopers</itunes:keywords> <itunes:subtitle><![CDATA[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 → ...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>73: Why is my animation glitching?</title> <itunes:title>Why is my animation glitching?</itunes:title> <pubDate>Thu, 21 Sep 2023 20:35:21 +0000</pubDate> <guid isPermaLink="false"><![CDATA[510134d6-d6cb-42f9-b278-56e08348c4b1]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/73-why-is-my-animation-glitching]]></link> <description><![CDATA[On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base! Links: MDN transform-style - <a href= "https://goo.gle/45YFu8B">https://goo.gle/45YFu8B</a> MDN backface-visibility - <a href= "https://goo.gle/46mPvfE">https://goo.gle/46mPvfE</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base! Links: MDN transform-style - <a href= "https://goo.gle/45YFu8B">https://goo.gle/45YFu8B</a> MDN backface-visibility - <a href= "https://goo.gle/46mPvfE">https://goo.gle/46mPvfE</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="37663934" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP073_final.mp3?dest-id=1891556" /> <itunes:duration>25:50</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,chromefordevelopers</itunes:keywords> <itunes:subtitle><![CDATA[On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base! Links: MDN transform-style - MDN backface-visibility - Una Kravets (co-host) | | Making the web more colorful...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>72: Why does my gradient have muddy colors in the middle?</title> <itunes:title>Why does my gradient have muddy colors in the middle</itunes:title> <pubDate>Fri, 08 Sep 2023 19:40:45 +0000</pubDate> <guid isPermaLink="false"><![CDATA[9a78c7e1-3a8f-4123-af95-7c6ad883b8e6]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/72-why-does-my-gradient-have-muddy-colors-in-the-middle]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3RhyvmP">https://goo.gle/3RhyvmP</a> various gradients in color spaces - <a href= "https://goo.gle/3Pc02TV">https://goo.gle/3Pc02TV</a> modern css gradient tool - <a href= "https://goo.gle/3P4KxNI">https://goo.gle/3P4KxNI</a> try color mix - <a href= "https://goo.gle/3r2toML">https://goo.gle/3r2toML</a> color-mix() with white hover codepen - <a href= "https://goo.gle/3Pw6mHm">https://goo.gle/3Pw6mHm</a> interpolation visualizer - <a href= "https://goo.gle/45GwS6t">https://goo.gle/45GwS6t</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast ]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3RhyvmP">https://goo.gle/3RhyvmP</a> various gradients in color spaces - <a href= "https://goo.gle/3Pc02TV">https://goo.gle/3Pc02TV</a> modern css gradient tool - <a href= "https://goo.gle/3P4KxNI">https://goo.gle/3P4KxNI</a> try color mix - <a href= "https://goo.gle/3r2toML">https://goo.gle/3r2toML</a> color-mix() with white hover codepen - <a href= "https://goo.gle/3Pw6mHm">https://goo.gle/3Pw6mHm</a> interpolation visualizer - <a href= "https://goo.gle/45GwS6t">https://goo.gle/45GwS6t</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast ]]></content:encoded> <enclosure length="23716326" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP072_2.mp3?dest-id=1891556" /> <itunes:duration>16:11</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>web,Google,css,chrome,googlechrome,adamargyle,unakravets,googlechromedevelopers,thecsspodcast,csspodcast,googlechromedeveloper,csslatest,cssupdates,csspod</itunes:keywords> <itunes:subtitle><![CDATA[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 - various gradients...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>71: Why do I have layout shift?</title> <itunes:title>Why do I have layout shift?</itunes:title> <pubDate>Thu, 31 Aug 2023 21:43:48 +0000</pubDate> <guid isPermaLink="false"><![CDATA[cc37f3e9-7497-4489-953c-ed4244a1a65f]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/71-why-do-i-have-layout-shift]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3kle3AW">https://goo.gle/3kle3AW</a> Optimizing CLS - <a href= "https://goo.gle/3fxu6IE">https://goo.gle/3fxu6IE</a> CSS for Web Vitals - <a href= "https://goo.gle/3E98gY9">https://goo.gle/3E98gY9</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3kle3AW">https://goo.gle/3kle3AW</a> Optimizing CLS - <a href= "https://goo.gle/3fxu6IE">https://goo.gle/3fxu6IE</a> CSS for Web Vitals - <a href= "https://goo.gle/3E98gY9">https://goo.gle/3E98gY9</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="16544584" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP071_v3_Bug_266695879.mp3?dest-id=1891556" /> <itunes:duration>11:30</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,chromedeveloper</itunes:keywords> <itunes:subtitle><![CDATA[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 - Optimizing CLS -...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>70: Why is my image distorted?</title> <itunes:title>Why is my image distorted?</itunes:title> <pubDate>Fri, 25 Aug 2023 17:50:12 +0000</pubDate> <guid isPermaLink="false"><![CDATA[3f29f9df-135e-42fd-bd0a-0f17ebcdde4b]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/70-why-is-my-image-distorted]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3E98gY9">https://goo.gle/3E98gY9</a> Learn Responsive Images → <a href= "https://goo.gle/45EFuds">https://goo.gle/45EFuds</a> Aspect Ratio → <a href= "https://goo.gle/3PdyjDS">https://goo.gle/3PdyjDS</a> Demos → <a href= "https://goo.gle/3qJuQ6z">https://goo.gle/3qJuQ6z</a> & <a href="https://goo.gle/45uDvZB">https://goo.gle/45uDvZB</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3E98gY9">https://goo.gle/3E98gY9</a> Learn Responsive Images → <a href= "https://goo.gle/45EFuds">https://goo.gle/45EFuds</a> Aspect Ratio → <a href= "https://goo.gle/3PdyjDS">https://goo.gle/3PdyjDS</a> Demos → <a href= "https://goo.gle/3qJuQ6z">https://goo.gle/3qJuQ6z</a> & <a href="https://goo.gle/45uDvZB">https://goo.gle/45uDvZB</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="25711048" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP070_v4.mp3?dest-id=1891556" /> <itunes:duration>17:52</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,developer,chrome,developers,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,googlechromedeveloper,chromedeveloper,csstutorial,csslatest,cssupdates</itunes:keywords> <itunes:subtitle><![CDATA[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 → Learn Responsive Images → ...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>69: Why is it overflowing?</title> <itunes:title>Why is it overflowing?</itunes:title> <pubDate>Wed, 16 Aug 2023 19:25:02 +0000</pubDate> <guid isPermaLink="false"><![CDATA[5ff3362d-441c-4e68-a220-bca1e3c0528c]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/69-why-is-it-overflowing]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/441OGaH">https://goo.gle/441OGaH</a> Everything you need to know → <a href= "https://goo.gle/4434Ctj">https://goo.gle/4434Ctj</a> Check out → <a href= "https://goo.gle/3YrJDiw">https://goo.gle/3YrJDiw</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast ]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/441OGaH">https://goo.gle/441OGaH</a> Everything you need to know → <a href= "https://goo.gle/4434Ctj">https://goo.gle/4434Ctj</a> Check out → <a href= "https://goo.gle/3YrJDiw">https://goo.gle/3YrJDiw</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast ]]></content:encoded> <enclosure length="21680200" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP072_v2.mp3?dest-id=1891556" /> <itunes:duration>15:04</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Overflowing,csstutorial,whatiscss,whyisitoverflowing,cssoverflow,whatiscssoverflow,howtousecssoverflow,introductiontocssoverflow,introtocssoverflow,cssoverflowtutorial</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>68: Why isn't the margin applying?</title> <itunes:title>Why isn't the margin applying?</itunes:title> <pubDate>Wed, 09 Aug 2023 17:42:44 +0000</pubDate> <guid isPermaLink="false"><![CDATA[11f4cb9e-279d-4439-b024-c9a8b0692967]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/68-why-isnt-the-margin-applying]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/441OGaH">https://goo.gle/441OGaH</a> CSS Margins → <a href= "https://goo.gle/4434Ctj">https://goo.gle/4434Ctj</a> Learn more → <a href= "https://goo.gle/3YrJDiw">https://goo.gle/3YrJDiw</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> ]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/441OGaH">https://goo.gle/441OGaH</a> CSS Margins → <a href= "https://goo.gle/4434Ctj">https://goo.gle/4434Ctj</a> Learn more → <a href= "https://goo.gle/3YrJDiw">https://goo.gle/3YrJDiw</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> ]]></content:encoded> <enclosure length="23371980" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP071_v2.mp3?dest-id=1891556" /> <itunes:duration>16:14</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,code,css,coding,chrome,Margins,googlechrome,adamargyle,unakravets,csspodcast,chromedeveloper,cssmargins,cssmarginstutorial,chromedevelopersweb</itunes:keywords> <itunes:subtitle><![CDATA[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 → CSS Margins...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>67: Why isn't z-index working?</title> <itunes:title>Why isn't z-index working?</itunes:title> <pubDate>Tue, 01 Aug 2023 17:41:15 +0000</pubDate> <guid isPermaLink="false"><![CDATA[1b819c5e-7896-4fc8-93ca-999423dea747]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/67-why-isnt-z-index-working-0]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/43It8jl">https://goo.gle/43It8jl</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/43It8jl">https://goo.gle/43It8jl</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href="http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg">YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href="https://twitter.com/googlechrome">@googlechrome</a> Host of <a href="https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href="https://www.instagram.com/argyleink/">Instagram</a> | <a href="https://a.nerdy.dev/youtube">YouTube</a> <a href= "https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href="https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href= "https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a>]]></content:encoded> <enclosure length="24340608" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP070_v3.mp3?dest-id=1891556" /> <itunes:duration>16:55</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>web,Tools,css,Positioning,zindex,stackingcontext,thecsspodcast,csspodcast,whyisntmyzindexworking,whatiszindex,howtousezindex,zindextutorial,zindexerror,variablearchitecture</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>66: Season 3 recap & what’s next!</title> <itunes:title>Season 3 recap & what’s next!</itunes:title> <pubDate>Tue, 22 Nov 2022 18:05:44 +0000</pubDate> <guid isPermaLink="false"><![CDATA[c01f4fb4-188d-40c5-8027-7d247df6aa99]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/season-3-recap-whats-next]]></link> <description><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes on YouTube→ <a class= "yt-simple-endpoint style-scope yt-formatted-string" dir="auto" spellcheck="false" href= "https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbGw0clYzdWNKd3BUeFVIb1VjSnNsNW4tczdTQXxBQ3Jtc0tteUN0SDRwREl3eGVwYTFSbElON0hhSlZjNkQzc3hFTjdLT1FJcnlYRDRzWXBkdVZPcWZtVlVwdW9MNGZmZ3NTa3NzSllRblZEMnNvb1R4QW5vOGxMWXZ0VGN4ZEZ2UDZuT0puXzhyb2tPQS1IODRlVQ&q=https%3A%2F%2Fgoo.gle%2FCSSpodcast&v=Zg94DjzVNAo" target="_blank" rel= "nofollow noopener">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a class= "yt-simple-endpoint style-scope yt-formatted-string" dir="auto" spellcheck="false" href= "https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqazYxVXZHdWIxM2FJU1kwbE42TmpYQnRCM0VmUXxBQ3Jtc0ttNWp3UFRZTFk0U1F4bmV4NDFHUWJqNzA3T0ZKVlZCUlNFS3FYd1BtUHh0V3Nfa21pS2dNUkxtX1RESzlLcmFFWFJmbE1ockFSQkNGTkpiQ3ExTWwxTG03NXcxVVFRVThBV2d1VzNtNG9ZM2lOOGlWdw&q=https%3A%2F%2Fgoo.gle%2FChromeDevs&v=Zg94DjzVNAo" target="_blank" rel= "nofollow noopener">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes on YouTube→ <a class= "yt-simple-endpoint style-scope yt-formatted-string" dir="auto" spellcheck="false" href= "https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbGw0clYzdWNKd3BUeFVIb1VjSnNsNW4tczdTQXxBQ3Jtc0tteUN0SDRwREl3eGVwYTFSbElON0hhSlZjNkQzc3hFTjdLT1FJcnlYRDRzWXBkdVZPcWZtVlVwdW9MNGZmZ3NTa3NzSllRblZEMnNvb1R4QW5vOGxMWXZ0VGN4ZEZ2UDZuT0puXzhyb2tPQS1IODRlVQ&q=https%3A%2F%2Fgoo.gle%2FCSSpodcast&v=Zg94DjzVNAo" target="_blank" rel= "nofollow noopener">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a class= "yt-simple-endpoint style-scope yt-formatted-string" dir="auto" spellcheck="false" href= "https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqazYxVXZHdWIxM2FJU1kwbE42TmpYQnRCM0VmUXxBQ3Jtc0ttNWp3UFRZTFk0U1F4bmV4NDFHUWJqNzA3T0ZKVlZCUlNFS3FYd1BtUHh0V3Nfa21pS2dNUkxtX1RESzlLcmFFWFJmbE1ockFSQkNGTkpiQ3ExTWwxTG03NXcxVVFRVThBV2d1VzNtNG9ZM2lOOGlWdw&q=https%3A%2F%2Fgoo.gle%2FChromeDevs&v=Zg94DjzVNAo" target="_blank" rel= "nofollow noopener">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="52336615" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP067_v1.mp3?dest-id=1891556" /> <itunes:duration>36:21</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,thecsspodcast,csspodcast,chromedevelopersgooglechromedevelopers</itunes:keywords> <itunes:subtitle><![CDATA[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 ...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>65: Nesting</title> <itunes:title>Nesting</itunes:title> <pubDate>Tue, 15 Nov 2022 18:45:07 +0000</pubDate> <guid isPermaLink="false"><![CDATA[29cd7005-2008-4f39-85d3-e267ef971ab1]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/65-nesting]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3VgnoJR">https://goo.gle/3VgnoJR</a> Adam exploring the prototype implementation in Canary - <a href= "https://goo.gle/3UGsMpv">https://goo.gle/3UGsMpv</a> @scope and @layer and nesting - <a href="https://goo.gle/3EyJ3Hq">https://goo.gle/3EyJ3Hq</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3VgnoJR">https://goo.gle/3VgnoJR</a> Adam exploring the prototype implementation in Canary - <a href= "https://goo.gle/3UGsMpv">https://goo.gle/3UGsMpv</a> @scope and @layer and nesting - <a href="https://goo.gle/3EyJ3Hq">https://goo.gle/3EyJ3Hq</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="30705125" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP065_v2.mp3?dest-id=1891556" /> <itunes:duration>31:59</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,googlechromedevelopers,thecsspodcast,csspodcast,cssnesting,cssnestingtutorial,whatiscssnesting,introductiontocssnesting</itunes:keywords> <itunes:subtitle><![CDATA[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 - Adam exploring the prototype...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>64: Subgrid</title> <itunes:title>Subgrid</itunes:title> <pubDate>Tue, 08 Nov 2022 18:42:50 +0000</pubDate> <guid isPermaLink="false"><![CDATA[3673ec45-1b92-4d50-926c-e9b23d389244]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/64-subgrid]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3EfjoDq">https://goo.gle/3EfjoDq</a> MDN - <a href= "https://goo.gle/3tbooTx">https://goo.gle/3tbooTx</a> Smashing Magazine - <a href="https://goo.gle/3DUb7Ds">https://goo.gle/3DUb7Ds</a> Ahmad Shadeed on Subgrid - <a href="https://goo.gle/3EeStaP">https://goo.gle/3EeStaP</a> State of CSS (subgrid) - <a href="https://goo.gle/3fQDvP4">https://goo.gle/3fQDvP4</a> Full Bleed Subgrid demo - <a href="https://goo.gle/3TkZ1Jv">https://goo.gle/3TkZ1Jv</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3EfjoDq">https://goo.gle/3EfjoDq</a> MDN - <a href= "https://goo.gle/3tbooTx">https://goo.gle/3tbooTx</a> Smashing Magazine - <a href="https://goo.gle/3DUb7Ds">https://goo.gle/3DUb7Ds</a> Ahmad Shadeed on Subgrid - <a href="https://goo.gle/3EeStaP">https://goo.gle/3EeStaP</a> State of CSS (subgrid) - <a href="https://goo.gle/3fQDvP4">https://goo.gle/3fQDvP4</a> Full Bleed Subgrid demo - <a href="https://goo.gle/3TkZ1Jv">https://goo.gle/3TkZ1Jv</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers YouTube → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="9324842" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP064_v3.mp3?dest-id=1891556" /> <itunes:duration>09:43</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,chromedeveloper</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>63: Media query range syntax</title> <itunes:title>Media query range syntax</itunes:title> <pubDate>Wed, 02 Nov 2022 01:24:56 +0000</pubDate> <guid isPermaLink="false"><![CDATA[1bbc0785-9667-4ed5-a5e3-ca60b940e925]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/063-media-query-range-syntax]]></link> <description><![CDATA[Media query range syntax is a really nice addition. Links <ul> <li style="font-weight: 400;" aria-level="1">Polyfill: <a href= "https://goo.gle/3TXcyYD">https://goo.gle/3TXcyYD</a> </li> <li style="font-weight: 400;" aria-level="1">New syntax for range media queries: <a href="https://goo.gle/3DQlHg0">https://goo.gle/3DQlHg0</a> </li> </ul> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes on YT → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[Media query range syntax is a really nice addition. Links <ul> <li style="font-weight: 400;" aria-level="1">Polyfill: <a href= "https://goo.gle/3TXcyYD">https://goo.gle/3TXcyYD</a> </li> <li style="font-weight: 400;" aria-level="1">New syntax for range media queries: <a href="https://goo.gle/3DQlHg0">https://goo.gle/3DQlHg0</a> </li> </ul> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes on YT → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="6126494" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP063_V3.mp3?dest-id=1891556" /> <itunes:duration>05:57</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,adamargyle,unakravets,googlechromedevelopers,thecsspodcast,csspodcast,mediaqueryrangesyntax</itunes:keywords> <itunes:subtitle><![CDATA[Media query range syntax is a really nice addition. Links Polyfill: New syntax for range media queries: Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of &...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>62: Color functions: An update</title> <itunes:title>Color functions</itunes:title> <pubDate>Wed, 26 Oct 2022 16:47:15 +0000</pubDate> <guid isPermaLink="false"><![CDATA[0be65213-67c9-4e21-b5bd-9c699ff04f67]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/062-color-functions]]></link> <description><![CDATA[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 → <a href="https://goo.gle/3f8BgpT">https://goo.gle/3f8BgpT</a> CSS Color Module Level 6 → <a href= "https://goo.gle/3TIsPAI">https://goo.gle/3TIsPAI</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href="https://goo.gle/3f8BgpT">https://goo.gle/3f8BgpT</a> CSS Color Module Level 6 → <a href= "https://goo.gle/3TIsPAI">https://goo.gle/3TIsPAI</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="19047464" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP062_v1.mp3?dest-id=1891556" /> <itunes:duration>13:14</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,chrome,googlechrome,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 → CSS Color Module...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>61 :has()</title> <itunes:title>:has()</itunes:title> <pubDate>Tue, 18 Oct 2022 17:16:10 +0000</pubDate> <guid isPermaLink="false"><![CDATA[18fa15fa-d9db-41ff-a277-51e0f3477455]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/061-has]]></link> <description><![CDATA[: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 <ul> <li style="font-weight: 400;" aria-level="1">Blog → <a href= "https://goo.gle/3CIs1EF">https://goo.gle/3CIs1EF</a> </li> <li style="font-weight: 400;" aria-level="1">Selectors → <a href= "https://goo.gle/3EQsPde">https://goo.gle/3EQsPde</a> </li> <li style="font-weight: 400;" aria-level="1">Pseudo-classes → <a href= "https://goo.gle/3SgvH69">https://goo.gle/3SgvH69</a> </li> <li style="font-weight: 400;" aria-level="1">Creative CSS Layout → <a href= "https://goo.gle/3yRv4sZ">https://goo.gle/3yRv4sZ</a> </li> <li style="font-weight: 400;" aria-level="1">Quantity Queries for CSS → <a href= "https://goo.gle/3a4NPwT">https://goo.gle/3a4NPwT</a> </li> </ul> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[: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 <ul> <li style="font-weight: 400;" aria-level="1">Blog → <a href= "https://goo.gle/3CIs1EF">https://goo.gle/3CIs1EF</a> </li> <li style="font-weight: 400;" aria-level="1">Selectors → <a href= "https://goo.gle/3EQsPde">https://goo.gle/3EQsPde</a> </li> <li style="font-weight: 400;" aria-level="1">Pseudo-classes → <a href= "https://goo.gle/3SgvH69">https://goo.gle/3SgvH69</a> </li> <li style="font-weight: 400;" aria-level="1">Creative CSS Layout → <a href= "https://goo.gle/3yRv4sZ">https://goo.gle/3yRv4sZ</a> </li> <li style="font-weight: 400;" aria-level="1">Quantity Queries for CSS → <a href= "https://goo.gle/3a4NPwT">https://goo.gle/3a4NPwT</a> </li> </ul> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → <a href="https://goo.gle/CSSpodcast">https://goo.gle/CSSpodcast</a> Subscribe to Google Chrome Developers → <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="33716800" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP061_Has_v2.mp3?dest-id=1891556" /> <itunes:duration>23:06</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,HAS,chrome,googlechrome,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,googlechromedeveloper,chromedeveloper</itunes:keywords> <itunes:subtitle><![CDATA[: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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>60: Inert</title> <itunes:title>Inert</itunes:title> <pubDate>Tue, 11 Oct 2022 17:11:53 +0000</pubDate> <guid isPermaLink="false"><![CDATA[0b699deb-b0a0-40b9-8bb8-98ebb6798870]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/060-inert]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3SXid0C">https://goo.gle/3SXid0C</a> MDN - <a href= "https://goo.gle/3rK1Ybd">https://goo.gle/3rK1Ybd</a> Chrome Developers: Introducing Inert - <a href="https://goo.gle/3CLygZE">https://goo.gle/3CLygZE</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3SXid0C">https://goo.gle/3SXid0C</a> MDN - <a href= "https://goo.gle/3rK1Ybd">https://goo.gle/3rK1Ybd</a> Chrome Developers: Introducing Inert - <a href="https://goo.gle/3CLygZE">https://goo.gle/3CLygZE</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="18460174" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP060_Inert_v2_UPDATED.mp3?dest-id=1891556" /> <itunes:duration>07:31</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,developer,chrome,developers,googlechrome,inert,adamargyle,unakravets,googlechromedevelopers,inerttutorial,introductiontoinert,howtouseinert</itunes:keywords> <itunes:subtitle><![CDATA[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 - MDN -...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>59: Container queries</title> <itunes:title>Container queries</itunes:title> <pubDate>Thu, 06 Oct 2022 20:16:08 +0000</pubDate> <guid isPermaLink="false"><![CDATA[4bbd903c-710a-4c60-9ddb-47d3176d99e8]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/059-container-queries]]></link> <description><![CDATA[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 <ul> <li style="font-weight: 400;" aria-level="1">CQ + :has() → https://goo.gle/3ymiwJS</li> <li style="font-weight: 400;" aria-level="1">MDN Docs → https://goo.gle/3ogyIrp</li> </ul> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 <ul> <li style="font-weight: 400;" aria-level="1">CQ + :has() → https://goo.gle/3ymiwJS</li> <li style="font-weight: 400;" aria-level="1">MDN Docs → https://goo.gle/3ogyIrp</li> </ul> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="23121864" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP059_ContainerQueries_v3.mp3?dest-id=1891556" /> <itunes:duration>15:45</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>chrome,googlechrome,chromedevelopers,thecsspodcast,chromedeveloper,googlechromedevelopersgoogle</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>58: Cascade layers</title> <itunes:title>Cascade layers</itunes:title> <pubDate>Tue, 20 Sep 2022 17:48:59 +0000</pubDate> <guid isPermaLink="false"><![CDATA[450f093a-00ae-4760-bea6-df800548a7a8]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/058-cascade-layers]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3UjB6vL">https://goo.gle/3UjB6vL</a> Smashing Magazine - <a href="https://goo.gle/3ByUT1u">https://goo.gle/3ByUT1u</a> Una on YouTube - <a href= "https://goo.gle/3Sm2zLc">https://goo.gle/3Sm2zLc</a> Bramus at CSS Day 2022 - <a href="https://goo.gle/3LtfxVg">https://goo.gle/3LtfxVg</a> Bramus's blog - <a href= "https://goo.gle/3xEj2CM">https://goo.gle/3xEj2CM</a> Subscribe to Google Chrome Developers YouTube - <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3UjB6vL">https://goo.gle/3UjB6vL</a> Smashing Magazine - <a href="https://goo.gle/3ByUT1u">https://goo.gle/3ByUT1u</a> Una on YouTube - <a href= "https://goo.gle/3Sm2zLc">https://goo.gle/3Sm2zLc</a> Bramus at CSS Day 2022 - <a href="https://goo.gle/3LtfxVg">https://goo.gle/3LtfxVg</a> Bramus's blog - <a href= "https://goo.gle/3xEj2CM">https://goo.gle/3xEj2CM</a> Subscribe to Google Chrome Developers YouTube - <a href= "https://goo.gle/ChromeDevs">https://goo.gle/ChromeDevs</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="22250109" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP058_CascadeLayers_v2.mp3?dest-id=1891556" /> <itunes:duration>18:08</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>css,chrome,googlechrome,googledevelopers,adamargyle,unakravets,googlechromedevelopers,thecsspodcast,csspodcast,csstutorial,howtousecss,whatiscss,introductiontocss</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>57: DevTools Mini Series - Interaction</title> <itunes:title>DevTools Mini Series - Interaction</itunes:title> <pubDate>Wed, 29 Dec 2021 07:59:18 +0000</pubDate> <guid isPermaLink="false"><![CDATA[7e0a6777-54ed-445f-a9a9-a90d1b6e6712]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/057-devtools-mini-series-interaction]]></link> <description><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="20915168" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP057_v2.mp3?dest-id=1891556" /> <itunes:duration>14:32</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>css,chrome,googlechrome,googledevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:season>3</itunes:season> <itunes:episode>28</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>56: DevTools Mini Series - Accessibility</title> <itunes:title>DevTools Mini Series - Accessibility</itunes:title> <pubDate>Wed, 22 Dec 2021 07:57:10 +0000</pubDate> <guid isPermaLink="false"><![CDATA[db56b572-17db-4beb-93ae-a3906a0fddf5]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/056-devtools-mini-series-accessibility]]></link> <description><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="19880096" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP056_v2.mp3?dest-id=1891556" /> <itunes:duration>13:49</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,accessibility,developer,chrome,developers,googlechrome,devtools,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,googlechromedeveloper,chromedeveloper,jecelynyeen</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:season>3</itunes:season> <itunes:episode>27</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>55: DevTools Mini Series - Layout</title> <itunes:title>DevTools Mini Series - Layout</itunes:title> <pubDate>Wed, 15 Dec 2021 08:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[9e1d3567-b5bd-41da-b33b-706f6be7e21e]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/055-devtools-mini-series-layout]]></link> <description><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="29008448" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP055_v2.mp3?dest-id=1891556" /> <itunes:duration>17:10</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>color,Google,css,chrome,devtools,adamargyle,unakravets,googlechromedevelopers,thecsspodcast,csspodcast,csstips,csstutorial,howtousecss,whatiscss,introtocss,introductiontocss,jecelynyeen</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:season>3</itunes:season> <itunes:episode>26</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>54: DevTools Mini Series - Color</title> <itunes:title>DevTools Mini Series - Color</itunes:title> <pubDate>Wed, 08 Dec 2021 07:51:42 +0000</pubDate> <guid isPermaLink="false"><![CDATA[c4d73f2d-fea4-4d33-bba8-93580b5e8f71]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/054-devtools-mini-series-color]]></link> <description><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen <a href="https://twitter.com/jecelynyeen">Twitter</a> | <a href= "https://www.facebook.com/jecelyn">Facebook</a> | <a href= "https://www.youtube.com/channel/UC4Fwyb-YI2FNKUundPrcIIw"> YouTube</a> Developer advocate <a href="https://twitter.com/ChromeDevTools">@ChromeDevTools</a> 📐🤩 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="20625440" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP054_v1.mp3?dest-id=1891556" /> <itunes:duration>14:20</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>color,Google,css,chrome,devtools,adamargyle,unakravets,googlechromedevelopers,thecsspodcast,csspodcast,csstips,csstutorial,howtousecss,whatiscss,introtocss,introductiontocss,jecelynyeen</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:season>3</itunes:season> <itunes:episode>25</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>53: Season 2 wrap up</title> <itunes:title>Season two wrap up</itunes:title> <pubDate>Tue, 03 Aug 2021 17:00:31 +0000</pubDate> <guid isPermaLink="false"><![CDATA[59337f28-019d-4b20-8d23-ca983566f194]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/053-season-two-wrap-up]]></link> <description><![CDATA[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! 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]]></description> <content:encoded><![CDATA[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! 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]]></content:encoded> <enclosure length="55780224" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP053_v1.mp3?dest-id=1891556" /> <itunes:duration>35:45</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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! Episodes reminisced E30 → Lists E31 → @rules E32 → Page Media Queries...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>24</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>52: counters and @counter-style</title> <itunes:title>counters and @counter-style</itunes:title> <pubDate>Tue, 27 Jul 2021 16:58:56 +0000</pubDate> <guid isPermaLink="false"><![CDATA[124e3efe-ffce-4ebe-aba9-2a1a7b918bff]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/052-counters-and-counter-style]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3f2BP18">https://goo.gle/3f2BP18</a> Pure CSS Games Collection → <a href= "https://goo.gle/3l0wrQe">https://goo.gle/3l0wrQe</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3f2BP18">https://goo.gle/3f2BP18</a> Pure CSS Games Collection → <a href= "https://goo.gle/3l0wrQe">https://goo.gle/3l0wrQe</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="38570144" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP052_v1.mp3?dest-id=1891556" /> <itunes:duration>26:48</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 → Pure CSS Games Collection → Una Kravets...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>23</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>51: Styling SVG in CSS</title> <itunes:title>Styling SVG in CSS</itunes:title> <pubDate>Tue, 20 Jul 2021 16:50:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[f9b0c7dd-e5d5-4772-b0e6-691621941ff9]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/051-styling-svg-in-css]]></link> <description><![CDATA[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 → <a href="https://goo.gle/3x0Uilb">https://goo.gle/3x0Uilb</a> SVGOMG → <a href= "https://goo.gle/3hS6ksJ">https://goo.gle/3hS6ksJ</a> SVG spec → <a href= "https://goo.gle/3wVgRYe">https://goo.gle/3wVgRYe</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href="https://goo.gle/3x0Uilb">https://goo.gle/3x0Uilb</a> SVGOMG → <a href= "https://goo.gle/3hS6ksJ">https://goo.gle/3hS6ksJ</a> SVG spec → <a href= "https://goo.gle/3wVgRYe">https://goo.gle/3wVgRYe</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="47371424" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP051_v1.mp3?dest-id=1891556" /> <itunes:duration>32:54</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>22</itunes:episode> <itunes:episodeType>full</itunes:episodeType> </item> <item> <title>50: inherit, initial, unset, and revert</title> <itunes:title>inherit, initial, unset, and revert</itunes:title> <pubDate>Tue, 13 Jul 2021 17:07:54 +0000</pubDate> <guid isPermaLink="false"><![CDATA[bf1ef092-6e69-413e-9977-89cc4c2db9bd]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/050-inherit-initial-unset-and-revert]]></link> <description><![CDATA[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 → <a href="https://goo.gle/2U5PxJw">https://goo.gle/2U5PxJw</a> Quirksmode Article → <a href= "https://goo.gle/2TY80rz">https://goo.gle/2TY80rz</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href="https://goo.gle/2U5PxJw">https://goo.gle/2U5PxJw</a> Quirksmode Article → <a href= "https://goo.gle/2TY80rz">https://goo.gle/2TY80rz</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="16568096" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP050_v1.mp3?dest-id=1891556" /> <itunes:duration>11:31</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 → Quirksmode Article → Una Kravets...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>21</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>49: Accessibility</title> <itunes:title>Accessibility</itunes:title> <pubDate>Tue, 06 Jul 2021 17:26:49 +0000</pubDate> <guid isPermaLink="false"><![CDATA[c333c0e1-d1ab-4d57-977c-8f6bb07c2ae9]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/049-accessibility]]></link> <description><![CDATA[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 - <a href="https://goo.gle/3dSMIlU">https://goo.gle/3dSMIlU</a> CSS Speech Level 1 - <a href="https://goo.gle/3xrg3vc">https://goo.gle/3xrg3vc</a> Media Queries Level 5 - <a href= "https://goo.gle/3qUcBXz">https://goo.gle/3qUcBXz</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 - <a href="https://goo.gle/3dSMIlU">https://goo.gle/3dSMIlU</a> CSS Speech Level 1 - <a href="https://goo.gle/3xrg3vc">https://goo.gle/3xrg3vc</a> Media Queries Level 5 - <a href= "https://goo.gle/3qUcBXz">https://goo.gle/3qUcBXz</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="45541472" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP049_v1.mp3?dest-id=1891556" /> <itunes:duration>31:38</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 - CSS Speech Level 1 - ...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>20</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>48: Touch interaction</title> <itunes:title>Touch interaction</itunes:title> <pubDate>Tue, 29 Jun 2021 16:54:18 +0000</pubDate> <guid isPermaLink="false"><![CDATA[7d9b4a69-7f58-4915-8a09-ec4aa4998649]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/048-touch-interaction]]></link> <description><![CDATA[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 - <a href= "https://goo.gle/3y8My14">https://goo.gle/3y8My14</a> Spec - <a href= "https://goo.gle/3dm4opF">https://goo.gle/3dm4opF</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 - <a href= "https://goo.gle/3y8My14">https://goo.gle/3y8My14</a> Spec - <a href= "https://goo.gle/3dm4opF">https://goo.gle/3dm4opF</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="37295456" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP048_v1.mp3?dest-id=1891556" /> <itunes:duration>25:54</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 - Spec - Una Kravets (co-host) | | ...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>19</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>47: :is(), :where(), & nesting</title> <itunes:title>:is(), :where(), & nesting</itunes:title> <pubDate>Tue, 22 Jun 2021 17:29:18 +0000</pubDate> <guid isPermaLink="false"><![CDATA[4cd7c626-7a17-4a93-be2a-36fc5803bad5]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/047-is-where-nesting]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3qhYifl">https://goo.gle/3qhYifl</a> MDN :is() → <a href= "https://goo.gle/3qgU0Vf">https://goo.gle/3qgU0Vf</a> Forgiving selector parsing → <a href= "https://goo.gle/3xLTYHL">https://goo.gle/3xLTYHL</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3qhYifl">https://goo.gle/3qhYifl</a> MDN :is() → <a href= "https://goo.gle/3qgU0Vf">https://goo.gle/3qgU0Vf</a> Forgiving selector parsing → <a href= "https://goo.gle/3xLTYHL">https://goo.gle/3xLTYHL</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="63670804" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP047_v1.mp3?dest-id=1891556" /> <itunes:duration>33:04</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 → MDN :is() → ...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>18</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>46: Custom properties</title> <itunes:title>Custom properties</itunes:title> <pubDate>Tue, 15 Jun 2021 17:19:25 +0000</pubDate> <guid isPermaLink="false"><![CDATA[4087cf23-af66-442c-9c30-64b9ee23b248]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/046-custom-properties]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/3wtADL1">https://goo.gle/3wtADL1</a> 82% of developers get this 3 line CSS quiz wrong → <a href="https://goo.gle/2U8oTPR">https://goo.gle/2U8oTPR</a> A user’s guide to CSS variables → <a href= "https://goo.gle/3zlmscV">https://goo.gle/3zlmscV</a> Locally Scoped CSS Variables: What, How, and Why → <a href="https://goo.gle/2KGESwR">https://goo.gle/2KGESwR</a> GitHub → <a href= "https://goo.gle/3iOiVOa">https://goo.gle/3iOiVOa</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/3wtADL1">https://goo.gle/3wtADL1</a> 82% of developers get this 3 line CSS quiz wrong → <a href="https://goo.gle/2U8oTPR">https://goo.gle/2U8oTPR</a> A user’s guide to CSS variables → <a href= "https://goo.gle/3zlmscV">https://goo.gle/3zlmscV</a> Locally Scoped CSS Variables: What, How, and Why → <a href="https://goo.gle/2KGESwR">https://goo.gle/2KGESwR</a> GitHub → <a href= "https://goo.gle/3iOiVOa">https://goo.gle/3iOiVOa</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="66118591" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP046_v1.mp3?dest-id=1891556" /> <itunes:duration>27:29</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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,...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>17</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>45: Scroll timeline</title> <itunes:title>Scroll timeline</itunes:title> <pubDate>Tue, 08 Jun 2021 16:48:04 +0000</pubDate> <guid isPermaLink="false"><![CDATA[2a02152f-7a20-426d-afdb-665a3a13818d]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/045-scroll-timeline]]></link> <description><![CDATA[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 →<a href= "https://goo.gle/3pvWX49">https://goo.gle/3pvWX49</a> Polyfill → <a href= "https://goo.gle/3x8CQvw">https://goo.gle/3x8CQvw</a> GUI Challenges - Tabs → <a href= "https://goo.gle/34YYl5J">https://goo.gle/34YYl5J</a> Bramus's talk → <a href= "https://goo.gle/2TPs7HU">https://goo.gle/2TPs7HU</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 →<a href= "https://goo.gle/3pvWX49">https://goo.gle/3pvWX49</a> Polyfill → <a href= "https://goo.gle/3x8CQvw">https://goo.gle/3x8CQvw</a> GUI Challenges - Tabs → <a href= "https://goo.gle/34YYl5J">https://goo.gle/34YYl5J</a> Bramus's talk → <a href= "https://goo.gle/2TPs7HU">https://goo.gle/2TPs7HU</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="21741536" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP045_v2.mp3?dest-id=1891556" /> <itunes:duration>22:26</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>16</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>44: Transitions</title> <itunes:title>Transitions</itunes:title> <pubDate>Tue, 01 Jun 2021 17:09:53 +0000</pubDate> <guid isPermaLink="false"><![CDATA[2e74fcc0-0fa2-4c9c-84c0-fed68a0c41a6]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/044-transitions]]></link> <description><![CDATA[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 <a href= "https://goo.gle/3vIDi31">https://goo.gle/3vIDi31</a> Cont. <a href= "https://goo.gle/3pcpueY">https://goo.gle/3pcpueY</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 <a href= "https://goo.gle/3vIDi31">https://goo.gle/3vIDi31</a> Cont. <a href= "https://goo.gle/3pcpueY">https://goo.gle/3pcpueY</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="25413038" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP044_v3.mp3?dest-id=1891556" /> <itunes:duration>26:18</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,transitions,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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 Cont. Una...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>15</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>43: Containment</title> <itunes:title>Containment</itunes:title> <pubDate>Wed, 26 May 2021 16:50:08 +0000</pubDate> <guid isPermaLink="false"><![CDATA[75b65b61-205b-43f5-903c-d5edcb497c59]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/043-containment]]></link> <description><![CDATA[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 → <a href="https://goo.gle/3fRejEd">https://goo.gle/3fRejEd</a> Content-visibility → <a href="https://goo.gle/3wBMB52">https://goo.gle/3wBMB52</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href="https://goo.gle/3fRejEd">https://goo.gle/3fRejEd</a> Content-visibility → <a href="https://goo.gle/3wBMB52">https://goo.gle/3wBMB52</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="28643975" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP043_v1.mp3?dest-id=1891556" /> <itunes:duration>14:51</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,containment,googlechrome,googledevelopers,adamargyle,unakravets,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[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...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>14</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>42: Snap points</title> <itunes:title>Snap points</itunes:title> <pubDate>Tue, 11 May 2021 18:27:59 +0000</pubDate> <guid isPermaLink="false"><![CDATA[3bf7e4eb-1467-44ea-ac62-b239cb2a3735]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/042-snap-points]]></link> <description><![CDATA[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 → <a href= "https://goo.gle/2R9hUow">https://goo.gle/2R9hUow</a> overscroll-behavior → <a href= "https://goo.gle/3o7vLYE">https://goo.gle/3o7vLYE</a> scroll-behavior → <a href= "https://goo.gle/3uKvkWU">https://goo.gle/3uKvkWU</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[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 → <a href= "https://goo.gle/2R9hUow">https://goo.gle/2R9hUow</a> overscroll-behavior → <a href= "https://goo.gle/3o7vLYE">https://goo.gle/3o7vLYE</a> scroll-behavior → <a href= "https://goo.gle/3uKvkWU">https://goo.gle/3uKvkWU</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="32415433" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP042_v1.mp3?dest-id=1891556" /> <itunes:duration>16:49</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,chrome,snap,snapping,googlechrome,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,snappoints,snappointstutorial</itunes:keywords> <itunes:subtitle><![CDATA[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 → overscroll-behavior...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>13</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>41: Transforms</title> <itunes:title>Transforms</itunes:title> <pubDate>Tue, 04 May 2021 16:56:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[d133d34d-939b-42e0-9c35-c896103e86e0]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/041-transforms]]></link> <description><![CDATA[In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all works. Links CSS Transforms Module Level 1 → <a href= "https://goo.gle/2RsETdW">https://goo.gle/2RsETdW</a> CSS Transforms Module Level 2 → <a href= "https://goo.gle/3tdGeCF">https://goo.gle/3tdGeCF</a> Chaining transforms → <a href="https://goo.gle/3nKMKQp">https://goo.gle/3nKMKQp</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all works. Links CSS Transforms Module Level 1 → <a href= "https://goo.gle/2RsETdW">https://goo.gle/2RsETdW</a> CSS Transforms Module Level 2 → <a href= "https://goo.gle/3tdGeCF">https://goo.gle/3tdGeCF</a> Chaining transforms → <a href="https://goo.gle/3nKMKQp">https://goo.gle/3nKMKQp</a> Una Kravets (co-host) <a href="https://twitter.com/Una">Twitter</a> | <a href= "http://instagram.com/unakravets">Instagram</a> | <a href= "https://www.youtube.com/channel/UCJnidRIv3o1hf_YBWjKFljg"> YouTube</a> Making the web more colorful ✨🎨 Web DevRel <a href= "https://twitter.com/googlechrome">@googlechrome</a> Unicorn face host of <a href= "https://twitter.com/toolsday">@toolsday</a> & <a href= "https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA"> Designing in the Browser</a> 🎬 Adam Argyle (co-host) <a href="https://twitter.com/argyleink">Twitter</a> | <a href= "https://www.instagram.com/argyleink/">Instagram</a> | <a href= "https://a.nerdy.dev/youtube">YouTube</a> <a href="https://twitter.com/GoogleChrome">@GoogleChrome</a> CSS DevRel; <a href= "https://twitter.com/CSSWG">@CSSWG</a>; <a href= "https://a.nerdy.dev/gimme-visbug">VisBug</a> maker; punk; CSS/JS/UX addict; 💀🤘 The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="62664137" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP041_v1.mp3?dest-id=1891556" /> <itunes:duration>30:24</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,accessibility,chrome,transforms,googlechrome,chromedevelopers,googlechromedevelopers,zindex,thecsspodcast,csspodcast,csstransforms</itunes:keywords> <itunes:subtitle><![CDATA[In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>12</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google </itunes:author> </item> <item> <title>40: @font-face</title> <itunes:title>@font-face</itunes:title> <pubDate>Tue, 27 Apr 2021 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[dd55fd65-6dbb-4c47-986a-58950a886bd9]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/040-the-css-podcast-font-face]]></link> <description><![CDATA[In this episode Una and Adam talk about font adjustments when being used within @font-face. When fonts are loaded, there's an opportunity to provide default values and fine tunings. Links @font-face on MDN → <a href= "https://goo.gle/2S3DAmp">https://goo.gle/2S3DAmp </a> CSS Fonts Level 4 → <a href= "https://goo.gle/3sGwO2s">https://goo.gle/3sGwO2s </a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this episode Una and Adam talk about font adjustments when being used within @font-face. When fonts are loaded, there's an opportunity to provide default values and fine tunings. Links @font-face on MDN → <a href= "https://goo.gle/2S3DAmp">https://goo.gle/2S3DAmp </a> CSS Fonts Level 4 → <a href= "https://goo.gle/3sGwO2s">https://goo.gle/3sGwO2s </a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="50104013" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP040_v1.mp3?dest-id=1891556" /> <itunes:duration>23:52</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>googlechrome,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast</itunes:keywords> <itunes:subtitle><![CDATA[In this episode Una and Adam talk about font adjustments when being used within @font-face. When fonts are loaded, there's an opportunity to provide default values and fine tunings. Links @font-face on MDN → CSS Fonts Level 4 → The CSS Podcast...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>11</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>39: Paths, shapes, clipping and masking</title> <itunes:title>Paths, shapes, clipping and masking</itunes:title> <pubDate>Tue, 20 Apr 2021 16:42:28 +0000</pubDate> <guid isPermaLink="false"><![CDATA[079e243a-e063-4a02-a303-8a3066687519]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/039-the-css-podcast-paths-shapes-clipping-and-masking]]></link> <description><![CDATA[Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes—from creating transition effects to creating interesting and organic typographic layouts. In this episode we dive in to how to wrangle shape effects in CSS. Shapes Level 1 → <a href= "https://goo.gle/3gkJAkG">https://goo.gle/3gkJAkG</a> Shapes Level 2 → <a href="https://goo.gle/3amJLIk">https://goo.gle/3amJLIk</a> Masking Level 1 → <a href="https://goo.gle/3nb6Bb5">https://goo.gle/3nb6Bb5</a> Clippy tool → <a href= "https://goo.gle/3sIM0w9">https://goo.gle/3sIM0w9</a> clip-path transitions → <a href="https://goo.gle/3tGx96I">https://goo.gle/3tGx96I</a> CSS Masking → <a href= "https://goo.gle/3goEcNt">https://goo.gle/3goEcNt</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes—from creating transition effects to creating interesting and organic typographic layouts. In this episode we dive in to how to wrangle shape effects in CSS. Shapes Level 1 → <a href= "https://goo.gle/3gkJAkG">https://goo.gle/3gkJAkG</a> Shapes Level 2 → <a href="https://goo.gle/3amJLIk">https://goo.gle/3amJLIk</a> Masking Level 1 → <a href="https://goo.gle/3nb6Bb5">https://goo.gle/3nb6Bb5</a> Clippy tool → <a href= "https://goo.gle/3sIM0w9">https://goo.gle/3sIM0w9</a> clip-path transitions → <a href="https://goo.gle/3tGx96I">https://goo.gle/3tGx96I</a> CSS Masking → <a href= "https://goo.gle/3goEcNt">https://goo.gle/3goEcNt</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="84274732" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP039_v1.mp3?dest-id=1891556" /> <itunes:duration>33:20</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>shapes,paths,clipping,masking,googlechrome,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,shapeeffectsincss,cssshapeeffects</itunes:keywords> <itunes:subtitle><![CDATA[Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes—from creating transition effects to creating interesting and organic typographic layouts. In this episode we dive in to how to wrangle shape effects in CSS. ...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>10</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>38: N-match Notation</title> <itunes:title>N-match Notation</itunes:title> <pubDate>Tue, 13 Apr 2021 18:20:42 +0000</pubDate> <guid isPermaLink="false"><![CDATA[9c71968c-5287-4b74-ad2f-3a87dfbd56aa]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/038-the-css-podcast-n-match-notation]]></link> <description><![CDATA[Welcome back to The CSS Podcast, where we cover all things CSS from accessibility to c-index. Today, Una and Adam will discuss a micro syntax for pseudo class notification when working with nth-child. Selectors level 3 → <a href="https://goo.gle/3dWB48G">https://goo.gle/3dWB48G</a> Useful nth-child recipes → <a href="https://goo.gle/3e102DE">https://goo.gle/3e102DE</a> Nth-child syntax → <a href="https://goo.gle/328nA4b">https://goo.gle/328nA4b</a> Quantity queries → <a href="https://goo.gle/3a4NPwT">https://goo.gle/3a4NPwT</a> Solved with CSS! Nth-tricks → <a href="https://goo.gle/3g65Wq0">https://goo.gle/3g65Wq0</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[Welcome back to The CSS Podcast, where we cover all things CSS from accessibility to c-index. Today, Una and Adam will discuss a micro syntax for pseudo class notification when working with nth-child. Selectors level 3 → <a href="https://goo.gle/3dWB48G">https://goo.gle/3dWB48G</a> Useful nth-child recipes → <a href="https://goo.gle/3e102DE">https://goo.gle/3e102DE</a> Nth-child syntax → <a href="https://goo.gle/328nA4b">https://goo.gle/328nA4b</a> Quantity queries → <a href="https://goo.gle/3a4NPwT">https://goo.gle/3a4NPwT</a> Solved with CSS! Nth-tricks → <a href="https://goo.gle/3g65Wq0">https://goo.gle/3g65Wq0</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="20006914" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP038_v1.mp3?dest-id=1891556" /> <itunes:duration>16:22</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>googlechrome,chromedevelopers,googlechromedevelopers,thecsspodcast,csspodcast,nmathnotificationselectorslevel3,nthchildrecipes,nthchildsyntax,quantityqueries,solvedwithcss,nthtricks</itunes:keywords> <itunes:subtitle><![CDATA[Welcome back to The CSS Podcast, where we cover all things CSS from accessibility to c-index. Today, Una and Adam will discuss a micro syntax for pseudo class notification when working with nth-child. Selectors level 3 → ...]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>9</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>37: Cursors and Pointers</title> <itunes:title>Cursors and Pointers</itunes:title> <pubDate>Tue, 06 Apr 2021 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[b7642245-0c8c-4509-a2d1-7588d086ab13]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/037-cursors-and-pointers]]></link> <description><![CDATA[What do mouse pointers, potatoes, and your fingers have in common? They can all interact with a screen! With CSS we can define how active our web boxes are, which areas are interactive, and what style the cursor should be. Maybe that means your mouse arrow becomes an animated magic wand, or maybe not. Get ready for a fun episode, where things get a bit goofy. Links Pointer events → <a href= "https://goo.gle/39HFYF8">https://goo.gle/39HFYF8</a> A Mind-Bending Discovery → <a style= "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" href="https://goo.gle/31Rm3iA">https://goo.gle/31Rm3iA</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[What do mouse pointers, potatoes, and your fingers have in common? They can all interact with a screen! With CSS we can define how active our web boxes are, which areas are interactive, and what style the cursor should be. Maybe that means your mouse arrow becomes an animated magic wand, or maybe not. Get ready for a fun episode, where things get a bit goofy. LinksPointer events → <a href= "https://goo.gle/39HFYF8">https://goo.gle/39HFYF8</a>A Mind-Bending Discovery → <a style= "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" href="https://goo.gle/31Rm3iA">https://goo.gle/31Rm3iA</a> The CSS Podcast#CSSpodcast]]></content:encoded> <enclosure length="45429862" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP037_v2.mp3?dest-id=1891556" /> <itunes:duration>17:09</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,webdevelopment,googlechrome,googledevelopers,cursorsandpointers,csscursorsandpointers,csscursors,csspointerscomputerscience</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>8</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>36: Text and Typography</title> <itunes:title>Text and Typography</itunes:title> <pubDate>Tue, 30 Mar 2021 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[63b5ed71-cc11-4e52-b631-af163b5a6cc2]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/tcp036-v2]]></link> <description><![CDATA[In this episode we cover typography on the web from your CSS. From font properties to word breaking. Also, Adam gets thrown off and amazed at how dynamic the text underline property is and revels in the difference between small caps and petite caps. Links MDN Text Fundamentals → <a href= "https://goo.gle/2O4Fh13">https://goo.gle/2O4Fh13</a> Text Decoration 3 → <a href= "https://goo.gle/3u7M2yK">https://goo.gle/3u7M2yK</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this episode we cover typography on the web from your CSS. From font properties to word breaking. Also, Adam gets thrown off and amazed at how dynamic the text underline property is and revels in the difference between small caps and petite caps. Links MDN Text Fundamentals → <a href= "https://goo.gle/2O4Fh13">https://goo.gle/2O4Fh13</a>Text Decoration 3 → <a href= "https://goo.gle/3u7M2yK">https://goo.gle/3u7M2yK</a> The CSS Podcast#CSSpodcast]]></content:encoded> <enclosure length="62260560" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP036_v2.mp3?dest-id=1891556" /> <itunes:duration>30:12</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,webdevelopment,googlechrome,computerscience,googledevelopers,texttypography,csstexttypography,csstext,csstypography</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>7</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>35: Background</title> <itunes:title>Background</itunes:title> <pubDate>Tue, 23 Mar 2021 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[b89cc8fe-6fba-4f1a-a2d4-e5c84b9e3841]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/035-background]]></link> <description><![CDATA[In this episode we cover all the ways to style an element's background: using images, colors, gradients and more. Links CSS backgrounds-3 → <a href="http://goo.gle/2P0DGJE">http://goo.gle/2P0DGJE</a> CSS Tricks on backgrounds → <a href="http://goo.gle/2ODPCRY">http://goo.gle/2ODPCRY </a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this episode we cover all the ways to style an element's background: using images, colors, gradients and more. Links CSS backgrounds-3 → <a href="http://goo.gle/2P0DGJE">http://goo.gle/2P0DGJE</a> CSS Tricks on backgrounds → <a href="http://goo.gle/2ODPCRY">http://goo.gle/2ODPCRY </a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="51833586" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP035_v2.mp3?dest-id=1891556" /> <itunes:duration>24:46</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,webdevelopment,googlechrome,computerscience,googledevelopers,cssbackground,cssbackgroundtips,cssbackgroundbestpractices</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>6</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>34: Overflow</title> <itunes:title>Overflow</itunes:title> <pubDate>Tue, 16 Mar 2021 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[0bd852b3-fed1-48b3-99d9-0aef0fed6e13]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/034-overflow]]></link> <description><![CDATA[In today's episode we cover overscroll and all the ways to handle content that's bursting at the seams. The web has a natural tendency to show overflowing content, so let's study our options when it comes to wrangling those pesky misbehavers. Links Text-overflow → <a href= "http://goo.gle/38uDGbX">http://goo.gle/38uDGbX</a> CSS Overflow Module → <a style= "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" href="http://goo.gle/2N7KsNg">http://goo.gle/2N7KsNg</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In today's episode we cover overscroll and all the ways to handle content that's bursting at the seams. The web has a natural tendency to show overflowing content, so let's study our options when it comes to wrangling those pesky misbehavers. LinksText-overflow → <a href= "http://goo.gle/38uDGbX">http://goo.gle/38uDGbX</a>CSS Overflow Module → <a style= "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" href="http://goo.gle/2N7KsNg">http://goo.gle/2N7KsNg</a> The CSS Podcast#CSSpodcast]]></content:encoded> <enclosure length="30697408" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP034_v1.mp3?dest-id=1891556" /> <itunes:duration>18:20</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,overflow,webdevelopment,googlechrome,computerscience,googledevelopers,textoverflow</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>5</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>33: Preference Media</title> <itunes:title>Preference Media</itunes:title> <pubDate>Thu, 11 Mar 2021 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[a7731e29-430a-4c2a-9588-4ed93976ab9f]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/033-preference-media]]></link> <description><![CDATA[In this episode we narrow our focus on user-preference-based media queries, which enable you to create personalized experiences based on your users custom settings and needs. Links Media Queries 5 → <a style= "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" href="https://goo.gle/306lZea">https://goo.gle/306lZea</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this episode we narrow our focus on user-preference-based media queries, which enable you to create personalized experiences based on your users custom settings and needs. LinksMedia Queries 5 → <a style= "font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" href="https://goo.gle/306lZea">https://goo.gle/306lZea</a> The CSS Podcast#CSSpodcast]]></content:encoded> <enclosure length="27285888" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP033_v2.mp3?dest-id=1891556" /> <itunes:duration>15:58</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>preferencemedia</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>4</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>32: Page Media</title> <itunes:title>Page Media</itunes:title> <pubDate>Tue, 02 Mar 2021 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[8362eeac-a971-4008-bea3-b7b9191ec39d]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/033-page-media]]></link> <description><![CDATA[In this episode we talk about page media queries and all the ways you can pivot your styles based on device capabilities, viewport size, etc. Links Media Queries → <a href= "http://goo.gle/2MhYfR2">http://goo.gle/2MhYfR2</a> Scripting → <a href= "http://goo.gle/2Mdan5E">http://goo.gle/2Mdan5E</a> The 'display-mode' media feature → <a href="http://goo.gle/2NoFr3c">http://goo.gle/2NoFr3c</a> Prefers-* Security and Privacy → <a href="http://goo.gle/3kfwUM0">http://goo.gle/3kfwUM0</a> CSS Color Adjustment → <a href="http://goo.gle/3qLkduJ">http://goo.gle/3qLkduJ</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this episode we talk about page media queries and all the ways you can pivot your styles based on device capabilities, viewport size, etc. Links Media Queries → <a href= "http://goo.gle/2MhYfR2">http://goo.gle/2MhYfR2</a> Scripting → <a href= "http://goo.gle/2Mdan5E">http://goo.gle/2Mdan5E</a> The 'display-mode' media feature → <a href="http://goo.gle/2NoFr3c">http://goo.gle/2NoFr3c</a> Prefers-* Security and Privacy → <a href="http://goo.gle/3kfwUM0">http://goo.gle/3kfwUM0</a> CSS Color Adjustment → <a href="http://goo.gle/3qLkduJ">http://goo.gle/3qLkduJ</a> The CSS Podcast #CSSpodcast]]></content:encoded> <enclosure length="35818048" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP032_v2.mp3?dest-id=1891556" /> <itunes:duration>21:53</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,webdevelopment,googlechrome,computerscience,googledevelopers,pagemedia,displaycolorqueries,mediaqueries,csscoloradjustment,csspagemedia</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>3</itunes:season> <itunes:episode>2</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>31: @rules</title> <itunes:title>@rules</itunes:title> <pubDate>Tue, 23 Feb 2021 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[3b409789-4f40-4bb1-9743-6169a7e72f28]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/031-rules]]></link> <description><![CDATA[In this episode we talk about CSS @rules and all the different customizations you can make to fonts, encoding, animations, Houdini, and more. Links At-rules → <a href= "http://goo.gle/3uvvRwb">http://goo.gle/3uvvRwb</a> CSS Conditional Rules Module → <a href= "http://goo.gle/37Bgf02">http://goo.gle/37Bgf02</a> @property → <a href= "https://goo.gle/3upuMpB">https://goo.gle/3upuMpB</a> Media Queries → <a href= "https://goo.gle/2Nl2VGp">https://goo.gle/2Nl2VGp</a> CSS Fonts → <a href= "http://goo.gle/3dB2uSU">http://goo.gle/3dB2uSU</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this episode we talk about CSS @rules and all the different customizations you can make to fonts, encoding, animations, Houdini, and more. LinksAt-rules → <a href= "http://goo.gle/3uvvRwb">http://goo.gle/3uvvRwb</a> CSS Conditional Rules Module → <a href= "http://goo.gle/37Bgf02">http://goo.gle/37Bgf02</a> @property → <a href= "https://goo.gle/3upuMpB">https://goo.gle/3upuMpB</a> Media Queries → <a href= "https://goo.gle/2Nl2VGp">https://goo.gle/2Nl2VGp</a> CSS Fonts → <a href= "http://goo.gle/3dB2uSU">http://goo.gle/3dB2uSU</a> The CSS Podcast#CSSpodcast]]></content:encoded> <enclosure length="34291785" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP031_v2.mp3?dest-id=1891556" /> <itunes:duration>20:50</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,houdini,rules,webdevelopment,googlechrome,computerscience,googledevelopers,cssanimations,cssfonts,cssencoding</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>2</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>30: Lists</title> <itunes:title>Lists</itunes:title> <pubDate>Tue, 16 Feb 2021 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[9c705ff7-22fd-4a73-9969-dab9bfb4a27f]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/030-lists]]></link> <description><![CDATA[In this Season 2 kickoff episode we talk about lists; their bullets/markers, styleability and overall featureset. List-en closely 🤓 Links CSS Lists and Counters Module → <a href="http://goo.gle/2LlRhtS">http://goo.gle/2LlRhtS</a> Custom bullets with CSS → <a href= "http://goo.gle/3rol0BL">http://goo.gle/3rol0BL</a> CSS Lists, Markers, And Counters→ <a href= "http://goo.gle/3cHa5yP">http://goo.gle/3cHa5yP</a> CSS Counter Grid → <a href= "https://goo.gle/3awKJkp">https://goo.gle/3awKJkp</a> The CSS Podcast #CSSpodcast]]></description> <content:encoded><![CDATA[In this Season 2 kickoff episode we talk about lists; their bullets/markers, styleability and overall featureset. List-en closely 🤓 LinksCSS Lists and Counters Module → <a href="http://goo.gle/2LlRhtS">http://goo.gle/2LlRhtS</a> Custom bullets with CSS → <a href= "http://goo.gle/3rol0BL">http://goo.gle/3rol0BL</a> CSS Lists, Markers, And Counters→ <a href= "http://goo.gle/3cHa5yP">http://goo.gle/3cHa5yP</a>CSS Counter Grid → <a href= "https://goo.gle/3awKJkp">https://goo.gle/3awKJkp</a> The CSS Podcast#CSSpodcast]]></content:encoded> <enclosure length="27971200" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP030_v2.mp3?dest-id=1891556" /> <itunes:duration>16:26</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,Lists,webdevelopment,googlechrome,computerscience,googledevelopers,csslists,cssbullets,cssmakers,customlists</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>2</itunes:season> <itunes:episode>1</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>29: Houdini Series: Layout</title> <itunes:title>Houdini Series: Layout</itunes:title> <pubDate>Wed, 09 Dec 2020 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[92586930-e4b5-4292-9a98-6b8e4a7b1940]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/029-houdini-series-layout]]></link> <description><![CDATA[In this episode, we get a little more experimental as we continue the Houdini series and discuss the Layout Worklet, also sometimes referred to as the Houdini Layout API. The Layout API enables developers to write their own layout algorithms. For more about Houdini worklets, check out our last episode on the Paint Worklet for an overview → <a href="https://goo.gle/3mG6BPc">https://goo.gle/3mG6BPc</a> Links The Layout API → <a href= "https://goo.gle/3gspEdI">https://goo.gle/3gspEdI</a> Masonry Layout Example by @iamvdo → <a href="https://goo.gle/37pRint">https://goo.gle/37pRint</a>]]></description> <content:encoded><![CDATA[In this episode, we get a little more experimental as we continue the Houdini series and discuss the Layout Worklet, also sometimes referred to as the Houdini Layout API. The Layout API enables developers to write their own layout algorithms. For more about Houdini worklets, check out our last episode on the Paint Worklet for an overview → <a href="https://goo.gle/3mG6BPc">https://goo.gle/3mG6BPc</a> Links The Layout API → <a href= "https://goo.gle/3gspEdI">https://goo.gle/3gspEdI</a> Masonry Layout Example by @iamvdo → <a href="https://goo.gle/37pRint">https://goo.gle/37pRint</a>]]></content:encoded> <enclosure length="20212467" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_029_v1.0-Alt-Ending.mp3?dest-id=1891556" /> <itunes:duration>16:34</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,houdini,webdevelopment,googlechrome,computerscience,worklet,googledevelopers,csstipsandtricks,houdiniproperties,layoutworklet,layoutapi,houdiniapi,writinglayoutworklets,houdinicssexamples</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>29</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>28: Houdini Series: Paint</title> <itunes:title>Houdini Series: Paint</itunes:title> <pubDate>Wed, 02 Dec 2020 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[563e9c5e-646d-49bc-a198-e643ecb0abe4]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/028-houdini-series-paint]]></link> <description><![CDATA[In this episode, we continue the Houdini series and enter worklet land! We go over the Paint Worklet, an API that enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. Links CSS Paint API → <a href= "https://goo.gle/39bWvBV">https://goo.gle/39bWvBV</a> MDN Docs on CSS Painting API → <a href="https://goo.gle/3m3e1M1">https://goo.gle/3m3e1M1</a> Worklet Reference → <a href="https://goo.gle/3980Equ">https://goo.gle/3980Equ</a>]]></description> <content:encoded><![CDATA[In this episode, we continue the Houdini series and enter worklet land! We go over the Paint Worklet, an API that enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. Links CSS Paint API → <a href= "https://goo.gle/39bWvBV">https://goo.gle/39bWvBV</a> MDN Docs on CSS Painting API → <a href="https://goo.gle/3m3e1M1">https://goo.gle/3m3e1M1</a> Worklet Reference → <a href="https://goo.gle/3980Equ">https://goo.gle/3980Equ</a>]]></content:encoded> <enclosure length="32598687" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_028_v2.0.mp3?dest-id=1891556" /> <itunes:duration>29:29</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,houdini,webworkers,webdevelopment,googlechrome,computerscience,worklet,googledevelopers,csstipsandtricks,houdiniproperties,paintworklet,whatisaworklet,webworkercomparison,writingpaintworklets</itunes:keywords> <itunes:subtitle><![CDATA[ Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>28</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>27: Houdini Series: Typed OM</title> <itunes:title>Houdini Series: Typed OM</itunes:title> <pubDate>Wed, 18 Nov 2020 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[5d2ece34-60dc-4096-8ed2-0789375e690b]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/027-houdini-series-typed-om]]></link> <description><![CDATA[In this episode we go over the TypedOM, a new API for parsing, converting, creating and managing CSS. It's typed, as the name suggests, and these typings not only help developers find bugs, they can make properties animateable natively in the engine. Links MDN Typed OM Reference → <a href="https://goo.gle/3n2FrC9">https://goo.gle/3n2FrC9</a> Spec → <a href= "https://goo.gle/32fq94O">https://goo.gle/32fq94O</a> caniuse attributeStyleMap → <a href="https://goo.gle/3leR0Fu">https://goo.gle/3leR0Fu</a> caniuse computedStyleMap → <a href= "https://goo.gle/3p40ENy">https://goo.gle/3p40ENy</a>]]></description> <content:encoded><![CDATA[In this episode we go over the TypedOM, a new API for parsing, converting, creating and managing CSS. It's typed, as the name suggests, and these typings not only help developers find bugs, they can make properties animateable natively in the engine. Links MDN Typed OM Reference → <a href="https://goo.gle/3n2FrC9">https://goo.gle/3n2FrC9</a> Spec → <a href= "https://goo.gle/32fq94O">https://goo.gle/32fq94O</a> caniuse attributeStyleMap → <a href="https://goo.gle/3leR0Fu">https://goo.gle/3leR0Fu</a> caniuse computedStyleMap → <a href= "https://goo.gle/3p40ENy">https://goo.gle/3p40ENy</a>]]></content:encoded> <enclosure length="24728516" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_027_v1.0-bonus.mp3?dest-id=1891556" /> <itunes:duration>21:17</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,houdini,webdevelopment,googlechrome,computerscience,googledevelopers,csstipsandtricks,houdiniproperties,typedom,apiforparsingcss,apiforcreatingcss,apiformanagingcss,apiforconvertingcss,animateableproperties</itunes:keywords> <itunes:subtitle><![CDATA[ Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>27</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>26: Houdini Series: Properties & Values</title> <itunes:title>Houdini Series: Properties & Values</itunes:title> <pubDate>Wed, 11 Nov 2020 18:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[e62bd3ee-2cd8-4aa6-ad4f-649912291e44]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/026-houdini-series-properties-values]]></link> <description><![CDATA[In this episode we introduce Houdini! We start by talking about our hooks into the layout engine and CSS parser, so we can connect our custom functionality with some CSS authored by a designer or developer. These hooks are called Houdini Properties & Values. Links Properties and Values Spec → <a href="https://goo.gle/2HZ6Aad">https://goo.gle/2HZ6Aad</a> Value Definitions Spec → <a href="https://goo.gle/2HZCCTy">https://goo.gle/2HZCCTy</a> Houdini @property → <a href="https://goo.gle/3eyFimW">https://goo.gle/3eyFimW</a>]]></description> <content:encoded><![CDATA[In this episode we introduce Houdini! We start by talking about our hooks into the layout engine and CSS parser, so we can connect our custom functionality with some CSS authored by a designer or developer. These hooks are called Houdini Properties & Values. Links Properties and Values Spec → <a href="https://goo.gle/2HZ6Aad">https://goo.gle/2HZ6Aad</a> Value Definitions Spec → <a href="https://goo.gle/2HZCCTy">https://goo.gle/2HZCCTy</a> Houdini @property → <a href="https://goo.gle/3eyFimW">https://goo.gle/3eyFimW</a>]]></content:encoded> <enclosure length="24786800" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_026_v1.0.mp3?dest-id=1891556" /> <itunes:duration>21:20</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,houdini,webdevelopment,googlechrome,computerscience,layoutengine,googledevelopers,csstipsandtricks,cssparser,houdinipropertiesvalues,houdiniproperties</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>26</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>25: Season 1 Wrap Up</title> <itunes:title>Season 1 Wrap Up</itunes:title> <pubDate>Wed, 16 Sep 2020 17:09:54 +0000</pubDate> <guid isPermaLink="false"><![CDATA[5acd5250-211d-43aa-b368-881e38b995f8]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/025-season-1-wrap-up]]></link> <description><![CDATA[In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast.]]></description> <content:encoded><![CDATA[In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast.]]></content:encoded> <enclosure length="55151535" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_025_v2.0.mp3?dest-id=1891556" /> <itunes:duration>52:58</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,cssanimations,seasononerecap,theboxmodeltozindex,cssfunctions,csscolor,csstipsandtricks</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>25</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>24: Blend Modes</title> <itunes:title>Blend Modes</itunes:title> <pubDate>Wed, 09 Sep 2020 17:15:15 +0000</pubDate> <guid isPermaLink="false"><![CDATA[68c79265-a2d1-4dfc-892c-37ee8c6fb27f]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/024-blend-modes-1]]></link> <description><![CDATA[Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page. Links: mix-blend-mode → <a href= "https://goo.gle/3m5L9mP">https://goo.gle/3m5L9mP</a> Isolation: Cascading Style Sheets → <a href="https://goo.gle/2GIDjiX">https://goo.gle/2GIDjiX</a> ]]></description> <content:encoded><![CDATA[Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page. Links: mix-blend-mode → <a href= "https://goo.gle/3m5L9mP">https://goo.gle/3m5L9mP</a> Isolation: Cascading Style Sheets → <a href="https://goo.gle/2GIDjiX">https://goo.gle/2GIDjiX</a> ]]></content:encoded> <enclosure length="21576874" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP024_TCP_CSS_Podcast_Episode_024_v1.0.mp3?dest-id=1891556" /> <itunes:duration>18:00</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,blendmodes,cssforbeginners,css101,learnhowtousecss,blendmodesincss</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>24</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>23: Filters</title> <itunes:title>Filters</itunes:title> <pubDate>Wed, 02 Sep 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[e58428dc-a754-4cde-b9e6-b9d3b190346c]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/023-filters]]></link> <description><![CDATA[In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. From recreating Instagram filter effects, to blurring background for better legibility, we dive deep into what CSS and filters can do. Links: Filter Effects Module Level 1 → <a href="https://goo.gle/34SPJ1D">https://goo.gle/34SPJ1D</a> Backdrop Filter → <a href="https://goo.gle/3hJTMRz">https://goo.gle/3hJTMRz</a> CSSGram → <a href= "https://goo.gle/2EPDOad">https://goo.gle/2EPDOad</a> Custom & Instagram photo filters → <a href="https://goo.gle/31PhaYi">https://goo.gle/31PhaYi</a> Contrast Swap technique → <a href="https://goo.gle/2G9LpRh">https://goo.gle/2G9LpRh</a> feColorMatrix → <a href= "https://goo.gle/34UKw9u">https://goo.gle/34UKw9u</a> Shaders → <a href= "https://goo.gle/32PJ2uR">https://goo.gle/32PJ2uR</a> ]]></description> <content:encoded><![CDATA[In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. From recreating Instagram filter effects, to blurring background for better legibility, we dive deep into what CSS and filters can do. Links: Filter Effects Module Level 1 → <a href="https://goo.gle/34SPJ1D">https://goo.gle/34SPJ1D</a> Backdrop Filter → <a href="https://goo.gle/3hJTMRz">https://goo.gle/3hJTMRz</a> CSSGram → <a href= "https://goo.gle/2EPDOad">https://goo.gle/2EPDOad</a> Custom & Instagram photo filters → <a href="https://goo.gle/31PhaYi">https://goo.gle/31PhaYi</a> Contrast Swap technique → <a href="https://goo.gle/2G9LpRh">https://goo.gle/2G9LpRh</a> feColorMatrix → <a href= "https://goo.gle/34UKw9u">https://goo.gle/34UKw9u</a> Shaders → <a href= "https://goo.gle/32PJ2uR">https://goo.gle/32PJ2uR</a> ]]></content:encoded> <enclosure length="29586414" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_023_v1.0.mp3?dest-id=1891556" /> <itunes:duration>26:20</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,webdevelopment,googlechrome,computerscience,googledevelopers,cssfilters,filtersusingcss,addingafilterwithcss,stylingyourphotos,howtostylemyphoto,cssgram,filtereffectsmodule,backdropfilter,filtereffects,contrastswap</itunes:keywords> <itunes:subtitle><![CDATA[In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. From recreating Instagram filter effects, to blurring background for better legibility, we dive deep into what...]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>23</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>22: Animation</title> <itunes:title>Animation</itunes:title> <pubDate>Wed, 26 Aug 2020 17:01:02 +0000</pubDate> <guid isPermaLink="false"><![CDATA[b16e2b2f-e786-4601-84b5-0b01183f2547]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/022-animation]]></link> <description><![CDATA[In this episode, we’re talking about CSS animations. With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes. Links: Animations Level 1 Spec → <a href="https://goo.gle/2DhV0V2">https://goo.gle/2DhV0V2</a> Easing Level 1 Spec → <a href="https://goo.gle/3kWoWap">https://goo.gle/3kWoWap</a> Scroll-Linked Animations Draft Spec → <a href="https://goo.gle/39VQV4N">https://goo.gle/39VQV4N</a> Cubic-Bezier Tool → <a href="https://goo.gle/2Q5xj5i">https://goo.gle/2Q5xj5i</a> Debugging Animations → <a href="https://goo.gle/3ayI2yD">https://goo.gle/3ayI2yD</a> Rainbow Button → <a href= "https://goo.gle/3214e0t">https://goo.gle/3214e0t</a> Complete Easing Functions → <a href="https://goo.gle/3gaaiJ4">https://goo.gle/3gaaiJ4</a> ]]></description> <content:encoded><![CDATA[In this episode, we’re talking about CSS animations. With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes. Links: Animations Level 1 Spec → <a href="https://goo.gle/2DhV0V2">https://goo.gle/2DhV0V2</a> Easing Level 1 Spec → <a href="https://goo.gle/3kWoWap">https://goo.gle/3kWoWap</a> Scroll-Linked Animations Draft Spec → <a href="https://goo.gle/39VQV4N">https://goo.gle/39VQV4N</a> Cubic-Bezier Tool → <a href="https://goo.gle/2Q5xj5i">https://goo.gle/2Q5xj5i</a> Debugging Animations → <a href="https://goo.gle/3ayI2yD">https://goo.gle/3ayI2yD</a> Rainbow Button → <a href= "https://goo.gle/3214e0t">https://goo.gle/3214e0t</a> Complete Easing Functions → <a href="https://goo.gle/3gaaiJ4">https://goo.gle/3gaaiJ4</a> ]]></content:encoded> <enclosure length="41568050" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCO022_TCP_CSS_Podcast_Episode_022_v1.0.mp3?dest-id=1891556" /> <itunes:duration>38:49</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,cssanimations,animationproperties,debugginganimations,cubicbeziertool,movinganelement,howtoaddanimationsusingcss</itunes:keywords> <itunes:subtitle><![CDATA[ Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>22</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>21: Gradients</title> <itunes:title>Gradients</itunes:title> <pubDate>Wed, 19 Aug 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[558548ec-f442-4cbe-a7bc-a6813d4aff7d]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/021-gradients]]></link> <description><![CDATA[In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you’ll be savvy with color stops, transition hints, and all the ways to interpolate color in your design. Links: Spec Level 3 → <a href= "https://goo.gle/3h8cRN7">https://goo.gle/3h8cRN7</a> Spec Draft Level 4 → <a href="https://goo.gle/3iPmDUE">https://goo.gle/3iPmDUE</a> Lea’s Pattern Gallery → <a href="https://goo.gle/3j4XEwX">https://goo.gle/3j4XEwX</a> Lea’s Cicada Principle Article → <a href="https://goo.gle/2FyeWnr">https://goo.gle/2FyeWnr</a> ]]></description> <content:encoded><![CDATA[In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you’ll be savvy with color stops, transition hints, and all the ways to interpolate color in your design. Links: Spec Level 3 → <a href= "https://goo.gle/3h8cRN7">https://goo.gle/3h8cRN7</a> Spec Draft Level 4 → <a href="https://goo.gle/3iPmDUE">https://goo.gle/3iPmDUE</a> Lea’s Pattern Gallery → <a href="https://goo.gle/3j4XEwX">https://goo.gle/3j4XEwX</a> Lea’s Cicada Principle Article → <a href="https://goo.gle/2FyeWnr">https://goo.gle/2FyeWnr</a> ]]></content:encoded> <enclosure length="33713155" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP021_TCP_CSS_Podcast_Episode_021_v1.0.mp3?dest-id=1891556" /> <itunes:duration>30:38</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,Gradient,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,repeatingconicgradient,syntaxsecrets,syntaxtips,colorstops,transitionhints,interpolatecolor</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>21</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>20: Functions</title> <itunes:title>Functions</itunes:title> <pubDate>Wed, 12 Aug 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[7a30a8bf-b2e5-4f18-962b-4267dce39901]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/020-functions]]></link> <description><![CDATA[In this episode we talk about the runtime dynamic side of CSS, commonly recognized as a CSS function. Today, in similar fashion to other episodes, we’ll be doing a massive overview of all the CSS functions, to be later deep dived. Links: CSS Tricks Guide to CSS Functions → <a href="https://goo.gle/2XRb7Ah">https://goo.gle/2XRb7Ah</a> CSS Variables → <a href= "https://goo.gle/2XRb2fX">https://goo.gle/2XRb2fX</a> Functional Notations Spec → <a href="https://goo.gle/3gJwavQ">https://goo.gle/3gJwavQ</a> Cubic Bezier Generator → <a href="https://goo.gle/30LiDhG">https://goo.gle/30LiDhG</a> Billion Laughs Attack → <a href="https://goo.gle/2XUxjtg">https://goo.gle/2XUxjtg</a> ]]></description> <content:encoded><![CDATA[In this episode we talk about the runtime dynamic side of CSS, commonly recognized as a CSS function. Today, in similar fashion to other episodes, we’ll be doing a massive overview of all the CSS functions, to be later deep dived. Links: CSS Tricks Guide to CSS Functions → <a href="https://goo.gle/2XRb7Ah">https://goo.gle/2XRb7Ah</a> CSS Variables → <a href= "https://goo.gle/2XRb2fX">https://goo.gle/2XRb2fX</a> Functional Notations Spec → <a href="https://goo.gle/3gJwavQ">https://goo.gle/3gJwavQ</a> Cubic Bezier Generator → <a href="https://goo.gle/30LiDhG">https://goo.gle/30LiDhG</a> Billion Laughs Attack → <a href="https://goo.gle/2XUxjtg">https://goo.gle/2XUxjtg</a> ]]></content:encoded> <enclosure length="42684231" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_020_v1.0.mp3?dest-id=1891556" /> <itunes:duration>39:59</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,webdevelopment,googlechrome,computerscience,csstricks,googledevelopers,cssvocabulary,dynamicsideofcss,cubicbezier,functionalnotationsspec,cssvariables,cssfunction,overviewofcss,overviewofcssfunctions</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>20</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>19: Z-Index and Stacking Context</title> <itunes:title>Z-Index and Stacking Context</itunes:title> <pubDate>Wed, 05 Aug 2020 17:03:35 +0000</pubDate> <guid isPermaLink="false"><![CDATA[6ff79f98-6c65-425a-a43e-565bf8261859]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/019-z-index-and-stacking-context]]></link> <description><![CDATA[In today’s episode, we’re talking about z-index and stacking context. This is a pretty in-depth topic, but it's something that we see all the time and it can definitely bite if you aren’t aware of what’s going on. Links: CSS Animations Level 1 → <a href="https://goo.gle/2DhV0V2">https://goo.gle/2DhV0V2</a> Scroll-linked Animations 1 → <a href="https://goo.gle/39VQV4N">https://goo.gle/39VQV4N</a> 15 thoughts on What's the Maximum Z-Index? → <a href= "https://goo.gle/31ipKxh">https://goo.gle/31ipKxh</a> What No One Told You About Z-Index → <a href="https://goo.gle/3fqTLjl">https://goo.gle/3fqTLjl</a> ]]></description> <content:encoded><![CDATA[In today’s episode, we’re talking about z-index and stacking context. This is a pretty in-depth topic, but it's something that we see all the time and it can definitely bite if you aren’t aware of what’s going on. Links: CSS Animations Level 1 → <a href="https://goo.gle/2DhV0V2">https://goo.gle/2DhV0V2</a> Scroll-linked Animations 1 → <a href="https://goo.gle/39VQV4N">https://goo.gle/39VQV4N</a> 15 thoughts on What's the Maximum Z-Index? → <a href= "https://goo.gle/31ipKxh">https://goo.gle/31ipKxh</a> What No One Told You About Z-Index → <a href="https://goo.gle/3fqTLjl">https://goo.gle/3fqTLjl</a> ]]></content:encoded> <enclosure length="23321017" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_019_v1.0.mp3?dest-id=1891556" /> <itunes:duration>19:49</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,zindex,stackingcontext,cssanimations,scrolllinkedanimations,maxzindex,maximumzindex,zindex101</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>19</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>18: Focus</title> <itunes:title>Focus</itunes:title> <pubDate>Thu, 30 Jul 2020 17:11:09 +0000</pubDate> <guid isPermaLink="false"><![CDATA[410d5899-98a1-4af0-a4c1-105e998c9d70]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/018-focus]]></link> <description><![CDATA[Today we discuss: focus! Focus is something we regularly deal with when writing styles and is also very tied to markup and attributes like tabindex, so we’ll be discussing all of those things in this episode! Links: User Action Pseudo-classes → <a href="https://goo.gle/3jNSHcL">https://goo.gle/3jNSHcL</a> HTML Standard → <a href= "https://goo.gle/3g7FzNr">https://goo.gle/3g7FzNr</a> Keyboard control → <a href="https://goo.gle/2X1rNEE">https://goo.gle/2X1rNEE</a> Roving tabindex -- A11 → <a href="https://goo.gle/3jOZenQ">https://goo.gle/3jOZenQ</a> ]]></description> <content:encoded><![CDATA[Today we discuss: focus! Focus is something we regularly deal with when writing styles and is also very tied to markup and attributes like tabindex, so we’ll be discussing all of those things in this episode! Links: User Action Pseudo-classes → <a href="https://goo.gle/3jNSHcL">https://goo.gle/3jNSHcL</a> HTML Standard → <a href= "https://goo.gle/3g7FzNr">https://goo.gle/3g7FzNr</a> Keyboard control → <a href="https://goo.gle/2X1rNEE">https://goo.gle/2X1rNEE</a> Roving tabindex -- A11 → <a href="https://goo.gle/3jOZenQ">https://goo.gle/3jOZenQ</a> ]]></content:encoded> <enclosure length="22448737" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_018_v1.0.mp3?dest-id=1891556" /> <itunes:duration>18:54</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,focus,HTML,css,engineering,programming,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,writingstyles,tabindex,pseudoclasses,htmlstandard,keyboardcontrol</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>18</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>17: Shadows</title> <itunes:title>Shadows</itunes:title> <pubDate>Wed, 22 Jul 2020 17:02:32 +0000</pubDate> <guid isPermaLink="false"><![CDATA[4613b4ee-9535-4bdf-9c13-dd621eee4d6a]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/017-shadows]]></link> <description><![CDATA[Today we’re talking about shadows! Box shadows, drop shadows, text shadows, and everything in between. Shadows can exist all over our UIs without us even realizing it because sometimes, they just look like borders. box-shadow spec → <a href="https://goo.gle/32JVdL4">https://goo.gle/32JVdL4</a> text-shadow spec → <a href="https://goo.gle/2ZMdiGo">https://goo.gle/2ZMdiGo</a> Sass pixel art → <a href= "https://goo.gle/3hsjQjp">https://goo.gle/3hsjQjp</a> Any image to CSS → <a href="https://goo.gle/2WKnm0L">https://goo.gle/2WKnm0L</a> Easing Box Shadows → <a href="https://goo.gle/2BjU6qh">https://goo.gle/2BjU6qh</a> Codepen → <a href= "https://goo.gle/2ZLUDL2">https://goo.gle/2ZLUDL2</a> 3D Text → <a href= "https://goo.gle/2ZNO8ar">https://goo.gle/2ZNO8ar</a> ]]></description> <content:encoded><![CDATA[Today we’re talking about shadows! Box shadows, drop shadows, text shadows, and everything in between. Shadows can exist all over our UIs without us even realizing it because sometimes, they just look like borders. box-shadow spec → <a href="https://goo.gle/32JVdL4">https://goo.gle/32JVdL4</a> text-shadow spec → <a href="https://goo.gle/2ZMdiGo">https://goo.gle/2ZMdiGo</a> Sass pixel art → <a href= "https://goo.gle/3hsjQjp">https://goo.gle/3hsjQjp</a> Any image to CSS → <a href="https://goo.gle/2WKnm0L">https://goo.gle/2WKnm0L</a> Easing Box Shadows → <a href="https://goo.gle/2BjU6qh">https://goo.gle/2BjU6qh</a> Codepen → <a href= "https://goo.gle/2ZLUDL2">https://goo.gle/2ZLUDL2</a> 3D Text → <a href= "https://goo.gle/2ZNO8ar">https://goo.gle/2ZNO8ar</a> ]]></content:encoded> <enclosure length="25003721" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_017_v2.0.mp3?dest-id=1891556" /> <itunes:duration>21:34</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,Shadows,syntax,webdevelopment,googlechrome,computerscience,pixelart,codepen,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,boxshadow,textshadow,3dtext</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>17</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>16: Borders</title> <itunes:title>Borders</itunes:title> <pubDate>Wed, 15 Jul 2020 17:15:12 +0000</pubDate> <guid isPermaLink="false"><![CDATA[05381370-c377-4f37-b8cf-60148377396d]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/016-borders]]></link> <description><![CDATA[Today we’re talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It’s not just color and style that you can adjust, but also also border images, where you control how the image repeats itself and what slice of the image you want to show. Links: CSS backgrounds and borders → <a href= "https://goo.gle/3hbosdZ">https://goo.gle/3hbosdZ</a> CSS logical properties and values → <a href= "https://goo.gle/308szAl">https://goo.gle/308szAl </a> Fancy border radius generator → <a href= "https://goo.gle/3fH3SBT">https://goo.gle/3fH3SBT</a> ]]></description> <content:encoded><![CDATA[Today we’re talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It’s not just color and style that you can adjust, but also also border images, where you control how the image repeats itself and what slice of the image you want to show. Links: CSS backgrounds and borders → <a href= "https://goo.gle/3hbosdZ">https://goo.gle/3hbosdZ</a> CSS logical properties and values → <a href= "https://goo.gle/308szAl">https://goo.gle/308szAl </a> Fancy border radius generator → <a href= "https://goo.gle/3fH3SBT">https://goo.gle/3fH3SBT</a> ]]></content:encoded> <enclosure length="28079483" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_016_v1.0.mp3?dest-id=1891556" /> <itunes:duration>24:46</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssbackgrounds,cssborders,bordergenerator,colorandstyle,borderimages</itunes:keywords> <itunes:subtitle><![CDATA[Today we’re talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It’s not just color and style that you can adjust, but also also border images, where you control how the...]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>16</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>15: Pseudo Selectors</title> <itunes:title>Pseudo Selectors</itunes:title> <pubDate>Wed, 01 Jul 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[231a9753-d201-4880-ab67-5d2f9a90157d]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/015-pseudo-selectors]]></link> <description><![CDATA[In this episode we break down functional and regular pseudo selectors, CSS’s special hook into encapsulated element states. We can’t control them, but we can leverage them to provide rich interactive feedback from our interfaces. Links: Selectors Level 4 → <a href="https://goo.gle/2ZiJLmt">https://goo.gle/2ZiJLmt</a> a:link vs. a styling demo → <a href="https://goo.gle/2NGwWgd">https://goo.gle/2NGwWgd</a> Hacking Visited for Una’s Blog → <a href="https://goo.gle/3eIo0TC">https://goo.gle/3eIo0TC</a> :focus-within from Next Generation Web Styling → <a href= "https://goo.gle/3gaXSRE">https://goo.gle/3gaXSRE</a> :focus-visible explainer → <a href="https://goo.gle/2VslHMA">https://goo.gle/2VslHMA</a> Una’s Pure CSS Whackamole → <a href="https://goo.gle/2VxfhvX">https://goo.gle/2VxfhvX</a> Una’s Pure CSS Tick Tack Toe → <a href="https://goo.gle/2ZzTCob">https://goo.gle/2ZzTCob</a> Pure CSS Games Post → <a href="https://goo.gle/2VslTvi">https://goo.gle/2VslTvi</a> Empty Demo with Custom Properties → <a href="https://goo.gle/31tUlJS">https://goo.gle/31tUlJS</a> :blank naming → <a href= "https://goo.gle/2Vukm81">https://goo.gle/2Vukm81</a> ]]></description> <content:encoded><![CDATA[In this episode we break down functional and regular pseudo selectors, CSS’s special hook into encapsulated element states. We can’t control them, but we can leverage them to provide rich interactive feedback from our interfaces. Links: Selectors Level 4 → <a href="https://goo.gle/2ZiJLmt">https://goo.gle/2ZiJLmt</a> a:link vs. a styling demo → <a href="https://goo.gle/2NGwWgd">https://goo.gle/2NGwWgd</a> Hacking Visited for Una’s Blog → <a href="https://goo.gle/3eIo0TC">https://goo.gle/3eIo0TC</a> :focus-within from Next Generation Web Styling → <a href= "https://goo.gle/3gaXSRE">https://goo.gle/3gaXSRE</a> :focus-visible explainer → <a href="https://goo.gle/2VslHMA">https://goo.gle/2VslHMA</a> Una’s Pure CSS Whackamole → <a href="https://goo.gle/2VxfhvX">https://goo.gle/2VxfhvX</a> Una’s Pure CSS Tick Tack Toe → <a href="https://goo.gle/2ZzTCob">https://goo.gle/2ZzTCob</a> Pure CSS Games Post → <a href="https://goo.gle/2VslTvi">https://goo.gle/2VslTvi</a> Empty Demo with Custom Properties → <a href="https://goo.gle/31tUlJS">https://goo.gle/31tUlJS</a> :blank naming → <a href= "https://goo.gle/2Vukm81">https://goo.gle/2Vukm81</a> ]]></content:encoded> <enclosure length="39602994" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_015_v1.0.mp3?dest-id=1891556" /> <itunes:duration>36:46</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>15</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>14: Pseudo Elements</title> <itunes:title>Pseudo Elements</itunes:title> <pubDate>Wed, 24 Jun 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[95358d6d-9619-4fec-9ff0-c42590d73231]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/014-pseudo-elements]]></link> <description><![CDATA[::after and ::before? Pssh, do you know about ::first-letter, ::spelling-error, and ::backdrop? In this episode, we dive into the world of pseudo-elements and discuss how to use these unique declarations that enable styling specific parts of some selected HTML. Links CSS Pseudo-Elements Module Level 4 → <a href="https://goo.gle/2BxRB3q">https://goo.gle/2BxRB3q</a> CSS Shadow Parts → <a href="https://goo.gle/2NqjYmM">https://goo.gle/2NqjYmM</a> CSS Text Decoration Module Level 3 → <a href="https://goo.gle/2zXWYsd">https://goo.gle/2zXWYsd</a> The ::cue pseudo-element → <a href="https://goo.gle/2Z0E6kF">https://goo.gle/2Z0E6kF</a> CSS Scoping Module Level 1 → <a href="https://goo.gle/3hXj9jt">https://goo.gle/3hXj9jt</a> Part and theme explainer → <a href="https://goo.gle/2YqsJn2">https://goo.gle/2YqsJn2</a> ]]></description> <content:encoded><![CDATA[::after and ::before? Pssh, do you know about ::first-letter, ::spelling-error, and ::backdrop? In this episode, we dive into the world of pseudo-elements and discuss how to use these unique declarations that enable styling specific parts of some selected HTML. Links CSS Pseudo-Elements Module Level 4 → <a href="https://goo.gle/2BxRB3q">https://goo.gle/2BxRB3q</a> CSS Shadow Parts → <a href="https://goo.gle/2NqjYmM">https://goo.gle/2NqjYmM</a> CSS Text Decoration Module Level 3 → <a href="https://goo.gle/2zXWYsd">https://goo.gle/2zXWYsd</a> The ::cue pseudo-element → <a href="https://goo.gle/2Z0E6kF">https://goo.gle/2Z0E6kF</a> CSS Scoping Module Level 1 → <a href="https://goo.gle/3hXj9jt">https://goo.gle/3hXj9jt</a> Part and theme explainer → <a href="https://goo.gle/2YqsJn2">https://goo.gle/2YqsJn2</a> ]]></content:encoded> <enclosure length="23626316" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_014_v1.0.mp3?dest-id=1891556" /> <itunes:duration>20:08</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[ Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>14</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>13: Spacing</title> <itunes:title>Spacing</itunes:title> <pubDate>Wed, 17 Jun 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[cae8f5a9-dcd7-4c77-89b3-17f15bc5e3bd]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/011-spacing]]></link> <description><![CDATA[In this episode we do our best to cover the many ways to create space on the web. From techniques like HTML entities nbsp; to gap, we cover the clever, hacky and clean ways you can create spatial relationships on the web. Links CSS Logical Properties and Values Level 1 → <a href= "https://goo.gle/3gw7FTp">https://goo.gle/3gw7FTp</a> HTML Entities → <a href= "https://goo.gle/36Soqnd">https://goo.gle/36Soqnd</a> Everything You Should Know About Collapsing Margins → <a href= "https://goo.gle/2MwOuLr">https://goo.gle/2MwOuLr</a> Adam’s video: flex gap and internationalization → <a href= "https://goo.gle/3gIuB1w">https://goo.gle/3gIuB1w</a>]]></description> <content:encoded><![CDATA[In this episode we do our best to cover the many ways to create space on the web. From techniques like HTML entities nbsp; to gap, we cover the clever, hacky and clean ways you can create spatial relationships on the web. Links CSS Logical Properties and Values Level 1 → <a href= "https://goo.gle/3gw7FTp">https://goo.gle/3gw7FTp</a> HTML Entities → <a href= "https://goo.gle/36Soqnd">https://goo.gle/36Soqnd</a> Everything You Should Know About Collapsing Margins → <a href= "https://goo.gle/2MwOuLr">https://goo.gle/2MwOuLr</a> Adam’s video: flex gap and internationalization → <a href= "https://goo.gle/3gIuB1w">https://goo.gle/3gIuB1w</a>]]></content:encoded> <enclosure length="27578956" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_013_v1.0.mp3?dest-id=1891556" /> <itunes:duration>24:15</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,internationalization,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,csslogicalpropertiesandvalues,htmlentities,collapsingmargins,flexgap</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>13</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>12: Logical Properties</title> <itunes:title>Logical Properties</itunes:title> <pubDate>Wed, 27 May 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[ff13c92e-a8f6-409f-870e-8ba5243bff42]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/012-logical-properties]]></link> <description><![CDATA[The days of euro-centric spacing like `margin-top` are limited: instead, say hello to `margin-block-start` to define space that works within any linguistic context based on your layout needs.In this episode we shake the physical and lean into the logical as we break down CSS logical properties. Links: <a href="https://goo.gle/3gw7FTp">https://goo.gle/3gw7FTp</a> Flow-relative syntax for margin - like shorthands - <a href="https://goo.gle/2ZLoS4W">https://goo.gle/2ZLoS4W</a> ]]></description> <content:encoded><![CDATA[The days of euro-centric spacing like `margin-top` are limited: instead, say hello to `margin-block-start` to define space that works within any linguistic context based on your layout needs.In this episode we shake the physical and lean into the logical as we break down CSS logical properties. Links: <a href="https://goo.gle/3gw7FTp">https://goo.gle/3gw7FTp</a> Flow-relative syntax for margin - like shorthands - <a href="https://goo.gle/2ZLoS4W">https://goo.gle/2ZLoS4W</a> ]]></content:encoded> <enclosure length="23825912" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_012_v3.0.mp3?dest-id=1891556" /> <itunes:duration>20:20</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>12</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>11: Grid</title> <itunes:title>Grid</itunes:title> <pubDate>Wed, 20 May 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[338dac2b-8d7a-49ba-9d2d-00b5e3397091]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/011-grid]]></link> <description><![CDATA[Tracks, gaps, areas and flow are hot topics in this full coverage episode on CSS grid. We don’t leave anything out, so you’re bound to pick up something new. We talk about functions like min, max, and minmax, and how to combine all of the powers of CSS Grid to create explicit and auto layouts. This episode will set you up to reach for the right parts of grid at the right time. Links Grid Spec → <a href= "https://goo.gle/3bLLfcW">https://goo.gle/3bLLfcW</a> 3 CSS Grid Features Una Loves → <a href="https://goo.gle/2LGJAL8">https://goo.gle/2LGJAL8</a> Grid to Flex → <a href= "https://goo.gle/2ThGBx0">https://goo.gle/2ThGBx0</a> ]]></description> <content:encoded><![CDATA[Tracks, gaps, areas and flow are hot topics in this full coverage episode on CSS grid. We don’t leave anything out, so you’re bound to pick up something new. We talk about functions like min, max, and minmax, and how to combine all of the powers of CSS Grid to create explicit and auto layouts. This episode will set you up to reach for the right parts of grid at the right time. Links Grid Spec → <a href= "https://goo.gle/3bLLfcW">https://goo.gle/3bLLfcW</a> 3 CSS Grid Features Una Loves → <a href="https://goo.gle/2LGJAL8">https://goo.gle/2LGJAL8</a> Grid to Flex → <a href= "https://goo.gle/2ThGBx0">https://goo.gle/2ThGBx0</a> ]]></content:encoded> <enclosure length="34865656" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_011_v1.0.mp3?dest-id=1891556" /> <itunes:duration>31:50</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>10: Flexbox</title> <itunes:title>Flexbox</itunes:title> <pubDate>Wed, 13 May 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[ccf14835-361d-44da-961f-a6a6599bf111]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/010-flexbox]]></link> <description><![CDATA[In this episode we flex our flexbox knowledge and dive deep into CSS layout using the flexible box model. We talk about content axis’, flex flow, wrapping, order, justification, alignment, and more! Links Flexbox Spec - <a href= "https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a> Flow-flow with writing mode - <a href= "https://codepen.io/argyleink/pen/mdeedye">https://codepen.io/argyleink/pen/mdeedye</a> Grid to Flex: <a href= "https://gridtoflex.com">https://gridtoflex.com</a>]]></description> <content:encoded><![CDATA[In this episode we flex our flexbox knowledge and dive deep into CSS layout using the flexible box model. We talk about content axis’, flex flow, wrapping, order, justification, alignment, and more! Links Flexbox Spec - <a href= "https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a> Flow-flow with writing mode - <a href= "https://codepen.io/argyleink/pen/mdeedye">https://codepen.io/argyleink/pen/mdeedye</a> Grid to Flex: <a href= "https://gridtoflex.com">https://gridtoflex.com</a>]]></content:encoded> <enclosure length="27375640" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_010_v1.0.mp3?dest-id=1891556" /> <itunes:duration>24:02</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,engineering,programming,order,alignment,justification,wrapping,webdevelopment,googlechrome,computerscience,flexbox,googledevelopers,csslayout,csslayoutusingtheflexibleboxmodel,contentaxis,flexflow</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>10</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>9: Layout</title> <itunes:title>Layout</itunes:title> <pubDate>Wed, 06 May 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[c4d1e304-8cc9-4c6e-81e8-d3a376bc930f]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/009-layout]]></link> <description><![CDATA[In this episode we provide an overview and slight history of laying things out on the web, starting from blocks and framesets, ending with Grid and Houdini. Links A History of CSS through 15 years of 24 ways → <a href= "https://goo.gle/3fnrBXI">https://goo.gle/3fnrBXI</a> Holy Grail Layout → <a href="https://goo.gle/2ynld2l">https://goo.gle/2ynld2l</a> Complete Guide to Flexbox → <a href="https://goo.gle/2A2Wtg9">https://goo.gle/2A2Wtg9</a> Grid Guide → <a href= "https://goo.gle/2SEldBM">https://goo.gle/2SEldBM</a>]]></description> <content:encoded><![CDATA[In this episode we provide an overview and slight history of laying things out on the web, starting from blocks and framesets, ending with Grid and Houdini. Links A History of CSS through 15 years of 24 ways → <a href= "https://goo.gle/3fnrBXI">https://goo.gle/3fnrBXI</a> Holy Grail Layout → <a href="https://goo.gle/2ynld2l">https://goo.gle/2ynld2l</a> Complete Guide to Flexbox → <a href="https://goo.gle/2A2Wtg9">https://goo.gle/2A2Wtg9</a> Grid Guide → <a href= "https://goo.gle/2SEldBM">https://goo.gle/2SEldBM</a>]]></content:encoded> <enclosure length="28799208" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_009_v1.1.mp3?dest-id=1891556" /> <itunes:duration>25:31</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>9</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>8: Sizing Units</title> <itunes:title>Sizing Units</itunes:title> <pubDate>Wed, 29 Apr 2020 17:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[a9ada2fe-a232-4f3f-b822-4df6d4e81c30]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/tcp-css-podcast-episode-008]]></link> <description><![CDATA[We’re sizing up sizing in CSS in this episode as we break down all the different lengths and measurements in CSS. CSS makes using these things seamless, it’s great, but let’s study some of the intricacies here; how it works and what that means for your day to day usage. Links CSS Spec Values and Units Level 4 → <a href="https://goo.gle/2KKdttw">https://goo.gle/2KKdttw</a> Sizing and Units on MDC → <a href="https://goo.gle/2VMkros">https://goo.gle/2VMkros</a> Speech Module → <a href= "https://goo.gle/2YbLISJ">https://goo.gle/2YbLISJ</a> All About Ems → <a href= "https://goo.gle/3bMViiV">https://goo.gle/3bMViiV</a> ]]></description> <content:encoded><![CDATA[We’re sizing up sizing in CSS in this episode as we break down all the different lengths and measurements in CSS. CSS makes using these things seamless, it’s great, but let’s study some of the intricacies here; how it works and what that means for your day to day usage. Links CSS Spec Values and Units Level 4 → <a href="https://goo.gle/2KKdttw">https://goo.gle/2KKdttw</a> Sizing and Units on MDC → <a href="https://goo.gle/2VMkros">https://goo.gle/2VMkros</a> Speech Module → <a href= "https://goo.gle/2YbLISJ">https://goo.gle/2YbLISJ</a> All About Ems → <a href= "https://goo.gle/3bMViiV">https://goo.gle/3bMViiV</a> ]]></content:encoded> <enclosure length="28992912" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_008_v1.0.mp3?dest-id=1891556" /> <itunes:duration>25:43</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>8</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>7: Color Part 2 - Perception</title> <itunes:title>Color Part 2 - Perception</itunes:title> <pubDate>Wed, 22 Apr 2020 21:03:39 +0000</pubDate> <guid isPermaLink="false"><![CDATA[71c36097-e4e7-4084-8964-a949243e336a]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/007-color-part-2-perception]]></link> <description><![CDATA[Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories and strategies for color on the web in 2020. Links: Spec CSS color level-4 → <a href="https://goo.gle/3cFCaDr">https://goo.gle/3cFCaDr</a> Draft Spec CSS color level-5 → <a href= "https://goo.gle/3cL4CUF">https://goo.gle/3cL4CUF</a> How Color Gamut & Display Technology Can Affect Your Content → <a href= "https://goo.gle/3eIH5p3">https://goo.gle/3eIH5p3</a> WICG Contrast Ratio → <a href="https://goo.gle/2XWxZyZ">https://goo.gle/2XWxZyZ</a> Lea Verou LCH color picker→ <a href="https://goo.gle/2VvVopn">https://goo.gle/2VvVopn</a> Webkit Working on Color Level 4 → <a href="https://goo.gle/353yf0D">https://goo.gle/353yf0D</a> ]]></description> <content:encoded><![CDATA[Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories and strategies for color on the web in 2020. Links: Spec CSS color level-4 → <a href="https://goo.gle/3cFCaDr">https://goo.gle/3cFCaDr</a> Draft Spec CSS color level-5 → <a href= "https://goo.gle/3cL4CUF">https://goo.gle/3cL4CUF</a> How Color Gamut & Display Technology Can Affect Your Content → <a href= "https://goo.gle/3eIH5p3">https://goo.gle/3eIH5p3</a> WICG Contrast Ratio → <a href="https://goo.gle/2XWxZyZ">https://goo.gle/2XWxZyZ</a> Lea Verou LCH color picker→ <a href="https://goo.gle/2VvVopn">https://goo.gle/2VvVopn</a> Webkit Working on Color Level 4 → <a href="https://goo.gle/353yf0D">https://goo.gle/353yf0D</a> ]]></content:encoded> <enclosure length="25252177" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_007_v2.0.mp3?dest-id=1891556" /> <itunes:duration>21:49</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>7</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>6: Color Part 1 - Usage</title> <itunes:title>Color Part 1 - Usage</itunes:title> <pubDate>Wed, 15 Apr 2020 16:08:29 +0000</pubDate> <guid isPermaLink="false"><![CDATA[d6ac4e42-40bf-458c-a682-001248941442]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/006-color-part-1-usage]]></link> <description><![CDATA[In this part 1 episode, we dive deep into using CSS color. We discuss ways to write and code colors, places they can go, functions you can use on them, and then we top it off with a hex color challenge. As always, you’ll learn new jargon, pick up a trick or two, and learn something new. #C55 is #ace not #5ad Links <a href= "https://www.youtube.com/watch?v=PqDw0ZPYIq8">The Evolution of Color - Chris Lilley</a> <a href= "https://www.youtube.com/watch?v=eqZqx6lRPe0">Read color hex codes - Dave DeSandro</a> <a href="https://www.w3.org/TR/css-color-3/">CSS color level 3</a> <a href= "https://www.w3.org/TR/2003/CR-css3-color-20030514/#flavor"> “flavor” system color</a> <a href= "https://almanac.httparchive.org/en/2019/css">Web Almanac 2019: CSS Chapter</a> -- https://almanac.httparchive.org/en/2019/css Nerds Guide to Web Color -> <a href= "https://css-tricks.com/nerds-guide-color-web/">https://css-tricks.com/nerds-guide-color-web/</a> <a href="https://codepen.io/argyleink/pen/ExjReJa">HSL hue turn rotate codepen</a>]]></description> <content:encoded><![CDATA[In this part 1 episode, we dive deep into using CSS color. We discuss ways to write and code colors, places they can go, functions you can use on them, and then we top it off with a hex color challenge. As always, you’ll learn new jargon, pick up a trick or two, and learn something new. #C55 is #ace not #5ad Links <a href= "https://www.youtube.com/watch?v=PqDw0ZPYIq8">The Evolution of Color - Chris Lilley</a> <a href= "https://www.youtube.com/watch?v=eqZqx6lRPe0">Read color hex codes - Dave DeSandro</a> <a href="https://www.w3.org/TR/css-color-3/">CSS color level 3</a> <a href= "https://www.w3.org/TR/2003/CR-css3-color-20030514/#flavor"> “flavor” system color</a> <a href= "https://almanac.httparchive.org/en/2019/css">Web Almanac 2019: CSS Chapter</a> -- https://almanac.httparchive.org/en/2019/css Nerds Guide to Web Color -> <a href= "https://css-tricks.com/nerds-guide-color-web/">https://css-tricks.com/nerds-guide-color-web/</a> <a href="https://codepen.io/argyleink/pen/ExjReJa">HSL hue turn rotate codepen</a>]]></content:encoded> <enclosure length="34210296" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_006_v3.0.mp3?dest-id=1891556" /> <itunes:duration>31:09</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>6</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>5: Inheritance</title> <itunes:title>Inheritance</itunes:title> <pubDate>Wed, 08 Apr 2020 16:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[fc0f2615-6902-4680-9a76-9c0003c93d58]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/005-inheritance]]></link> <description><![CDATA[Inheritance and its effects in CSS are found all over your styles, almost invisibly, until further investigation through devtools or docs. In today’s episode, we illuminate the aspects of inheritance, how they’re useful, things to watch out for, and of course tips, tricks and vocabulary. Links Spec: css-cascade-3 → <a href= "https://goo.gle/39KZPR6">https://goo.gle/39KZPR6</a> List of inherits or not → <a href= "https://goo.gle/2wn0yKF">https://goo.gle/2wn0yKF</a> ]]></description> <content:encoded><![CDATA[Inheritance and its effects in CSS are found all over your styles, almost invisibly, until further investigation through devtools or docs. In today’s episode, we illuminate the aspects of inheritance, how they’re useful, things to watch out for, and of course tips, tricks and vocabulary. Links Spec: css-cascade-3 → <a href= "https://goo.gle/39KZPR6">https://goo.gle/39KZPR6</a> List of inherits or not → <a href= "https://goo.gle/2wn0yKF">https://goo.gle/2wn0yKF</a> ]]></content:encoded> <enclosure length="12093150" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_005_v1.2.mp3?dest-id=1891556" /> <itunes:duration>08:07</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>5</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>4: The Cascade</title> <itunes:title>The Cascade</itunes:title> <pubDate>Wed, 01 Apr 2020 15:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[fa1d1b34-0e16-45b6-98f6-4d02e3a1a255]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/004-the-cascade]]></link> <description><![CDATA[The “C” in CSS stands for the cascade! And that’s what today’s show is all about. Learn how the styles you write are affected by other styles, and how it all boils down to what the user sees. 4 Phases Of The Cascade: › Position › Specificity › Origin › Importance Links MDN on the Cascade and Inheritance → <a href="https://goo.gle/39jAEES">https://goo.gle/39jAEES</a> CSS Cascade Interactive Article → <a href="https://goo.gle/2UhqIHV">https://goo.gle/2UhqIHV</a> Una’s Doodle → <a href= "https://goo.gle/2QKTy13">https://goo.gle/2QKTy13</a>]]></description> <content:encoded><![CDATA[The “C” in CSS stands for the cascade! And that’s what today’s show is all about. Learn how the styles you write are affected by other styles, and how it all boils down to what the user sees. 4 Phases Of The Cascade: › Position › Specificity › Origin › Importance Links MDN on the Cascade and Inheritance → <a href="https://goo.gle/39jAEES">https://goo.gle/39jAEES</a> CSS Cascade Interactive Article → <a href="https://goo.gle/2UhqIHV">https://goo.gle/2UhqIHV</a> Una’s Doodle → <a href= "https://goo.gle/2QKTy13">https://goo.gle/2QKTy13</a>]]></content:encoded> <enclosure length="15642459" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_004_v1.0_FINAL.mp3?dest-id=1891556" /> <itunes:duration>11:49</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,computerscience,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors,pseudoselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>4</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>3: Specificity</title> <itunes:title>Specificity</itunes:title> <pubDate>Tue, 24 Mar 2020 23:00:39 +0000</pubDate> <guid isPermaLink="false"><![CDATA[35853dc5-e43d-4752-ac3a-55c49a7a93ad]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/003-specificity]]></link> <description><![CDATA[In this episode we talk about how the browser resolves multiple selectors targeting the same subjects and how it determines which style to actually apply. Turns out, lots of code from many different locations is trying to style your elements, learning about specificity will help you debug and understand why or why not certain styles are winning over others. Links Diagram by Estelle Weyl → <a href= "http://specifishity.com/">http://specifishity.com</a> Specificity Calculator → <a href= "https://specificity.keegan.st/">https://specificity.keegan.st</a>]]></description> <content:encoded><![CDATA[In this episode we talk about how the browser resolves multiple selectors targeting the same subjects and how it determines which style to actually apply. Turns out, lots of code from many different locations is trying to style your elements, learning about specificity will help you debug and understand why or why not certain styles are winning over others. Links Diagram by Estelle Weyl → <a href= "http://specifishity.com/">http://specifishity.com</a> Specificity Calculator → <a href= "https://specificity.keegan.st/">https://specificity.keegan.st</a>]]></content:encoded> <enclosure length="22979524" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_003_v2.0_FINAL.mp3?dest-id=1891556" /> <itunes:duration>12:58</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,css,programming,syntax,Specificity,webdevelopment,googlechrome,computerscience,frontenddevelopment,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors</itunes:keywords> <itunes:subtitle><![CDATA[Beginner friendly CSS web development show on specificity]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>3</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>2: Selectors</title> <itunes:title>Selectors</itunes:title> <pubDate>Wed, 18 Mar 2020 14:00:52 +0000</pubDate> <guid isPermaLink="false"><![CDATA[df353407-e5a1-4dc3-aa3d-347563fcff2a]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/002-selectors]]></link> <description><![CDATA[Get ready to learn some new CSS vocabulary! In this episode we talk about selectors, a syntax used to find elements (subjects) in a tree. CSS uses selectors to bind styles to subjects, and it’s quite powerful. We go over universal selectors, type selectors, class selectors, ID selectors, attribute selectors, pseudo selectors, complex and compound selectors, and various combinators. A lot of things! Links CSS selectors level 3 →<a href="https://goo.gle/39MHdRp">https://goo.gle/39MHdRp</a> CSS - Tricks: How Selectors Work → <a href="https://goo.gle/3cUSb9y">https://goo.gle/3cUSb9y</a> ]]></description> <content:encoded><![CDATA[Get ready to learn some new CSS vocabulary! In this episode we talk about selectors, a syntax used to find elements (subjects) in a tree. CSS uses selectors to bind styles to subjects, and it’s quite powerful. We go over universal selectors, type selectors, class selectors, ID selectors, attribute selectors, pseudo selectors, complex and compound selectors, and various combinators. A lot of things! Links CSS selectors level 3 →<a href="https://goo.gle/39MHdRp">https://goo.gle/39MHdRp</a> CSS - Tricks: How Selectors Work → <a href="https://goo.gle/3cUSb9y">https://goo.gle/3cUSb9y</a> ]]></content:encoded> <enclosure length="25939302" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_002_v2.0_FINAL.mp3?dest-id=1891556" /> <itunes:duration>15:02</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>Google,HTML,css,engineering,programming,syntax,webdevelopment,googlechrome,frontenddevelopment,googledevelopers,cssvocabulary,cssselectors,findelements,findsubjects,universalselectors,typeselectors,classselectors,idselectors,attributeselectors</itunes:keywords> <itunes:subtitle><![CDATA[ Beginner friendly CSS computer science]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>2</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> <item> <title>1: The Box Model</title> <itunes:title>Box Model</itunes:title> <pubDate>Thu, 12 Mar 2020 19:00:00 +0000</pubDate> <guid isPermaLink="false"><![CDATA[3da489cd-dede-4d22-96e6-be5ffd48fcb8]]></guid> <link><![CDATA[http://thecsspodcast.libsyn.com/-the-css-podcast-box-model-episode-1]]></link> <description><![CDATA[Where do scrollbars go, inside or outside the box? In this episode Una and Adam answer that and much more in their discussion of the CSS box model. Everything in CSS starts as a box, and while that’s a straight forward concept to initially think about, it can get complex quite quickly. Not only do boxes surround elements, but letters in a sentence each have a box too. How many boxes are there!? Lots. Lots of boxes. Links Box Model CSS Spec: <a href="https://goo.gle/39KwDud">https://goo.gle/39KwDud</a> Adam’s Box Model CodePen: <a href="https://goo.gle/38JFZ8n">https://goo.gle/38JFZ8n</a> CSS Tricks on the Box Model: <a href="https://goo.gle/3aM4a7p">https://goo.gle/3aM4a7p</a> Check out the Instagram: <a href= "https://goo.gle/2W97OEg">https://goo.gle/2W97OEg</a> ]]></description> <content:encoded><![CDATA[Where do scrollbars go, inside or outside the box? In this episode Una and Adam answer that and much more in their discussion of the CSS box model. Everything in CSS starts as a box, and while that’s a straight forward concept to initially think about, it can get complex quite quickly. Not only do boxes surround elements, but letters in a sentence each have a box too. How many boxes are there!? Lots. Lots of boxes. Links Box Model CSS Spec: <a href="https://goo.gle/39KwDud">https://goo.gle/39KwDud</a> Adam’s Box Model CodePen: <a href="https://goo.gle/38JFZ8n">https://goo.gle/38JFZ8n</a> CSS Tricks on the Box Model: <a href="https://goo.gle/3aM4a7p">https://goo.gle/3aM4a7p</a> Check out the Instagram: <a href= "https://goo.gle/2W97OEg">https://goo.gle/2W97OEg</a> ]]></content:encoded> <enclosure length="21697434" type="audio/mpeg" url="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast__Episode_001_v2.0.mp3?dest-id=1891556" /> <itunes:duration>12:05</itunes:duration> <itunes:explicit>false</itunes:explicit> <itunes:keywords>web,Google,HTML,css,javascript,programming,cs,developer,Dev,js,webdevelopment,googlechrome,computerscience,frontenddevelopment,googledevelopers,webstyle,webprogramming,adamargyle,unakravets</itunes:keywords> <itunes:subtitle><![CDATA[ Beginner friendly CSS computer science]]></itunes:subtitle> <itunes:season>1</itunes:season> <itunes:episode>1</itunes:episode> <itunes:episodeType>full</itunes:episodeType> <itunes:author>Google</itunes:author> </item> </channel> </rss>