Dynamic CSS with Custom Properties (aka CSS Variables)
Table of Contents
IntroductionLea 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 OverviewLea 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
InheritanceLea 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 HooksLea 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 ExerciseStudents 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 SolutionLea 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 StrategiesLea 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
Invalid Values & Computed ValuesLea 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.
@supports & Custom PropertiesLea 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.
Custom Properties ExerciseStudents are instructed to fill in the missing CSS to utilize the --p variables for the percentages and Introduce properties to further customize the chart.
Custom Properties SolutionLea walks through the solution to the custom properties exercise.
Cycles & Overriding PropertiesLea 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.
Flexible Pie Chart ExerciseLea 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).
Flexible Pie Chart SolutionLea walks through the solution to the flexible pie chart exercise.
Custom Property with a Sass LoopLea 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
Space TogglesLea 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 PropertiesLea demonstrates using custom properties to simplify responsive design with three different strategies. These reduce the amount of overrides needed, making the code more maintainable.
ColorsLea 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 ExerciseStudents 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 SolutionLea walks through the solution to the colors exercise.
Color: Present and FutureLea 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 & AnimationsLea 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
Numbers, Lengths, & Variable ValuesLea 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 TogglesLea 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 MappingLea 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 ExerciseStudents are instructed to create a variable that controls both the position of the radial gradient and position of the text shadow.
Numeric Range SolutionLea 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 MappingLea 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 StringsLea 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.
ImagesLea 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.
Dynamic Button Ripple Effect ExerciseStudents 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.
Dynamic Button Ripple Effect SolutionLea walks through the solution to the dynamic button ripple effect exercise. A brief discussion on performance is also provided in this segment.
Heading Typing EffectLea 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.
Dynamic ScrollbarLea demonstrates implementing a percentage based scroll variable in combination with a scroll event listener to create a scroll progress bar.