Property names that are prefixed with -- are custom properties

They contain a value that can be used in other declarations using the var() function.

• The above are the the custom properties for this part of the slide deck.
• Update the colors above to change the slide deck.

Custom properties are scoped to the element(s) they are declared on, and participate in the cascade. The main.css file has global colors.

The five custom properties on the previous slide, --font, --dark_bg, --colorpop, and --lightsplash have been overwritten for this deck, thanks to "the cascade"

Custom properties are scoped to the elements they are declared on. What happen if we scope more locally and change the values of some properties?

Change the figure to header and change some values

Remove a line. If no value is set for a custom property on a given element, the value of its parent is used.

Custom properties containing values are used in declarations using the var() function. Note property names are case sensitive

The var() function can be used as a value in other functions

Internationalization

:root:lang(en-us) {--wedding: #FFFFFF;}
:root:lang(hi-in) {--wedding: #CC0000;}

So you don't get bored staring at the same deck all day:

:root { --splashcolor: #880088;
        --dark_bg: #666666; }

OOoops, you thought you declared a custom property, but you didn't. No worries. Include fall backs.

1. color will be red because colorpop was misspelled.

   color: var(--colorpoop, red);

2. background-color will be green because custom property names are case sensitive

   background-color: var(--colorpoop, var(--splashColor, green));

3. text-decoration-color will be blue because '--colorpop, --splashcolor' is not a valid custom property name.

   text-decoration-color: var(--colorpop, --splashcolor, blue);

Paragraph will be blue

body { color: red; } 
p { color: blue; } 
p { color: 16px; }

Syntax errors are ignored.

Paragraph will be red

:root {--size: 16px;}
body { color: red; } 
p { color: blue; } 
p { color: var(--size); }

Paragraph will be red

:root {--size: 16px;}
body { color: red; } 
p { color: blue; } 
p { color: var(--pooperscooper); }

When the browser encounters an invalid var() substitution, the initial or inherited value of the property is used.

If a variable substitution doesn’t make any sense, the browser:

1. Checks if the property color is inheritable.
2. If not, it sets the value to its default initial value.

While a syntax error in a CSS property / value pair will lead to the line being ignored, using a cascaded value, invalid substitution -- using a custom property value that is invalid -- is not ignored.

Variable references are resolved after applying the cascade, so a valid declaration may have been eliminated in favor of a variable reference without checking validity of that reference.

you can get the value just like you would any property value

// get a variable
let heading = document.querySelector('.current header h1');

let headingColor = 
   getComputedStyle( heading ).getPropertyValue( "--colorpop" );

Can be used to pass information to JavaScript

--forJS: if(count > 15) this.width = 100;

You can also use .style to read or write on an inline style, but since inline styles are not what I recommend, 😝

To perform calculations anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> value is allowed.

property: calc(expression)

Example:

height: calc(90vh - 100px);

Use standard math:

 calc( 6 * 2 / 3 - 4 + 5);

Use parenthese to make it less confusing

 calc( 6 * (2 / 3 ) - (4 + 5));

• Operands can be any <length> syntax value, with or without units.
• Mixing different units is AOK
• Nesting a calc() in a calc() is also AOK
• calc() inside a custom property is, you guessed it, AOK.
• Use parentheses to establish computation order & for code legibility.
• Surround operands with whitespace. Is "-" a minus or a negative number?
• Don't divide by zero or a non-number
• % for width and heights on some elements may be auto, so may lead to odd results

:root {
  --widthA: calc(100% - 80px);
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
}

Can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

min() - only works in Safari

Sets the smallest (most negative) value from a list of comma-separated expressions.

max() - only works in Safari

Sets the largest (most positive) value from a list of comma-separated expressions.

clamp() - doesn't work anywhere

Clamps a value between an upper and lower bound: a middle value within a range of values between a defined minimum and maximum

font-size: max(4vw, 2em, 2rem);

max-height: min(40vh, 300px);

clamp( <minimum value>, <preferred value>, <maximum value>)

Those three values can be calculations, min() functions and max() functions as well

clamp(MIN, VAL, MAX)

max(MIN, min(VAL, MAX))

Examples:

font-size: clamp(1rem, 4vw, 3rem);
font-size: 
  clamp(var(--smallFont), var(--userPref), var(--largeFont));

Trigonometric and exponential values

sin() 
cos()
tan()
asin()
acos()
atan()
atan2()
pow()
sqrt() 
hypot()

Responsive font equation

font-size: 
  calc( var(--min_font) + 
  (var(--max_font) - var(--min_font)) * ( (100vw - var(--min_width)) / 
  ( var(--max_width) - var(--min_width)) ));

• CSS Variables Module Level 1
• CSS Text Decoration Module Level 3
• CSS Fonts Module Level 3
• CSS Text Module Level 4
• CSS Text Module Level 3
• CSS Level 1