The CSS Podcast

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

3 CSS Grid Features Una Loves → https://goo.gle/2LGJAL8

Grid to Flex → https://goo.gle/2ThGBx0

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 - https://www.w3.org/TR/css-flexbox-1/

Flow-flow with writing mode - https://codepen.io/argyleink/pen/mdeedye

Grid to Flex: https://gridtoflex.com

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

Holy Grail Layout → https://goo.gle/2ynld2l

Complete Guide to Flexbox → https://goo.gle/2A2Wtg9

Grid Guide → https://goo.gle/2SEldBM

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

Sizing and Units on MDC → https://goo.gle/2VMkros

Speech Module → https://goo.gle/2YbLISJ

All About Ems → https://goo.gle/3bMViiV

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

Draft Spec CSS color level-5 → https://goo.gle/3cL4CUF

How Color Gamut & Display Technology Can Affect Your Content → https://goo.gle/3eIH5p3

WICG Contrast Ratio → https://goo.gle/2XWxZyZ

Lea Verou LCH color picker→ https://goo.gle/2VvVopn

Webkit Working on Color Level 4 → https://goo.gle/353yf0D

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

The Evolution of Color - Chris Lilley

Read color hex codes - Dave DeSandro

CSS color level 3

"flavor" system color

Web Almanac 2019: CSS Chapter -- https://almanac.httparchive.org/en/2019/css

Nerds Guide to Web Color -> https://css-tricks.com/nerds-guide-color-web/

HSL hue turn rotate codepen

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

List of inherits or not → https://goo.gle/2wn0yKF

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

CSS Cascade Interactive Article → https://goo.gle/2UhqIHV

Una's Doodle → https://goo.gle/2QKTy13

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 → http://specifishity.com

Specificity Calculator → https://specificity.keegan.st

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

CSS - Tricks: How Selectors Work → https://goo.gle/3cUSb9y