The CSS Podcast

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

In this episode we talk about CSS @rules and all the different customizations you can make to fonts, encoding, animations, Houdini, and more.  Links At-rules → http://goo.gle/3uvvRwb CSS Conditional Rules Module → http://goo.gle/37Bgf02 @property → https://goo.gle/3upuMpB Media Queries → https://goo.gle/2Nl2VGp CSS Fonts → http://goo.gle/3dB2uSU The CSS Podcast #CSSpodcast

In this Season 2 kickoff episode we talk about lists; their bullets/markers, styleability and overall featureset. List-en closely 🤓 Links CSS Lists and Counters Module → http://goo.gle/2LlRhtS Custom bullets with CSS → http://goo.gle/3rol0BL CSS Lists, Markers, And Counters→ http://goo.gle/3cHa5yP CSS Counter Grid → https://goo.gle/3awKJkp The CSS Podcast #CSSpodcast

In this episode, we get a little more experimental as we continue the Houdini series and discuss the Layout Worklet, also sometimes referred to as the Houdini Layout API. The Layout API enables developers to write their own layout algorithms. For more about Houdini worklets, check out our last episode on the Paint Worklet for an overview → https://goo.gle/3mG6BPc Links The Layout API → https://goo...

In this episode, we continue the Houdini series and enter worklet land! We go over the Paint Worklet, an API that enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. Links CSS Paint API → https://goo.gle/39bWvBV MDN Docs on CSS Painting API → https://goo.gle/3m3e1M1 Worklet Reference → https://goo.gle/3980Equ

In this episode we go over the TypedOM, a new API for parsing, converting, creating and managing CSS. It's typed, as the name suggests, and these typings not only help developers find bugs, they can make properties animateable natively in the engine.  Links MDN Typed OM Reference → https://goo.gle/3n2FrC9 Spec → https://goo.gle/32fq94O caniuse attributeStyleMap →  https://goo.gle/3leR0Fu caniuse c...

In this episode we introduce Houdini! We start by talking about our hooks into the layout engine and CSS parser, so we can connect our custom functionality with some CSS authored by a designer or developer. These hooks are called Houdini Properties & Values. Links Properties and Values Spec → https://goo.gle/2HZ6Aad Value Definitions Spec → https://goo.gle/2HZCCTy Houdini @property → https://goo.g...