The CSS Podcast

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 :focus-visible explainer → https://goo.gle/2VslHMA :blank naming → https://goo.gle/2Vukm81 Pure CSS Games Post → https://goo.gle/2VslTvi Empty Demo with Custom Properties → https://goo.gle/31tUlJS

::after and ::before? Do you know about ::first-letter, ::spelling-error, and ::backdrop? Dive into pseudo-elements & how to use these unique declarations that enable styling specific parts of some selected HTML. CSS Pseudo-Elements Module Level 4→https://goo.gle/2BxRB3q CSS Shadow Parts→https://goo.gle/2NqjYmM CSS Text Decoration M.L.3→https://goo.gle/2zXWYsd The ::cue pseudo-element→https://goo.gle/2Z0E6kF CSS Scoping M.L.1→https://goo.gle/3hXj9jt Part & theme explainer→https://goo

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: flex gap and internationalization → https://goo.gle/3gIuB1w

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

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

Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories & strategies for color on the web in 2020. Spec CSS color level-4 → https://goo.gle/3cFCaDr Draft Spec CSS color level-5 → https://goo.gle/3cL4CUF How Color Gamut & Display Tech 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.g

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