Dynamic CSS with Custom Properties (aka CSS Variables)

3 hours, 54 minutes CC
Dynamic CSS with Custom Properties (aka CSS Variables)

Course Description

Modern browsers ship with CSS Custom Properties, also known as “CSS variables”, a superpower that enables us to create reusable components without any JavaScript dependencies needed – using only vanilla CSS! Learn how to leverage Custom Properties to improve code reuse, maintainability, and downright enable possibilities that previously required large amounts of hard-to-maintain JavaScript and violated the separation of concerns. See practical examples of why CSS Custom Properties are a revolution in the way we write CSS!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: November 9, 2021

Learning Paths

Topics

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 11 minutes
  • Introduction
    Lea Verou introduces the course by providing some personal background, course prerequisites, an overview of material to be covered, course resources, and materials needed.
  • CSS Variables Overview
    Lea discusses the syntax of variables in Sass and Less, why variables are defined in :root, and what CSS variables cannot do compared to valid Sass code. A walkthrough of a typical course code example and a brief discussion of lexical compared to dynamic scoping is also provided in this segment.

Inheritance & Fallbacks

Section Duration: 46 minutes
  • Inheritance
    Lea discusses the inheritance of CSS variables, overriding variables with media queries, canvas, canvastext, and the relationship between inheritance and lexical scope. How to disable variable inheritance by setting the property to initial and a brief demonstration of @property are also covered in this segment.
  • Creating Style Hooks
    Lea demonstrates editing components of a website that allows users to apply custom properties. A walkthrough of how to use styling hooks to quickly style pseudo elements while hiding large sections of CSS is also provided.
  • Fallbacks
    Lea demonstrates using fallbacks to avoid having to override properties with a selector of the same specificity, briefly demonstrates using @property instead of a fallback, and how to select the fallback value. What happens when there is no support for CSS variables, using @supports to provide more elaborate fallback styling, and how to detect @property using JavaScript are also covered in this segment.
  • Fallbacks Exercise
    Students are instructed to create seperate properties that set the horizontal and vertical cut out size or the --corner-size property that sets the entire corner for a 45 degree cut out.
  • Fallbacks Solution
    Lea walks through the solution to the fallbacks exercise. A brief discussion regarding dynamic fallbacks and default values is also covered in this segment.
  • DRY Fallback Strategies
    Lea walks through a demo of custom properties allowing for the creation of multiple component variations and fallback strategies including fallback in a variable, pseudo-private properties, and fallbacks using @property. Student questions regarding what happens if the property syntax is defined as color but is set as a different variable and if it's practical to store gradient background color stops and variables along with the gradient direction are also answered in this segment.

Invalid Values & Custom Properties Practice

Section Duration: 50 minutes

Toggles, Responsive Design and Colors

Section Duration: 48 minutes
  • Space Toggles
    Lea discusses using space toggles to turn parts of a value on and off, using whitespace as a fallback, and defining aliases to improve code readability. Whitespace allows for the ability to turn off multiple different parts of custom properties at once.
  • Responsive Design with Custom Properties
    Lea demonstrates using custom properties to simplify responsive design with three different strategies. These reduce the amount of overrides needed, making the code more maintainable.
  • Colors
    Lea discusses using custom properties in regard to color including creating hue based aliases, color variations with custom properties, and using clamp() to ensure readability of the resulting brightness. Storing multiple color components in the same variable and storing multiple variations in the same component is also covered in this segment.
  • Colors Exercise
    Students are instructed to modify the CSS so that the stronger migraines are more red and lighter ones are more yellow. Migraines without an intensity should be set to blue.
  • Colors Solution
    Lea walks through the solution to the colors exercise.
  • Color: Present and Future
    Lea provides a brief summary of the color section so far and discusses the possible future of custom properties and colors including custom properties to store color and functions that manipulation colors. A brief discussion on the color-mix function is also covered in this segment.
  • Transitions & Animations
    Lea demonstrates using a custom cubic-bezier function to add a bounce animation to an image, CSS variables in @keyframes, animating gradients, and how to blur on hover with backdrop-filter. Without using @property to register them, custom properties can trigger transitions but do not interpolate by default.

Numbers, Strings, and Images

Section Duration: 45 minutes
  • Numbers, Lengths, & Variable Values
    Lea provides an example of what happens when trying to abstract dimensions into a variable, discusses that variable values cannot contain parts of tokens, and what are considered tokens. Valid and invalid syntax examples, how to create single property mixins, and a recommended practice when using variable values are also provided in this segment.
  • Number Toggles
    Lea demonstrates toggling between numerical values using 0/1 toggles which act like boolean values encoded into CSS. Using the newly implemented number toggles with media queries to set the webpage to dark mode is demonstrated in this segment.
  • Range Mapping
    Lea demonstrates that the same formula as the previously discussed number toggles work for entire 0 - 1 ranges, as it's actually the linear interpolation formula.
  • Numeric Range Exercise
    Students are instructed to create a variable that controls both the position of the radial gradient and position of the text shadow.
  • Numeric Range Solution
    Lea walks through the solution to the numeric range exercise and then adds a keyframes animation which utilizes the newly created custom property.
  • General Linear Range Mapping
    Lea discusses a more generalized formula for range mapping, revisits the migraine log with the new generalized formula, and provides the Codepen that inspired the spotlight example. Range mapping allows for one variable to control multiple things.
  • Strings & Numbers in Strings
    Lea discusses some of the caveats with strings in relation to custom properties, how to display a number through the generated content, and how to convert numbers to integers. Only integers can be converted to strings via counter-reset which in turn will allow them to be accepted by content.
  • Images
    Lea walks through the process of trying to make custom properties to control which images are shown, a CSS limitation and bug, and how relative URLs resolve. Student questions regarding if preprocessors could help with the CSS bug and if there is a way to set the URL as part of the HTML are also covered in this segment. Currently the is no available way to concatenate strings into a URL in CSS.

JavaScript

Section Duration: 29 minutes

Wrapping Up

Section Duration: 1 minute
Thank you very much for the course, Lea Verou, it has been very interesting and enjoyable, it's surprising how many things we can do with CSS Variables if we know how to use them.
Carlos Espada

Carlos Espada

_carlosespada

I just completed "Dynamic CSS with Custom Properties (aka CSS Variables)" by Lea Verou on Frontend Masters! Mind-blowing! Sometimes you find new knowledge that really expands your mind for the good... that's the case.
Carlos

Carlos

CarlosMarmare

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now