Dynamic CSS with Custom Properties (aka CSS Variables)
Topics:
Table of Contents
Introduction
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
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
Invalid Values & Computed Values
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.
@supports & Custom Properties
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.
Custom Properties Exercise
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.
Custom Properties Solution
Lea walks through the solution to the custom properties exercise.
Cycles & Overriding Properties
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.
Flexible Pie Chart Exercise
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).
Flexible Pie Chart Solution
Lea walks through the solution to the flexible pie chart exercise.
Custom Property with a Sass Loop
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
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
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
Javascript
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.
Dynamic Button Ripple Effect Exercise
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.
Dynamic Button Ripple Effect Solution
Lea walks through the solution to the dynamic button ripple effect exercise. A brief discussion on performance is also provided in this segment.
Dynamic Form Element Styling
Lea live codes a slider with dynamic styling by combining JavaScript and CSS.
Heading Typing Effect
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.
Dynamic Scrollbar
Lea demonstrates implementing a percentage based scroll variable in combination with a scroll event listener to create a scroll progress bar.
