MIT
Dynamic CSS with Custom Properties (aka CSS Variables)
3 hours, 54 minutes
CC
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
CloseWhat They're Saying
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
_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
CarlosMarmare
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
Table of Contents
Introduction
Section Duration: 11 minutes
Lea Verou introduces the course by providing some personal background, course prerequisites, an overview of material to be covered, course resources, and materials needed.
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
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.
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.
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.
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.
Lea walks through the solution to the fallbacks exercise. A brief discussion regarding dynamic fallbacks and default values is also covered in this segment.
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
Lea demonstrates what happens when an invalid value is passed into a CSS variable, invalid at computed value time (IACVT), discusses parse time, computed values, and used values. The syntax of registered properties is checked at computed value time, not at parse time.
Lea walks through using @supports to specify LCH colors if the browser supports LCH and provide a fallback for browsers that don't. When parsing, the browser doesn't have the values of custom properties, it cannot know if after substitution, the resulting values will be valid and fallbacks will not be used.
Students are instructed to fill in the missing CSS to utilize the --p variables for the percentages and Introduce properties to further customize the chart.
Lea walks through the solution to the custom properties exercise.
Lea demonstrates introducing a cycle into CSS variables, discusses how browsers handle cycles, combining Sass and CSS variables, and walks through a possible solution to avoiding creating cycles. Cycles make all the variables involved in the cycle invalid at computed value time.
Lea provides a walk through of the layout of the pie chart exercise and demonstrates how a background with a conic-gradient is being used to define slices. Students are then instructed to make a reusable pie chart component, allowing the values and colors to be customized via --colorN and --valueN variables, with appropriate defaults so they don't all need to be set at once (if a color is not set, it should be hsl(N * 25 80% 50%)) where N is the index of the slice).
Lea walks through the solution to the flexible pie chart exercise.
Lea live codes implementing Sass loops to cut down on the code repetition in the pie chart example. A demonstration of using lists in Sass to generate a list of color stops is also covered in this segment.
Toggles, Responsive Design and Colors
Section Duration: 48 minutes
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.
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.
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.
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.
Lea walks through the solution to the colors exercise.
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.
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
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.
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.
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.
Students are instructed to create a variable that controls both the position of the radial gradient and position of the text shadow.
Lea walks through the solution to the numeric range exercise and then adds a keyframes animation which utilizes the newly created custom property.
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.
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.
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
Lea discusses how to set and read custom properties with JavaScript and walks through examples setting properties to communicate mouse location. How to get local pointer coordinates is also covered in this segment.
Students are instructed to use the provided code as a starting point to draw a "ripple effect" on the Hello button, similar to that of Material Design.
Lea walks through the solution to the dynamic button ripple effect exercise. A brief discussion on performance is also provided in this segment.
Lea live codes a slider with dynamic styling by combining JavaScript and CSS.
Lea walks through emulating typing using two keyframes animations and a dynamic content length and passing element content length. Since this typing effect has dynamic content length it can be applied to any heading needed without customizing inline styles.
Lea demonstrates implementing a percentage based scroll variable in combination with a scroll event listener to create a scroll progress bar.
Wrapping Up
Section Duration: 1 minute
Lea wraps up the course by answering a student's question regarding why CSS knows it's viewport values, but not its scroll position and providing some personal and social links.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops