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

Slide 1

CSS Custom Properties (variables)

Joan Boone

jpboone@email.unc.edu

INLS 572

Web Development

Slide 2

When CSS Custom Properties can be useful

• Large websites often

have lengthy style sheets with many duplicate values

• For example, the color

scheme may reuse three

• r four colors throughout

the site

• Changing this data can

be difficult and error- prone since it is scattered throughout the style sheet(s).

Purple, gold, red, dark teal, and green are used throughout the Weaver Street Market website

Slide 3

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 4

Using CSS Custom Properties

nc-national-parks-CSS-variables.html

:root {

• -main-bg-color: #75cdcb;
• -heading-color: gold;
• -text-color: #22474f;

} background-color: var(--main-bg-color); color: var(--heading-color); color: var(--text-color);

Define variables Use the variables

Click here to view in CodePen

Slide 5

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