: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 Blog → https://goo.gle/3CIs1EF Selectors → https://goo.gle/3EQsPde Pseudo-classes → https://goo.gle/3SgvH69 Creative CSS Layout → https://goo.gl...
Oct 18, 2022•23 min
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 MDN - https://goo.gle/3rK1Ybd Chrome Developers: Introducing Inert - https://goo.gle/3CLygZE Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday &...
Oct 11, 2022•8 min
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 + :has() → https://goo.gle/3ymiwJS MDN Docs → https://goo.gle/3ogyIrp Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicor...
Oct 06, 2022•16 min
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 MDN - https://goo.gle/3UjB6vL Smashing Magazine - https://goo.gle/3ByUT1u Una on YouTube - https://goo.gle/3Sm2zLc Bramus at CSS Day...
Sep 20, 2022•18 min
DevTools Mini Series continues, this time on interactions. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss interaction, and interaction inspection/ debugging in DevTools. Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG ; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 Jecely...
Dec 29, 2021•15 min•Season 3Ep. 28
DevTools Mini Series continues, this time on accessibility tooling. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss how DevTools can help you discover and fix accessibility issues. Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG ; VisBug maker; punk; CSS/JS/UX addict; �...
Dec 22, 2021•14 min•Season 3Ep. 27
DevTools Mini Series continues, this time on layout. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of how DevTools can help you create and debug layouts. Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG ; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Y...
Dec 15, 2021•17 min•Season 3Ep. 26
Welcome to the DevTools Mini Series for The CSS Podcast. On this episode, Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of color and shared tips. Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG ; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 Jecelyn Yeen Twit...
Dec 08, 2021•14 min•Season 3Ep. 25
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 E41 → Transforms E42 → Snap Points E43 → Containment E44 ...
Aug 03, 2021•36 min•Season 2Ep. 24
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 Pure CSS Games Collection → https://goo.gle/3l0wrQe Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS Dev...
Jul 27, 2021•27 min•Season 2Ep. 23
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 → https://goo.gle/3x0Uilb SVGOMG → https://goo.gle/3hS6ksJ SVG spec → https://goo.gle/3wVgRYe Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web ...
Jul 20, 2021•33 min•Season 2Ep. 22
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.gle/2TY80rz Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS De...
Jul 13, 2021•12 min•Season 2Ep. 21
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 CSS Speech Level 1 - https://goo.gle/3xrg3vc Media Queries Level 5 - https://goo.gle/3qUcBXz Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser ...
Jul 06, 2021•32 min•Season 2Ep. 20
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 - https://goo.gle/3dm4opF Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG ; V...
Jun 29, 2021•26 min•Season 2Ep. 19
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 MDN :is() → https://goo.gle/3qgU0Vf Forgiving selector parsing → https://goo.gle/3xLTYHL Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (...
Jun 22, 2021•33 min•Season 2Ep. 18
Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex. Links Module Level 1 → https://goo.gle/3wtADL1 82% of developers get this 3 line CSS quiz wrong → https://goo.gle/2U8oTPR A user’s guide to CSS variables → https://goo.gle/3zlmscV Locally Scoped CSS Variables: What, How, and Why...
Jun 15, 2021•27 min•Season 2Ep. 17
In this episode we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page. Links Scroll animations level 1 draft → https://goo.gle/3pvWX49 Polyfill → https://goo.gle/3x8CQvw GUI Challenges - Tabs → https://goo.gle/34YYl5J Bramus's talk → https://goo.gle/2TPs7HU Una Kravets (co-host) Twitter | Inst...
Jun 08, 2021•22 min•Season 2Ep. 16
In this episode it's all about transitions. What you can and can't transition, it's limits, and it's super powers. We'll finish up with ways to trigger transitions and a few tips and tricks. Links CSS Transitions https://goo.gle/3vIDi31 Cont. https://goo.gle/3pcpueY Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Adam Argyle (co-host) Twitter | Instagram | YouTube @Googl...
Jun 01, 2021•26 min•Season 2Ep. 15
The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them. Links MDN doc on containment → https://goo.gle/3fRejEd Content-visibility → https://goo.gle/3wBMB52 Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Ad...
May 26, 2021•15 min•Season 2Ep. 14
In this episode we're guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content. Links Scroll Snap Level 1 draft → https://goo.gle/2R9hUow overscroll-behavior → https://goo.gle/3o7vLYE scroll-behavior → https://goo.gle/3uKvkWU Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser �...
May 11, 2021•17 min•Season 2Ep. 13
In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all works. Links CSS Transforms Module Level 1 → https://goo.gle/2RsETdW CSS Transforms Module Level 2 → https://goo.gle/3tdGeCF Chaining transforms → https://goo.gle/3nKMKQp Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful...
May 04, 2021•30 min•Season 2Ep. 12
In this episode Una and Adam talk about font adjustments when being used within @font-face. When fonts are loaded, there's an opportunity to provide default values and fine tunings. Links @font-face on MDN → https://goo.gle/2S3DAmp CSS Fonts Level 4 → https://goo.gle/3sGwO2s The CSS Podcast #CSSpodcast
Apr 27, 2021•24 min•Season 2Ep. 11
Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes—from creating transition effects to creating interesting and organic typographic layouts. In this episode we dive in to how to wrangle shape effects in CSS. Shapes Level 1 → https://goo.gle/3gkJAkG Shapes Level 2 → https://goo.gle/3amJLIk Masking Level 1 → https://goo.gle/3nb6Bb5 Clippy tool → https://goo.gle/3sIM0w9 clip-path transitions → https://goo.gle/3tGx96I CSS Masking → https://goo.gle/3goEcNt The CSS Pod...
Apr 20, 2021•33 min•Season 2Ep. 10
Welcome back to The CSS Podcast, where we cover all things CSS from accessibility to c-index. Today, Una and Adam will discuss a micro syntax for pseudo class notification when working with nth-child. Selectors level 3 → https://goo.gle/3dWB48G Useful nth-child recipes → https://goo.gle/3e102DE Nth-child syntax → https://goo.gle/328nA4b Quantity queries → https://goo.gle/3a4NPwT Solved with CSS! Nth-tricks → https://goo.gle/3g65Wq0 The CSS Podcast #CSSpodcast...
Apr 13, 2021•16 min•Season 2Ep. 9
What do mouse pointers, potatoes, and your fingers have in common? They can all interact with a screen! With CSS we can define how active our web boxes are, which areas are interactive, and what style the cursor should be. Maybe that means your mouse arrow becomes an animated magic wand, or maybe not. Get ready for a fun episode, where things get a bit goofy. Links Pointer events → https://goo.gle/39HFYF8 A Mind-Bending Discovery → https://goo.gle/31Rm3iA The CSS Podcast #CSSpodcast...
Apr 06, 2021•17 min•Season 2Ep. 8
In this episode we cover typography on the web from your CSS. From font properties to word breaking. Also, Adam gets thrown off and amazed at how dynamic the text underline property is and revels in the difference between small caps and petite caps. Links MDN Text Fundamentals → https://goo.gle/2O4Fh13 Text Decoration 3 → https://goo.gle/3u7M2yK The CSS Podcast #CSSpodcast...
Mar 30, 2021•30 min•Season 2Ep. 7
In this episode we cover all the ways to style an element's background: using images, colors, gradients and more. Links CSS backgrounds-3 → http://goo.gle/2P0DGJE CSS Tricks on backgrounds → http://goo.gle/2ODPCRY The CSS Podcast #CSSpodcast
Mar 23, 2021•25 min•Season 2Ep. 6
In today's episode we cover overscroll and all the ways to handle content that's bursting at the seams. The web has a natural tendency to show overflowing content, so let's study our options when it comes to wrangling those pesky misbehavers. Links Text-overflow → http://goo.gle/38uDGbX CSS Overflow Module → http://goo.gle/2N7KsNg The CSS Podcast #CSSpodcast...
Mar 16, 2021•18 min•Season 2Ep. 5
In this episode we narrow our focus on user-preference-based media queries, which enable you to create personalized experiences based on your users custom settings and needs. Links Media Queries 5 → https://goo.gle/306lZea The CSS Podcast #CSSpodcast
Mar 11, 2021•16 min•Season 2Ep. 4
In this episode we talk about page media queries and all the ways you can pivot your styles based on device capabilities, viewport size, etc. Links Media Queries → http://goo.gle/2MhYfR2 Scripting → http://goo.gle/2Mdan5E The 'display-mode' media feature → http://goo.gle/2NoFr3c Prefers-* Security and Privacy → http://goo.gle/3kfwUM0 CSS Color Adjustment → http://goo.gle/3qLkduJ The CSS Podcast #CSSpodcast...
Mar 02, 2021•22 min•Season 3Ep. 2
