CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>The CSS Podcast</title> <link rel='shortcut icon' type='image/png' href='/assets/favicon.png' /> <link rel="manifest" href="/manifest.json"> <link rel="search" href="/assets/opensearch.xml" type="application/opensearchdescription+xml" title="Search pod.link"></link> <meta name="twitter:title" content="The CSS Podcast"> <meta property="og:title" content="The CSS Podcast"> <meta name="description" content="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." /> <meta property="og:description" content="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."> <meta name="twitter:description" content="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."> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="720" /> <meta property="og:image:type" content="image/jpeg" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:image" content="https://podlink.imgix.net/3e5fa94e61bef3997a6f2a76d0e3ee21/poster.jpeg?width=1280&height=720&fit=fill&pad=104&bg=FFF" /> <meta property="og:image:alt" content="The CSS Podcast" /> <meta name="twitter:image" content="https://podlink.imgix.net/3e5fa94e61bef3997a6f2a76d0e3ee21/poster.jpeg?width=1280&height=720&fit=fill&pad=104&bg=FFF" /> <meta name="twitter:image:alt" content="The CSS Podcast" /> <style type="text/css" data-fela-rehydration="181" data-fela-type="STATIC">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary, time, mark, audio, video {border: 0;font-family: inherit;font-size: 100%;margin: 0;padding: 0;vertical-align: baseline;-webkit-tap-highlight-color: rgba(0,0,0,0);}input[type="text"],input[type="number"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;}input,button {background: none;border: 0;font-family: inherit;font-size: inherit;margin: 0;padding: 0;}html,body {-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;color: #1b1f23;font-family: 'Larsseit', 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif;font-size: 16px;font-weight: 400;height: 100%;line-height: 1.4;margin: 0;min-height: 100vh;padding: 0;width: 100%;}*,*:before,*:after {box-sizing: border-box;}#root {height: 100%;}@font-face {font-family: 'Larsseit';font-style: normal;font-weight: 400;font-display: swap;src: url('/assets/fonts/Larsseit-Regular.otf') format('opentype');}@font-face {font-family: 'Larsseit';font-style: normal;font-weight: 500;font-display: swap;src: url('/assets/fonts/Larsseit-Medium.otf') format('opentype');}@font-face {font-family: 'Larsseit';font-style: normal;font-weight: 700;font-display: swap;src: url('/assets/fonts/Larsseit-Bold.otf') format('opentype');}.grecaptcha-badge { visibility: hidden; }.react-colorful {cursor: default;display: flex;flex-direction: column;height: 100%;position: relative;user-select: none;width: 100%;}.react-colorful__saturation {position: relative;flex-grow: 1;border-bottom: 12px solid #000;border-radius: 8px 8px 0 0;background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),linear-gradient(to right, #fff, rgba(255, 255, 255, 0));}.react-colorful__pointer-fill,.react-colorful__alpha-gradient {content: "";position: absolute;left: 0;top: 0;right: 0;bottom: 0;pointer-events: none;border-radius: inherit;}/* Improve elements rendering on light backgrounds */.react-colorful__alpha-gradient,.react-colorful__saturation {box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);}.react-colorful__hue,.react-colorful__alpha {position: relative;height: 24px;}.react-colorful__hue {background: linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);}/* Round bottom corners of the last element: 'Hue' for 'ColorPicker' or 'Alpha' for 'AlphaColorPicker' */.react-colorful__last-control {border-radius: 0 0 8px 8px;}.react-colorful__interactive {position: absolute;left: 0;top: 0;right: 0;bottom: 0;border-radius: inherit;outline: none;/* Don't trigger the default scrolling behavior when the event is originating from this element */touch-action: none;}.react-colorful__pointer {position: absolute;z-index: 1;box-sizing: border-box;width: 28px;height: 28px;transform: translate(-50%, -50%);background-color: #fff;border: 2px solid #fff;border-radius: 50%;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.react-colorful__interactive:focus .react-colorful__pointer {transform: translate(-50%, -50%) scale(1.1);}/* Chessboard-like pattern for alpha related elements */.react-colorful__alpha,.react-colorful__alpha-pointer {background-color: #fff;background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');}/* Display the saturation pointer over the hue one */.react-colorful__saturation-pointer {z-index: 3;}/* Display the hue pointer over the alpha one */.react-colorful__hue-pointer {z-index: 2;}</style><style type="text/css" data-fela-rehydration="181" data-fela-type="RULE">.a{background-color:#ffffff}.b{color:#1b1f23}.c{display:flex}.d{flex-direction:column}.e{height:auto}.f{height:100%}.h{margin:0 auto}.i{max-width:992px}.j{align-items:center}.k{contain:paint}.l{flex-shrink:0}.m{background:#ffffff}.n{height:3.5rem}.o{padding:0 0.75rem 0 1.125rem}.p{position:sticky}.q{z-index:1}.r{top:0}.s svg{color:#DA71FF}.t{cursor:pointer}.u{font-size:1.125rem}.v{font-weight:700}.w{margin-right:auto}.x{overflow:hidden}.y{text-overflow:ellipsis}.z{white-space:nowrap}.ab{width:100%}.ac{background:#DA71FF}.ae{bottom:0}.af{font-weight:500}.ag{justify-content:center}.ah{left:0}.ai{opacity:0}.aj{padding:0 1.125rem}.ak{pointer-events:none}.al{position:absolute}.am{right:0}.an{transition:opacity .3s linear}.aq{background:none}.ar{border:0}.as{color:inherit}.at{display:inline-flex}.au{outline:0}.av{padding:0.375rem}.aw svg{width:1.75rem}.ax svg{height:1.75rem}.az{margin-right:0.625rem}.ba{justify-content:space-between}.bb{margin-bottom:1rem}.bc{display:grid}.bd{grid-gap:1.25rem}.be{grid-template-columns:max-content 1fr}.bf{min-width:0}.bg{margin-bottom:0.25rem}.bh{font-size:1.25rem}.bi{line-height:1.25}.bj{grid-gap:0.75rem}.bk{grid-template-columns:1fr max-content}.bl{margin-top:1rem}.bm{position:relative}.bn{border-radius:2rem}.bo{font-family:inherit}.bp{font-size:inherit}.bq{padding:0.625rem 1rem 0.75rem}.br{font-size:0.8125rem}.bs{margin:auto}.bt{padding:0 1rem 0}.cc{align-items:start}.cd{grid-gap:2rem}.ce{padding:1.125rem}.cf{grid-template-areas:"cover" "detail" "apps" "episodes" "footer"}.cj{grid-area:cover}.cm{grid-area:detail}.cn{font-size:2rem}.co{line-height:1.18}.cq{font-size:14px}.cr{margin-top:0.3125rem}.cs{padding:0.25rem 0.625rem}.ct{background:#1b1f23}.cu{color:#ffffff}.cv{grid-area:apps}.cw{margin:0 0 0.5rem 0}.cx{grid-area:episodes}.da{padding:1rem}.db{text-align:center}.dc{border:2px solid #1b1f23}.dd{padding:0.5rem 1rem 0.65rem}.dg{grid-area:footer}.dh{opacity:1}.di{transition:opacity .4s}.dj{border-radius:1.5rem}.dk{height:14rem}.dl{width:14rem}.dp{margin-top:0.75rem}.dq{opacity:0.8}.dr{word-break:break-word}.ds{color:#DA71FF}.dt{text-decoration:none}.dv{margin-left:-1.125rem}.dw{padding:0.5rem 1.125rem}.dx{width:calc(100% + 2.250rem)}.eb{padding-right:1rem}.ed{height:3.25rem}.ee{padding:0}.ef{transition:transform .2s ease}.eg{width:3.25rem}.ei{border-radius:1.25rem}.ej{grid-gap:.625rem}.ek{grid-template-columns:2.25rem 1fr}.el{transition:all .2s linear}.eo{border-radius:50%}.ep{height:2.25rem}.eq{margin-top:0.0625rem}.er{width:2.25rem}.es svg{color:#ffffff}.et{line-height:1.3}.eu{margin-bottom:0.5rem}.ew{font-size:0.875rem}.ex{margin-top:0.25rem}.ey svg{width:1.5rem}.ez svg{height:1.5rem}.fa{margin-left:0.125rem}.fb{padding:0 0 .5rem 0}.fe{flex-wrap:wrap}.ff{margin:0.1875rem 0.375rem}.fg svg{width:5rem}.fh svg{height:5rem}.fn{border-radius:1rem 1rem 0 0}.fo{grid-gap:0.625rem}.fp{grid-template-columns:auto 1fr auto}.fq{height:5rem}.fr{padding:0.625rem 1.125rem}.fs{position:fixed}.fu{opacity:0.75}.fv{border-radius:0.375rem}.fw{height:3rem}.fx{width:3rem}.fy svg{width:2rem}.fz svg{height:2rem}.de:hover{background:#1b1f23}.df:hover{color:#ffffff}.du:hover{filter:brightness(0.85)}.eh:hover{transform:scale(1.16667)}.fm:hover{text-decoration:underline}.ay:active{opacity:0.5}</style><style type="text/css" data-fela-rehydration="181" data-fela-type="RULE" media="(min-width: 992px)">.ap{font-size:1.125rem}.bv{background:#ffffff}.bw{height:3.5rem}.bx{margin:0 auto}.by{max-width:992px}.bz{position:sticky}.ca{top:0}.cb{width:100%}.cg{grid-gap:2rem 3rem}.ch{grid-template-columns:19rem 1fr}.ci{grid-template-areas:"cover detail" "cover apps" "cover episodes" "cover footer"}.cl{top:4.625rem}.cp{font-size:3rem}.cz{margin:0}.dn{height:19rem}.do{width:19rem}.ec{padding-bottom:0.75rem}.en{padding:1rem}.fc{font-size:0.9375rem}.fd{padding:2rem 0 2.5rem}.fj{margin-bottom:1.5rem}.fk svg{height:6.125rem}.fl svg{width:6.125rem}.ft{display:none}</style><style type="text/css" data-fela-rehydration="181" data-fela-type="RULE" media="(max-width: 992px)">.g{margin-bottom:5rem}.ao{font-size:1rem}.bu{display:none}.ck{justify-content:center}.cy{margin:0}.dm{transition:transform .2s cubic-bezier(0.33, 1, 0.68, 1)}.dy{display:flex}.dz{overflow-x:auto}.ea::-webkit-scrollbar{display:none}.em{padding:1rem 0}.ev{font-size:0.875rem}.fi{margin-bottom:1rem}</style> </head> <body> <div id="root"><div class="f"><div class="a b c d e"><div class="j k c l m n o p q r s"><div class="t u v w x y z ab">pod.link/thecsspodcast</div><button tabIndex="0" class="aq ar as at au av aw ax t ay az" aria-label="Share"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.76 7.947l-.96.96c-.426.427-1.066.427-1.28.107a1.031 1.031 0 010-1.494l3.2-3.2a1.031 1.031 0 011.494 0l3.2 3.2a1.032 1.032 0 010 1.494 1.031 1.031 0 01-1.494 0l-.96-.96c-.106-.107-.213-.107-.32-.107a.23.23 0 00-.213.213v5.227c0 .64-.427 1.067-1.067 1.067-.64 0-1.066-.427-1.066-1.067V8.054a.23.23 0 00-.214-.214c-.106 0-.213 0-.32.107zM6.494 19.254c1.493 1.6 3.733 1.706 5.76 1.706 2.026 0 4.266-.106 5.76-1.706 1.386-1.494 1.493-3.627 1.493-5.44 0-.64-.427-1.067-1.067-1.067-.64 0-1.066.427-1.066 1.067 0 1.386-.107 2.986-.96 3.946-.854.96-2.667 1.067-4.16 1.067-1.494 0-3.307-.107-4.16-1.067-.854-.96-.96-2.56-.96-3.946 0-.64-.427-1.067-1.067-1.067-.64 0-1.067.427-1.067 1.067 0 1.813.107 3.946 1.494 5.44z" fill="currentColor"/></svg></button><button tabIndex="0" class="aq ar as at au av aw ax t ay" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.198 3a7.2 7.2 0 103.58 13.448c.445-.255 1.017-.222 1.38.143l4.082 4.106a1.029 1.029 0 101.46-1.45l-4.1-4.122c-.36-.361-.393-.928-.14-1.37A7.2 7.2 0 0010.198 3zm-5.143 7.2a5.143 5.143 0 1110.286 0 5.143 5.143 0 01-10.286 0z" fill="currentColor"/></svg></button><div class="j ac ae b c af ag ah ai aj ak al am r an ao ap">pod.link copied!</div></div><div class="f g"><div class="h i"><div><div class="cc bc cd ce cf cg ch ci"><div class="c cj ck bz cl"> <img class="dh di ar dj dk dl dm dn do" alt="The CSS Podcast" src="https://podlink.imgix.net/3e5fa94e61bef3997a6f2a76d0e3ee21/poster.jpeg?width=448&auto=format" /></div><div class="cm"><div class="cn v co cp">The CSS Podcast</div><div class="af cq at bn cr cs ct cu">The CSS Podcast</div><p class="dp"><span class="dq dr">Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started...</span> <a href="#" class="ds dt du">more</a></p></div><div class="cv bf"><h3 class="bh cw">Listen now on</h3><div class="k dv dw dx dy dz ea"><div class="at eb ec"><a href="/thecsspodcast.apple" class="aq ar t at ed au ee ef eg eh"><img title="Apple Podcasts" alt="Apple Podcasts" src="/assets/apps/apple.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.spotify" class="aq ar t at ed au ee ef eg eh"><img title="Spotify" alt="Spotify" src="/assets/apps/spotify.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.overcast" class="aq ar t at ed au ee ef eg eh"><img title="Overcast" alt="Overcast" src="/assets/apps/overcast.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.podcastaddict" class="aq ar t at ed au ee ef eg eh"><img title="Podcast Addict" alt="Podcast Addict" src="/assets/apps/podcastaddict.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.pocketcasts" class="aq ar t at ed au ee ef eg eh"><img title="Pocket Casts" alt="Pocket Casts" src="/assets/apps/pocketcasts.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.castbox" class="aq ar t at ed au ee ef eg eh"><img title="Castbox" alt="Castbox" src="/assets/apps/castbox.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.podbean" class="aq ar t at ed au ee ef eg eh"><img title="Podbean" alt="Podbean" src="/assets/apps/podbean.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.iheartradio" class="aq ar t at ed au ee ef eg eh"><img title="iHeartRadio" alt="iHeartRadio" src="/assets/apps/iheartradio.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.playerfm" class="aq ar t at ed au ee ef eg eh"><img title="Player FM" alt="Player FM" src="/assets/apps/playerfm.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.podcastrepublic" class="aq ar t at ed au ee ef eg eh"><img title="Podcast Republic" alt="Podcast Republic" src="/assets/apps/podcastrepublic.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.castro" class="aq ar t at ed au ee ef eg eh"><img title="Castro" alt="Castro" src="/assets/apps/castro.svg" class="f ab" /></a></div><div class="at eb ec"><a href="/thecsspodcast.rss" class="aq ar t at ed au ee ef eg eh"><img title="RSS" alt="RSS" src="/assets/apps/rss.svg" class="f ab" /></a></div></div></div><div class="cx"><h3 class="bh cy cz">Episodes</h3><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">091: Season 5 Wrap-up</div><div class="dr ev"><p><span class="dq dr"> Una and Adam recap the season! They share their favorite features, stories, and...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">03 Oct 2024 · 42 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">090: Scroll-driven animations</div><div class="dr ev"><p><span class="dq dr">In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(),...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">26 Sep 2024 · 46 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">089: View transitions</div><div class="dr ev"><p><span class="dq dr">In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions....</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">19 Sep 2024 · 41 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">088: State queries</div><div class="dr ev"><p><span class="dq dr">In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS,...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">12 Sep 2024 · 23 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">087: Anchor positioning</div><div class="dr ev"><p><span class="dq dr">In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">22 Aug 2024 · 38 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">086: Nesting 2024+</div><div class="dr ev"><p><span class="dq dr">In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">08 Aug 2024 · 8 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">085: Linear easing function fun</div><div class="dr ev"><p><span class="dq dr">In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. ...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">01 Aug 2024 · 16 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">084: Text Wrap</div><div class="dr ev"><p><span class="dq dr">In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform....</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">11 Jul 2024 · 12 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">083: :has() tips and tricks</div><div class="dr ev"><p><span class="dq dr">In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">03 Jul 2024 · 36 minutes</div></div></div></div><div class="cc ei t bc ej ek el em en"><div class="j ac eo t c ep ag eq er es"><button tabIndex="0" class="aq ar as at au ee ey ez t ay fa" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div><div><div class="u af et eu">082: What's new in color & color functions</div><div class="dr ev"><p><span class="dq dr">In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS...</span> <a href="#" class="ds dt du">more</a></p><div class="ew ex dq">27 Jun 2024 · 18 minutes</div></div></div></div><div class="da db"><button aria-label="Load More" class="dc bn b t af au dd bm de df"><span>Load More</span></button></div></div><div class="dg"><div class="j b c d fb ab ev fc fd"><div class="aq ar as at au ee fg fh fi fj fk fl"><svg viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M251.64 115.89V38M48.44 225.76l56.33 35.63m-5.56-64.94l26.75 44.78M44 284.2l51.66 7.12" stroke="currentColor" stroke-width="11.594" stroke-miterlimit="10" stroke-linecap="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M232.269 112.174L83.082 408.318l-.084.144a3.956 3.956 0 001.507 5.44l.001.001a3.958 3.958 0 005.29-1.366l149.062-295.405.082-.142c5.354-9.265 18.716-9.234 24.049.011l66.169 112.043 6.148-5.108-66.437-111.594-.02-.034c-8.122-14.07-28.38-14.115-36.58-.134zm118.068 114.345l-15.207 12.637 3.383 5.728 15.225-12.653-3.401-5.712zm3.401 5.712l-3.401-5.712 89.448-74.33.002-.002a3.278 3.278 0 014.623.427 3.288 3.288 0 01-.43 4.623l-.005.005-90.237 74.989zm-3.023 17.588l-6.23 5.177 71.636 121.298.018.033c5.226 9.115-1.184 20.431-11.553 20.782l-299.095 45.808h-.441a3.304 3.304 0 00-.332 6.589l299.932-45.823h.44c16.286 0 26.463-17.604 18.348-31.713l-72.723-122.151zm-12.202-4.935l-3.383-5.728-125.163 104.011a3.28 3.28 0 00-.43 4.626 3.28 3.28 0 004.626.43l.002-.002 124.348-103.337zm-18.387-8.334l-67.157-113.715-.019-.033c-.862-1.504-2.994-1.534-3.91-.11L99.98 418.091l-.084.144c-4.254 7.345-13.597 9.929-21.022 5.802-7.546-4.193-10.227-13.715-6.004-21.218l149.197-296.164.082-.143c12.605-21.833 44.096-21.845 56.721-.036l65.463 109.958 88.04-73.161.002-.002c6.325-5.258 15.699-4.385 20.952 1.932l.006.007c5.238 6.318 4.377 15.7-1.948 20.949l-.005.004m0 0l-91.638 76.154 73.699 123.791.02.034c12.534 21.712-2.958 48.803-27.911 49.132l-300.06 45.843h-.44c-8.218 0-14.897-6.661-14.897-14.897 0-8.066 6.4-14.629 14.403-14.889l299.093-45.808h.441c1.753 0 2.851-1.891 2.003-3.407l-70.64-119.614-113.876 94.635c-6.326 5.26-15.7 4.388-20.954-1.93-5.26-6.326-4.388-15.7 1.93-20.954l.002-.002 117.571-97.701" fill="currentColor"/></svg></div><div class="c fe dq ag"><div class="ff">© 2024 pod.link</div><a href="/terms" class="as dt ff fm">Terms</a><a href="/privacy" class="as dt ff fm">Privacy</a><a href="https://twitter.com/_PodLink" class="as dt ff fm" rel="noopener" target="_blank">Twitter</a><a href="/thecsspodcast/verify" class="as dt ff fm">Claim Podcast</a><a href="#" class="as dt ff fm">Clear Cache</a><a href="/help" class="as dt ff fm">Help</a></div></div></div></div></div><div></div></div></div> <div class="j ac fn ae b t bc fo fp fq ah fr fs am ft"> <img class="dh di ar fv fw fx" alt="The CSS Podcast" src="https://podlink.imgix.net/3e5fa94e61bef3997a6f2a76d0e3ee21/poster.jpeg?width=448&auto=format" /><div class="bf"><div class="x y z">091: Season 5 Wrap-up</div><div class="x y z fu">The CSS Podcast</div></div><button tabIndex="0" class="aq ar b at au ee fy fz t ay" aria-label="Play/Pause"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.05c0-.864.986-1.357 1.676-.839l7.683 5.762c.559.42.559 1.257 0 1.676l-7.683 5.762A1.048 1.048 0 017 17.573V6.05z" fill="currentColor"/></svg></button></div></div></div><audio preload="metadata" src></audio></div> <script type="module" src="/client.0.2.21.js" async></script> <script> window.RECAPTCHA_SITE_KEY = "6LcX9EUaAAAAAFxAw8mJBOoEisWlPWdJScsz0pn8"; window.__STATE__ = {"url":"/thecsspodcast/","feed":{"id":"thecsspodcast","episodes":[{"description":" Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation. What a year for CSS! Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 ","episodeId":"700f7d24dd562cb2e6869fcd911c67de","episodeImageHash":"2161281329b60399c111e0e357f6b700","title":"091: Season 5 Wrap-up","published":"2024-10-03T21:00:00.000Z","guid":"c0f29b68-b75a-49fd-941a-8c0d5d3352ed","links":["https://twitter.com/Una","https://twitter.com/toolsday","https://twitter.com/argyleink","https://twitter.com/CSSWG"],"enclosure":{"filesize":61869661,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP091_final.mp3?dest-id=1891556"},"duration":2559,"explicit":false,"episodeType":"full"},{"description":"In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers. Resources: Bramus's Demos: All mentioned Demos + Tools + Video Course + DevTools Extension link → https://goo.gle/3Uw31up Video Course direct link: https://goo.gle/learn-scroll-driven-animations Adam's Demos: scroll() the hue wheel → https://goo.gle/4emb3NO CSS scroll() feature time warp → https://goo.gle/4exH3yv view() long bento list → https://goo.gle/4gtcCLx view() scrolly telling → https://goo.gle/3TAq2vA view() iOS-like app switcher → https://goo.gle/4etvCI6 view() variable font animation → https://goo.gle/4e8eJmd Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘","episodeId":"548bd3292b6e0d347da926813d02db9d","episodeImageHash":"6c14889b7f3c075d9ca11514eda1c8e7","title":"090: Scroll-driven animations","published":"2024-09-26T21:00:00.000Z","guid":"893fd362-588b-4344-92c0-ce4fd9c805f9","links":["https://twitter.com/Una","https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA","https://a.nerdy.dev/youtube"],"enclosure":{"filesize":67562058,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP090_final.mp3?dest-id=1891556"},"duration":2793,"explicit":false,"episodeType":"full"},{"description":"In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos. Resources: Developer Documentation → https://goo.gle/4aHY7zo Quick intro to View Transitions (Google I/O 2023 video) → https://goo.gle/3ZieRLp What's new in View Transitions? (Google I/O 2024 video) → https://goo.gle/3zeYNj3 Misconceptions about View Transitions → https://goo.gle/3Tpsu7O Bramus's Demos: Collection of various demos, both SPA and MPA → https://goo.gle/3B4edY8 Accordion → https://goo.gle/3B4egDi Adam's Demos: Grid gallery → https://goo.gle/4giz0XV Always great grid → https://goo.gle/3MH68Lu Flexbox visualizer → https://goo.gle/47kmJOB Editable tabs → https://goo.gle/4ghNfMx Dollar number input → https://goo.gle/4e0FsBf Stateful morphing button → https://goo.gle/4ebBNR2 Drag and Drop → https://goo.gle/3XlP2Yn Isotope recreation → https://goo.gle/4dVX5lN Local development animated → https://goo.gle/3XHjm17 Una Kravets (co-host) Twitter → https://goo.gle/452aBRb YouTube → https://goo.gle/457oMnS Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC & Designing in the Browser 🎬 → https://goo.gle/4e4YTcM Adam Argyle (co-host) Twitter → https://goo.gle/3yFnHYu Instagram → https://goo.gle/3wUb6QJ YouTube → https://goo.gle/4dZNKK7 @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → https://goo.gle/4bFErxq VisBug → https://goo.gle/4bDcVQZ The CSS Podcast #CSSpodcast ","episodeId":"b5df5fb77ba3ece4e6522df8a90bec92","episodeImageHash":"31d3625209ca1e26cd3f12881de4a54a","title":"089: View transitions","published":"2024-09-19T21:00:00.000Z","guid":"5b2506bc-0d24-488b-a330-6211225dbbf8","links":["https://twitter.com/Una","https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA","https://twitter.com/argyleink","https://www.instagram.com/argyleink/","https://goo.gle/3wUb6QJ","https://a.nerdy.dev/youtube","https://twitter.com/GoogleChrome","https://twitter.com/CSSWG"],"enclosure":{"filesize":61574412,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP089_final.mp3?dest-id=1891556"},"duration":2511,"explicit":false,"episodeType":"full"},{"description":"In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS, this feature will be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky. Resources: :stuck, :snapped, :on-screen, etc → https://goo.gle/3WVhSi6 state queries syntax → https://goo.gle/3T2gI33 explainer → https://goo.gle/3XevW7x Intent To Prototype → https://goo.gle/3Au8rOY Scroll Snap Events → https://goo.gle/47koXO1 Una Kravets (co-host) Twitter → https://goo.gle/452aBRb YouTube → https://goo.gle/457oMnS Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face Host of Tools Today → https://goo.gle/4aI6JpC & Designing in the Browser 🎬 → https://goo.gle/4e4YTcM Adam Argyle (co-host) Twitter → https://goo.gle/3yFnHYu Instagram → https://goo.gle/3wUb6QJ YouTube → https://goo.gle/4dZNKK7 @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → https://goo.gle/4bFErxq VisBug → https://goo.gle/4bDcVQZ The CSS Podcast #CSSpodcast Watch more The CSS Podcast → https://goo.gle/CSSpodcast Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs #CSSPodcast #ChromeForDevelopers #Chrome Speaker: Una Kravets, Adam Argyle","episodeId":"2f266b00ed7ec2b7c57d15620b4ccb18","episodeImageHash":"13dd15a70cf6f2a835633f89417d4975","title":"088: State queries","published":"2024-09-12T21:00:00.000Z","guid":"8ed17cc7-529f-4788-8fe2-de258827f65e","links":["https://twitter.com/Una","https://twitter.com/googlechrome","https://www.youtube.com/redirect?q=https%3A%2F%2Fgoo.gle%2F2NeLxjI&redir_token=AscWoOrD6kypj4tT8So-xP1HNPN8MTU4MjgzODAwM0AxNTgyNzUxNjAz&event=video_description&v=Irp6R69pZGA","https://twitter.com/argyleink","https://www.instagram.com/argyleink/","https://goo.gle/3wUb6QJ","https://a.nerdy.dev/youtube","https://twitter.com/CSSWG","https://goo.gle/CSSpodcast"],"enclosure":{"filesize":33665211,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP088_final.mp3?dest-id=1891556"},"duration":1393,"explicit":false,"episodeType":"full"},{"description":"In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → https://goo.gle/3SWrvM5 CSS anchor positioning → https://goo.gle/4dwgmd9 Tab’s talk from CSS Day → https://goo.gle/4ds8g5B Una's Anchor Tool → https://goo.gle/3yDYDSd Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 ","episodeId":"c53e724b5baa87ffee02aa8c45799f40","episodeImageHash":"4d4474e8e21cf36eaca5f79af77625fb","title":"087: Anchor positioning","published":"2024-08-22T21:00:00.000Z","guid":"ce5d7ee4-fd83-4f30-abea-ae6c0ba64415","links":["https://twitter.com/Una","https://twitter.com/toolsday","https://twitter.com/argyleink","https://twitter.com/CSSWG"],"enclosure":{"filesize":55382957,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP087_final_1.mp3?dest-id=1891556"},"duration":2282,"explicit":false,"episodeType":"full"},{"description":"In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → https://goo.gle/3SvM9T4 Episode 65 → https://goo.gle/3ygA7X1 CSS Nesting Update → https://goo.gle/3WHCRpK Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘","episodeId":"f3951cf8ff4c2c769fda2015f5f671bc","episodeImageHash":"978d3a86f06ce1cce82f2e681c2eec4b","title":"086: Nesting 2024+","published":"2024-08-08T21:00:00.000Z","guid":"e7ed2937-b264-4278-9789-0a09f2181d2f","links":["https://twitter.com/Una","https://twitter.com/toolsday","https://twitter.com/argyleink","https://twitter.com/CSSWG"],"enclosure":{"filesize":12205391,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP086_final.mp3?dest-id=1891556"},"duration":490,"explicit":false,"episodeType":"full"},{"description":"In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → https://goo.gle/4frnp8y linear() generator → https://goo.gle/46xs2JZ Complex animation curves in CSS with linear() → https://goo.gle/4ftm0Oz Open Props premade spring and bounce variables → https://goo.gle/46uaGOc Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 ","episodeId":"5c108147d8a3ba315330aa7892817757","episodeImageHash":"f9582c31dac01a0b18cad428d31da787","title":"085: Linear easing function fun","published":"2024-08-01T21:00:00.000Z","guid":"85daa516-ce0c-4e0b-b7ec-09b1f084b5e6","links":["https://twitter.com/Una","https://twitter.com/toolsday","https://twitter.com/argyleink","https://twitter.com/CSSWG"],"enclosure":{"filesize":23808481,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP087_final.mp3?dest-id=1891556"},"duration":970,"explicit":false,"episodeType":"full"},{"description":"In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code. Resources: text-wrap on MDN → https://goo.gle/3zvwixd soft breaks → https://goo.gle/4cXKLAq Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘","episodeId":"15888cc6516f19ba880228287c121abc","episodeImageHash":"f15c263492767c4f2f20e4508d672c25","title":"084: Text Wrap","published":"2024-07-11T21:00:00.000Z","guid":"fa886ca9-54fc-418b-aa53-5610c5f2b62f","links":["https://twitter.com/Una","https://twitter.com/toolsday","https://twitter.com/argyleink","https://twitter.com/CSSWG"],"enclosure":{"filesize":12269707,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP084_v1.mp3?dest-id=1891556"},"duration":767,"explicit":false,"episodeType":"full"},{"description":"In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS. Resources: Ep 61 → https://goo.gle/4cID6pE Piccali → https://goo.gle/4ePKJMG Ahmad Shadeed → https://goo.gle/4bsk85F The Looper → https://goo.gle/3yKmXkI Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘","episodeId":"4522032089803f06ad19cade05686a7f","episodeImageHash":"e3476a53231839b8bad883864fe1f68b","title":"083: :has() tips and tricks","published":"2024-07-03T21:00:00.000Z","guid":"753eabb8-acb6-40bf-86da-d9cf62f0c066","links":["https://twitter.com/Una","https://twitter.com/toolsday","https://twitter.com/argyleink","https://twitter.com/CSSWG"],"enclosure":{"filesize":34789772,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP083_v2.mp3?dest-id=1891556"},"duration":2174,"explicit":false,"episodeType":"full"},{"description":"In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → https://goo.gle/4cRRJHt Apple Annie CSS Color Modules and Changes, Part I → https://goo.gle/3xtTr2A Lea verou article on RCS for contrast → https://goo.gle/3L3x5YF Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 ","episodeId":"02a3484f4bca7594bca3c6627a3a8981","episodeImageHash":"62692b55659cb212c172af35a99eebae","title":"082: What's new in color & color functions","published":"2024-06-27T21:00:00.000Z","guid":"68678ac5-0945-422c-81ff-23da2dfcca80","links":["https://twitter.com/Una","https://twitter.com/toolsday","https://twitter.com/argyleink","https://twitter.com/CSSWG"],"enclosure":{"filesize":17661523,"type":"audio/mpeg","url":"https://traffic.libsyn.com/secure/thecsspodcast/TCP082_v1.mp3?dest-id=1891556"},"duration":1104,"explicit":false,"episodeType":"full"}],"opts":{"id":"thecsspodcast","feedId":"7386b63b00367f04b0f7c41d56c6c13f","href":"https://thecsspodcast.libsyn.com/rss","slug":"thecsspodcast","backgroundColor":null,"fontColor":null,"primaryColor":null,"secondaryColor":null,"publisher":null,"imageUrl":null,"faviconUrl":null,"itunesId":"1501895136","googleAnalyticsId":null},"feedId":"7386b63b00367f04b0f7c41d56c6c13f","title":"The CSS Podcast","author":"The CSS Podcast","owner":{"name":"Google Developer Studio","email":"gdevs.podcast@gmail.com"},"href":"https://thecsspodcast.libsyn.com/rss","description":"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.","category":["Technology"],"type":"episodic","image":"https://static.libsyn.com/p/assets/0/0/0/f/000f46d88b74118de55e3c100dce7605/unnamed_22-20240924-isyx55aeie.png","showImageHash":"3e5fa94e61bef3997a6f2a76d0e3ee21","websiteUrl":"https://thecsspodcast.libsyn.com/"},"publisher":null,"customColors":{"backgroundColor":"#ffffff","fontColor":"#1b1f23","primaryColor":"#DA71FF","secondaryColor":"#1b1f23"}}; window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); </script> </body> </html>