CSS Custom Properties (variables) Joan Boone jpboone@email.unc.edu - PowerPoint PPT Presentation

INLS 572 Web Development CSS Custom Properties (variables) Joan Boone jpboone@email.unc.edu Slide 1

When CSS Custom Properties can be useful Purple, gold, red, dark teal, and green are used throughout the Weaver Street Market website • Large websites often have lengthy style sheets with many duplicate values • For example, the color scheme may reuse three or four colors throughout the site • Changing this data can be difficult and error- prone since it is scattered throughout the style sheet(s). Slide 2

CSS Custom Properties (or variables) CSS variables can be used to define a specific value that can then be reused throughout your web page Syntax Define a variable: :root {--heading-color: sienna;} • Use the variable: h2 {color: var(--heading-color);} • References  w3schools: CSS Variables  MDN: Using CSS custom properties (variables)  W3C: CSS Custom Properties (Candidate Recommendation, 2015)  W3C: CSS Custom Properties (Editor's Draft, 2020)  Caniuse: Browser support for CSS Variables NOTE: CSS Variables are not well-supported by CSS Validation Service Slide 3

Using CSS Custom Properties Define variables :root { --main-bg-color: #75cdcb; --heading-color: gold; --text-color: #22474f; } Use the variables Click here to view background-color: var(--main-bg-color); in CodePen color: var(--heading-color); color: var(--text-color); nc-national-parks-CSS-variables.html Slide 4

CSS Custom Properties: Use Cases • CSS Variables explained with 5 examples • CSS-Tricks: Patterns for Practical CSS Custom Properties Use • Website theme switching...  Smashing: How to Configure Application Color Schemes With CSS Custom Properties  How to create better themes with CSS variables  CSS Only Theme Switcher Slide 5