DiscoverThe CSS Podcast
The CSS Podcast
Claim Ownership

The CSS Podcast

Author: Google

Subscribed: 320Played: 3,761
Share

Description

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.
31 Episodes
Reverse
031: @rules

031: @rules

2021-02-2320:50

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/3uvvRwbCSS 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
030: Lists

030: Lists

2021-02-1616:26

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
025: Season 1 Wrap Up

025: Season 1 Wrap Up

2020-09-1652:58

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.
024: Blend Modes

024: Blend Modes

2020-09-0918:001

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 
023: Filters

023: Filters

2020-09-0226:20

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 
022: Animation

022: Animation

2020-08-2638:49

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 
021: Gradients

021: Gradients

2020-08-1930:38

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 
020: Functions

020: Functions

2020-08-1239:59

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 
018: Focus

018: Focus

2020-07-3018:54

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 
017: Shadows

017: Shadows

2020-07-2221:34

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 
016: Borders

016: Borders

2020-07-1524:46

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 
015: Pseudo Selectors

015: Pseudo Selectors

2020-07-0136:46

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://goo.gle/2VslHMA  Una’s Pure CSS Whackamole → https://goo.gle/2VxfhvX  Una’s Pure CSS Tick Tack Toe → https://goo.gle/2ZzTCob  Pure CSS Games Post → https://goo.gle/2VslTvi  Empty Demo with Custom Properties → https://goo.gle/31tUlJS  :blank naming → https://goo.gle/2Vukm81 
014: Pseudo Elements

014: Pseudo Elements

2020-06-2420:08

::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 Module Level 1 → https://goo.gle/3hXj9jt  Part and theme explainer → https://goo.gle/2YqsJn2 
013: Spacing

013: Spacing

2020-06-1724:151

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 
loading
Comments (8)

Егор Жигулин

мужик - ебаный полупидор. интонирует, как шлюха на выгуле.

Sep 15th
Reply

Mostafa A.

Great job, guys. I really enjoy the podcast and appreciate your hard work. keep 'em coming 💙

Sep 4th
Reply

sky

great episode guys , but it would be nice if maybe you could clarify a little more about the key topics (I e origin , specificity etc etc .) , I only understood what all the key topics were at the end lol.

Apr 3rd
Reply

Denys Tsybka

Hi! I am really enjoying the podcast and want to thank you personally for the amazing work you are doing. Also I want to ask you to make a podcast about sizing one day. All these, px, em, rem, etc and what is the best way to use them. I am learning web development myself and it is so far very confusing to me. Thank you so much!!! Sincerely,  Denys

Apr 1st
Reply

sky

great podcast guys , loving the enthusiasm lol , keep it up.

Mar 18th
Reply

Denys Tsybka

Easy to listen and understand! I would like to suggest that you use analogies every time, when explaining something. It makes it much easier to visualize for those, who don't have access to computer or internet at the moment. Thank you very much for the job you are doing!!!

Mar 17th
Reply

Ross Savill

Really cool and easy to understand podcast, subscribed!

Mar 14th
Reply

Amir Naziri

This is Awesome. Keep it up! ✌️

Mar 14th
Reply
Download from Google Play
Download from App Store