The CSS Podcast

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/30LiDhG Billion Laughs Attack → https://goo.gle/2XUxjtg

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

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

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 Codepen → https://goo.gle/2ZLUDL2 3D Text → https://goo.gle/2ZNO8ar

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 Fancy border radius generator → https://goo.gle/3fH3SBT

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 Styling → https://goo.gle/3gaXSRE :focus-visible explainer → https://goo.gle/2VslHMA Una's Pure CSS Whackamole → https://goo.gle/2VxfhvX Una's Pure CSS Tick Tack Toe → https://goo.gle/2ZzTCob Pure CSS Games Post → https://goo.gle/2VslTvi Empty Demo with Custom Properties → https://goo.gle/31tUlJS :blank naming → https://goo.gle/2Vukm81

::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 The ::cue pseudo-element → https://goo.gle/2Z0E6kF CSS Scoping Module Level 1 → https://goo.gle/3hXj9jt Part and theme explainer → https://goo.gle/2YqsJn2

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