The CSS Podcast

The CSS Podcast

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.... Show More

Episodes

February 23, 2021 20 min

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 → http://goo.gle/3uvvRwb
CSS Conditional Rules Module → http://goo.gle/37Bgf02
@property → https://goo.gle/3upuMpB
Media Queries → https://goo.gle/2Nl2VGp
CSS Fonts → http://goo.gle/3dB2uSU

The CSS Podcast
#CSSpodcast

Share
Mark as Played
February 16, 2021 16 min

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 → http://goo.gle/2LlRhtS
Custom bullets with CSS → http://goo.gle/3rol0BL
CSS Lists, Markers, And Counters→ http://goo.gle/3cHa5yP
CSS Counter Grid → https://goo.gle/3awKJkp

The CSS Podcast
#CSSpodcast

Share
Mark as Played
December 9, 2020 16 min

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 → https://goo.gle/3mG6BPc

Links

The Layout API → https://goo.gle/3gspEdI

Masonry Layout Example...

Share
Mark as Played
December 2, 2020 29 min

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 → https://goo.gle/39bWvBV

MDN Docs on CSS Painting API → https://goo.gle/3m3e1M1

Worklet Reference → https://goo.gle/3980Equ

Share
Mark as Played
November 18, 2020 21 min

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 → https://goo.gle/3n2FrC9

Spec → https://goo.gle/32fq94O

caniuse attributeStyleMap →  https://goo.gle/3leR0Fu

caniuse computedStyleMap →  https://goo....

Share
Mark as Played
November 11, 2020 21 min

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 → https://goo.gle/2HZ6Aad

Value Definitions Spec → https://goo.gle/2HZCCTy

Houdini @property → https://goo.gle/3eyFimW

Share
Mark as Played
September 16, 2020 52 min

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.

Share
Mark as Played
September 9, 2020 18 min

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 → https://goo.gle/3m5L9mP 

Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX 

Share
Mark as Played
September 2, 2020 26 min

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 → https://goo.gle/34SPJ1D 

Backdrop Filter → https://goo.gle/3hJTMRz 

CSSGram → https://goo.gle/2EPDOad 

Custom & Instagram...

Share
Mark as Played
August 26, 2020 38 min

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 → https://goo.gle/2DhV0V2 

Easing Level 1 Spec → https://goo.gle/3kWoWap 

Scroll-Linked Animations Draft Spec → https://goo.gle/39VQV4N 

Cubic-Bezier Tool → https://goo...

Share
Mark as Played
August 19, 2020 30 min

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 → https://goo.gle/3h8cRN7 

Spec Draft Level 4 → https://goo.gle/3iPmDUE 

Lea’s Pattern Gallery → https://goo.gle/3j4XEwX

Lea’s Cicada Principle Article → h...

Share
Mark as Played
August 12, 2020 39 min

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 → https://goo.gle/2XRb7Ah 

CSS Variables → https://goo.gle/2XRb2fX 

Functional Notations Spec → https://goo.gle/3gJwavQ 

Cubic Bezier Generator → https://goo.gle/...

Share
Mark as Played
August 5, 2020 19 min

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 → https://goo.gle/2DhV0V2 

Scroll-linked Animations 1 → https://goo.gle/39VQV4N 

15 thoughts on What's the Maximum Z-Index? → https://goo.gle/31ipKxh 

What No One Told You About Z-Ind...

Share
Mark as Played
July 30, 2020 18 min

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 → https://goo.gle/3jNSHcL 

HTML Standard → https://goo.gle/3g7FzNr 

Keyboard control → https://goo.gle/2X1rNEE  

Roving tabindex -- A11 → https://goo.gle/3jOZenQ 

Share
Mark as Played
July 22, 2020 21 min

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 →  https://goo.gle/32JVdL4 

text-shadow spec → https://goo.gle/2ZMdiGo 

Sass pixel art → https://goo.gle/3hsjQjp 

Any image to CSS → https://goo.gle/2WKnm0L 

Easing Box Shadows → https://goo.gle/2BjU6qh...

Share
Mark as Played
July 15, 2020 24 min

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 → https://goo.gle/3hbosdZ

CSS logical properties and values → https://goo.gle/308szAl 

...

Share
Mark as Played
July 1, 2020 36 min

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 → https://goo.gle/2ZiJLmt 

a:link vs. a styling demo → https://goo.gle/2NGwWgd 

Hacking Visited for Una’s Blog → https://goo.gle/3eIo0TC 

:focus-within from Next Generation Web S...

Share
Mark as Played
June 24, 2020 20 min

::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 → https://goo.gle/2BxRB3q 

CSS Shadow Parts → https://goo.gle/2NqjYmM 

CSS Text Decoration Module Level 3 → https://goo.gle/2zXWYsd...

Share
Mark as Played
June 17, 2020 24 min

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 → https://goo.gle/3gw7FTp 

HTML Entities → https://goo.gle/36Soqnd 

Everything You Should Know About Collapsing Margins → https://goo.gle/2MwOuLr 

Adam’s video: fle...

Share
Mark as Played
May 27, 2020 20 min

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:

https://goo.gle/3gw7FTp 

Flow-relative syntax for margin - like shorthands -

https://goo.gle/2ZLoS4W 

Share
Mark as Played

Chat About The CSS Podcast

Advertise With Us

Popular Podcasts

Black History Month Podcasts
Black History Month Podcasts
We honor Black History Month by highlighting shows that explore icons, change-makers, the history of civil rights, and overall Black voices. Enjoy a moving and inspirational group of podcasts that will expand your knowledge of Black History.
The Daily
The Daily
This is what the news should sound like. The biggest stories of our time, told by the best journalists in the world. Hosted by Michael Barbaro. Twenty minutes a day, five days a week, ready by 6 a.m.
Crime Junkie
Crime Junkie
If you can never get enough true crime...

For You

    Music, radio and podcasts, all free. Listen online or download the iHeartRadio App.

    Connect

    © 2021 iHeartMedia, Inc.