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.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 → h...
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 B...
In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you’ll be savvy with color stops, transition hints, and all the ways to interpolate color in your design. Links: Spec Level 3 → https://goo.gle/3h8cRN7 Spec Draft Level 4 → https://goo.gle/3iPmDUE Lea’s Pattern Gallery → https://goo.gle/3j4XEwX Lea’s Cicada Principle Article → https://goo.gle/2FyeWnr...
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://go...
::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 Modu...
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:/...
In this episode we flex our flexbox knowledge and dive deep into CSS layout using the flexible box model. We talk about content axis’, flex flow, wrapping, order, justification, alignment, and more! Links Flexbox Spec - https://www.w3.org/TR/css-flexbox-1/ Flow-flow with writing mode - https://codepen.io/argyleink/pen/mdeedye Grid to Flex: https://gridtoflex.com...
In this episode we provide an overview and slight history of laying things out on the web, starting from blocks and framesets, ending with Grid and Houdini. Links A History of CSS through 15 years of 24 ways → https://goo.gle/3fnrBXI Holy Grail Layout → https://goo.gle/2ynld2l Complete Guide to Flexbox → https://goo.gle/2A2Wtg9 Grid Guide → https://goo.gle/2SEldBM...
We’re sizing up sizing in CSS in this episode as we break down all the different lengths and measurements in CSS. CSS makes using these things seamless, it’s great, but let’s study some of the intricacies here; how it works and what that means for your day to day usage. Links CSS Spec Values and Units Level 4 → https://goo.gle/2KKdttw Sizing and Units on MDC → https://goo.gle/2VMkros Speech Module → https://goo.gle/2YbLISJ All About Ems → https://goo.gle/3bMViiV...
Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories and strategies for color on the web in 2020. Links: Spec CSS color level-4 → https://goo.gle/3cFCaDr Draft Spec CSS color level-5 → https://goo.gle/3cL4CUF How Color Gamut & Display Technology Can Affect Your Content → https://goo.gle/3eIH5p3 WICG Contrast Ratio → https://goo.gle/2XWxZyZ Lea Verou LCH color picker→ https://goo.gle/2VvVopn Webkit Working on Color Level 4 → https://go...
In this part 1 episode, we dive deep into using CSS color. We discuss ways to write and code colors, places they can go, functions you can use on them, and then we top it off with a hex color challenge. As always, you’ll learn new jargon, pick up a trick or two, and learn something new. #C55 is #ace not #5ad Links The Evolution of Color - Chris Lilley Read color hex codes - Dave DeSandro CSS color level 3 “flavor” system color Web Almanac 2019: CSS Chapter -- https://almanac.httparchive.org/en/2...
Inheritance and its effects in CSS are found all over your styles, almost invisibly, until further investigation through devtools or docs. In today’s episode, we illuminate the aspects of inheritance, how they’re useful, things to watch out for, and of course tips, tricks and vocabulary. Links Spec: css-cascade-3 → https://goo.gle/39KZPR6 List of inherits or not → https://goo.gle/2wn0yKF...
The “C” in CSS stands for the cascade! And that’s what today’s show is all about. Learn how the styles you write are affected by other styles, and how it all boils down to what the user sees. 4 Phases Of The Cascade: › Position › Specificity › Origin › Importance Links MDN on the Cascade and Inheritance → https://goo.gle/39jAEES CSS Cascade Interactive Article → https://goo.gle/2UhqIHV Una’s Doodle → https://goo.gle/2QKTy13...
In this episode we talk about how the browser resolves multiple selectors targeting the same subjects and how it determines which style to actually apply. Turns out, lots of code from many different locations is trying to style your elements, learning about specificity will help you debug and understand why or why not certain styles are winning over others. Links Diagram by Estelle Weyl → http://specifishity.com Specificity Calculator → https://specificity.keegan.st...
Get ready to learn some new CSS vocabulary! In this episode we talk about selectors, a syntax used to find elements (subjects) in a tree. CSS uses selectors to bind styles to subjects, and it’s quite powerful. We go over universal selectors, type selectors, class selectors, ID selectors, attribute selectors, pseudo selectors, complex and compound selectors, and various combinators. A lot of things! Links CSS selectors level 3 → https://goo.gle/39MHdRp CSS - Tricks: How Selectors Work → https://g...
