The CSS Podcast

In this episode we talk about CSS @rules and all the different customizations you can make to fonts, encoding, animations, Houdini, and more.  LinksAt-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 🤓 LinksCSS Lists and Counters Module → http://goo.gle/2LlRhtS Custom bullets with CSS → http://goo.gle/3rol0BL CSS Lists, Markers, And Counters→ http://goo.gle/3cHa5yPCSS 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.gle/3gspEdI Masonry Layout Example by @iamvdo → https://goo.gle/37pRint

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

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.gle/3eyFimW

In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast.

Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page. Links: mix-blend-mode → https://goo.gle/3m5L9mP  Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX 

In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. From recreating Instagram filter effects, to blurring background for better legibility, we dive deep into what CSS and filters can do. Links: Filter Effects Module Level 1 → https://goo.gle/34SPJ1D  Backdrop Filter → https://goo.gle/3hJTMRz  CSSGram → https://goo.gle/2EPDOad  Custom & Instagram photo filters → https://goo.gle/31PhaYi  Contrast Swap technique → https://goo.gle/2G9LpRh  feColorMatrix → https://goo.gle/34UKw9u  Shaders → https://goo.gle/32PJ2uR 

In this episode, we’re talking about CSS animations. With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes.  Links: Animations Level 1 Spec → https://goo.gle/2DhV0V2  Easing Level 1 Spec → https://goo.gle/3kWoWap  Scroll-Linked Animations Draft Spec → https://goo.gle/39VQV4N  Cubic-Bezier Tool → https://goo.gle/2Q5xj5i  Debugging Animations → https://goo.gle/3ayI2yD  Rainbow Button → https://goo.gle/3214e0t  Complete Easing Functions → https://goo.gle/3gaaiJ4