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.
Episodes
In this episode Una and Adam talk about CSS Nesting, per the current 2022 spec draft. They'll cover the syntax basics, some gotchas and of course a bunch of examples.
Links
Nesting 1 Spec - https://goo.gle/3VgnoJR
In this episode Una and Adam discuss subgrid, a special value for grid-template-rows or grid-template-columns. Learn the general details of usage, use cases, tips, tricks and gotchas, so you can use the feature with confidence.
Links
CSS Grid Spec - https://goo.gle/3EfjoDq
Media query range syntax is a really nice addition.
Links
- Polyfill: https://goo.gle/3TXcyYD
- New syntax for range media queries:
In this episode Una and Adam cover changes to the color level 5 and new color level 6 specs, so you can stay HD on the topic. Plus, a dive into CSS color functions for manipulating colors.
Links
CSS Color Module Level 5 → https://goo.gle/3f8BgpT
:has() is a new CSS selector which allows developers to query for the presence of a child or state. It has been called the “parent selector”, but it’s much more than that! Using :has() you can style up and down a DOM tree, making this an incredible powerful feature. Learn how to take advantage of this new API with lots of examples in this episode.
Links
In this episode Una and Adam explain a non-CSS property, but very relevant front-end UI property, called inert. It's a way to have a visually guarded part of the UI also be guarded for keyboard and screen reader users.
Links
Inert spec - https://goo.gle/3SXid0C
Container queries (also known as @container) are a new entrypoint for truly component-based responsive design. In this episode, Adam and Una will walk you through how to use them, what browser support looks like, and upcoming features that will give you even more control over your responsive interfaces!
Links
- CQ...
In this episode Una and Adam cover Cascade Layers (aka @layer). It's a way for authors to control and orchestrate their own CSS layering which can help avoid specificity and asynchronous loading issues. Instead of styles taking the most recent style based on order of appearance, orchestrate layers and place styles inside them to control which overrides which.
Links
We’ve reached the end of season 2 of the CSS Podcast. In this closing episode, we recap every episode by sharing our favorite tips and learnings from the last few months!
Episodes reminisced
E30 → Lists
E31 → @rules
E32 → Page Media Queries
E33 → Preference Media Queries
E34 → Overflow
E35 → Background
E36 → Text & Typography
E37 → Cursors & Pointers
E38 → N-Match Notation
E39 → Paths, Shapes, Clipping and Masking
E40 → @font-face
...
Count on The CSS Podcast to cover counters. Una and Adam teach all the ways to create, reset, and update counters. Use them for lists, games and more!
Links
Counters Level 3 → https://goo.gle/3f2BP18
CSS and SVG are very intertwined, and you can create a lot of unique effects by combining the two. This episode dives into a few CSS + SVG tips and tricks, including where and how to use SVG on your page, icon systems, color theming, adding animations, filter effects, and more!
Links
Solved with CSS: Colorizing SVG → htt...
This episode is about the very available CSS values inherit, initial, unset and revert. We'll help explain what they are, what they do and when to use them.
Links
CSS Tricks Article → https://goo.gle/2U5PxJw
Quirksmode Article → https://goo.g...
Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more!
Links
#lintHTMLwithCSS - https://goo.gle/3dSMIlU
Today we touch on touch interaction. Covering CSS's ability to change a user's touch experience with properties like touch-action, scroll-behavior, user-select and more.
Links
MDN - https://goo.gle/3y8My14
Spec - Read more
In this episode, Adam and Una explore some CSS syntactic sugar! They discuss the :is and :where functions, how they differ, and how they’re paving the way for nesting.
Links
Adam's post on web.dev → https://goo.gle/3qhYifl
Popular Podcasts
Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations.
If you can never get enough true crime... Congratulations, you’ve found your people.
If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks then look no further. Josh and Chuck have you covered.
It’s a lighthearted nightmare in here, weirdos! Morbid is a true crime, creepy history and all things spooky podcast hosted by an autopsy technician and a hairstylist. Join us for a heavy dose of research with a dash of comedy thrown in for flavor.
My name is Jay Shetty, and my purpose is to make wisdom go viral. I’m fortunate to have fascinating conversations with the most insightful people in the world, and on my podcast, I’m sharing those conversation with you. New episodes Mondays and Fridays. Listen anywhere you get your podcasts, and please rate and review the podcast if you enjoy it. Live life today ON PURPOSE.