Value Resolution & Custom Properties

slides.oddbird.net/workshops/23-smashing-de/2-values/

Miriam Suzanne @ Smashing Conf Freiburg

September 6, 2023

I heard You Like Variables

In CSS

Sass
Less
PostCSS
CSS-in-JS…

Take Common Values

Global Design Tokens

brand colors, sizes, fonts, etc…

`hsl(322, 92%, 24%)`

Provide Meaningful Names

`$``deep-raspberry`

`$``best-color`

`$``action`

`$``link`
`$``button`

// origin
$best-color: hsl(322, 92%, 24%);

// meaning
$action: $best-color;

// usage
$link: $action;
$button: $action;

Don’t Do Anything

Until we apply them

button {
  background-color: $button;
}

😎 cooool

2014… CSS Variables

Data on support for the css-variables feature across the major browsers from caniuse.com

`$name: value;`
`--``name:` `value``;`

`-``webkit``-property`
`-``moz``-property` `--property`

`--very``: few restrictions;`

See the Pen Page construction in CJSS by @miriamsuzanne on CodePen.

Define On Elements

// global
$best-color: hsl(322, 92%, 24%);
$action: $best-color;
$button: $action;

html {
  --best-color: hsl(322, 92%, 24%);
  --action: var(--best-color);
  --button: var(--action);
}

`:root` Selector?

Only the rootest root

:root {
  --brand-color: hsl(330, 100%, 45%);
  --action: var(--brand-color);
}

Any Document Root

Like <svg> or <xml> or <html>

Inherit By Default

Apply On Any Descendants

`var(` `--property` `)`

button { color: var(--button); }

Keep Sass/CSS Global Values NSYNC

$best-color: hsl(329.8 67.7% 57.5%);

html {
  --action: #{$best-color};
}

$colors: (
  'brand-blue': hsl(195, 52%, 31%),
  'brand-orange': hsl(24, 100%, 62%),
  'brand-pink': hsl(322, 92%, 24%),
);

html {
  @for $name, $value in $colors {
    --#{$name}: #{$value};
  }
}

If you Only Use Global Values

Then You’re Missing Out

Preprocessor are… Compiled (Server-Side)

button {
  background-color: $action;
}

Preprocessor ✨ Magic ✨

button {
  background-color: hsl(322, 92%, 24%);
}

Sass Variables are Static at Compilation

That’s a Huge Limitation

CSS is… Responsive (Client-Side)

Responds to Devices

Responds to Browsers

Responds to User Preferences

Responds to Interactions

Responds to HTML Context

CSS Variables Are Responsive

CSS Variables Are Always Dynamic

CSS Variables Need a New Mental Model

"CSS Custom Properties…

…for Cascading Variables Module Level 1"

Cascade Like Properties

Inherit Like (some) Properties

Custom Properties

Properties that we define

The Cascade Filters Targeted Values

when there are conflicts

p { color: black; }
p.error { color: red; }

Change values Based on State, Class, &c

Then Inheritance Fills in Missing Values

based on nearest target ancestor

html { color: green; }
p { /* color inherits */ }

Change values Based on DOM Context

Custom properties Capture a Value

Somewhere in the cascade

html { --action: red; }
main { --action: green; }
aside { --action: blue; }

And then… That Value Inherits

Through the DOM

button { background: var(--action); }

See the Pen Custom Properties Demo: Buttons by @miriamsuzanne on CodePen.

Reduce Nesting

button {
  background: blue
}

.my-context button {
  background: rebeccapurple;
}

button {
  background: var(--btn-color, blue);
}

.my-context {
  --btn-color: red;
}

Inheritance Rewards Proximity

Like “scoped styles”

Reset Inheritance With Explicit Selectors

Declare Locally

[data-button='go'] {
  --btn-color: green;
}

Declare Universally

* {
  --grid-area: main;
}

Combine Both

[data-grid] > * {
  --grid-area: main;
}

Define Nowhere

like JS `Undefined` Initial Guaranteed Invalid

`var(` `--undefined` `, fallback)`

button {
  background: var(--btn-color, teal);
}

`var( --undefined,` `fallback` `)`

Allows List Values

var(--my-font, Baskerville, Georgia, serif)

Nested Fallbacks

button {
  background: var(--btn-color, var(--action, teal));
}

Font Stacks

font-family: Consolas, Menlo, 'Courier New', monospace;

Warning Not for Legacy Support

❌ Browser Fallbacks

button {
  background: teal; /* old browser */
  /* empty variables */
  background: var(--btn-color, var(--action, teal));
}

Browser Fallbacks

html { background: red; }

@supports (--css: variables) {
  html { background: green; }
}

CSS Variables Manage Dynamic Changes

User Preferences

See the Pen Custom Property Light/Dark by @miriamsuzanne on CodePen.

Attribute Patterns

[attr] ➡ Presence (even if empty)
[attr="..."] ➡ Exact match
[attr*="..."] ➡ Any match
[attr~="..."] ➡ Space-delimited (like classes)
[attr|="..."] ➡ Hyphen-delimited
[attr^="..."] ➡ Starts with…
[attr$="..."] ➡ Ends with…
[attr="..." i|s] ➡ Case sensativity

See the Pen Custom Property Themes by @miriamsuzanne on CodePen.

Media Queries

See the Pen Variables & Media Queries by @miriamsuzanne on CodePen.

Variations on a Default

See the Pen Variables Grid Areas by @miriamsuzanne on CodePen.

Safe Inline Styles

Dynamic Layouts

cssSusy

🙅🏻‍♀️ Please don’t use this 🙅🏻‍♀️

Client Day Planner

Screenshot of schedule grid

Define the Day

<main style="
  --day-start: 9,
  --day-end: 18
">

Define the Events

<section style="
  --event-start: 13,
  --event-end: 14
">

See the Pen Dynamic CSS Layouts by @miriamsuzanne on CodePen.

Color Schemes

Individual Color Channels

html {
  --h: 330;
  --s: 100%;
  --l: 34%;
  --color: hsl(var(--h), var(--s), var(--l));
}

Hue is Radial

* {
  --complement: calc(var(--h) - 180);
  background: hsl(var(--complement), var(--s), var(--l));
}

Lightness is “Clamped”

* {
  --threshold: 55;
  --contrast: calc((var(--l) - var(--threshold)) * -100%);
  color: hsl(var(--h), var(--s), var(--contrast));
}

Interaction States

See the Pen Layering State & Type by @miriamsuzanne on CodePen.

Custom Cascades

Defined Properties

For Changing State/Type

Open Arguments

For Inheriting Context

Custom Longhand

See the Pen Custom **Longhand** by @miriamsuzanne on CodePen.

CSS Functions & Mixins

See the Pen Variables » Functions » Mixins by @miriamsuzanne on CodePen.

Custom properties Resolve Before Inheriting

CSS Value Resolution

css-cascade-5

color: hotpink;
color: oklch(0.45 0.20 352);
color: not-real;

Parse Time

color: hotpink;
color: oklch(0.45 0.20 352);
~~color: not-real;~~

Declared Values

h1, h2, h3 {
  color: aqua;
}

#page-title {
  color: currentColor;
}

Cascaded Value

#page-title {
  color: currentColor;
}

If no cascaded value Defaulting

Specified Value

Cascaded or Defaulted

color: currentColor; - cascaded
display: block - cascaded (from UA)
font-family - inherited (from parent)
background-color: transparent - initial (from spec)

Global keywords…

inherit, initial, unset, revert, revert-layer

Inherit

Use value from parent

Initial

Use specified value

Unset

Use defaulted value (inherit or initial)

Revert

Use previous origin value (e.g. UA defaults)

Revert-Layer

Use previous layer value (including origins as layers)

Global keywords… Resolve on Custom Properties

html {
  --color: green;
  --color: initial;
  background: initial;
  background: var(--color, red); /* ??? */
}

Computed Value

Relative values and variables are replaced

color: currentColor » rgb(0, 0, 0)
padding: 2em » ( * 2) » 48px (for example)

In most cases… Computed Values Inherit

Global keywords are an exception

`currentColor` Inherits as Keyword

It should re-calculate when the color changes!

See the Pen currentColor in SVG fill by @miriamsuzanne on CodePen.

Used Value

Final resolutions, based on layout etc

width: 80% » 1223px (for example)
color-scheme: dark light » dark (for example)
flex: 1 » (nothing on non-flex items)

Actual Value

What is displayed on the screen

font-size: 14.2px » 14px

Custom properties… Inherit Computed Values

Custom properties… Invalid At Computed Value Time

See the Pen Invalid, Unsupported, or Undefined by @miriamsuzanne on CodePen.

See the Pen CSS gradient-art decorations by @miriamsuzanne on CodePen.

See the Pen Angled Background CSS-Only Mixin by @miriamsuzanne on CodePen.

Component Arguments

See the Pen Media Object by @miriamsuzanne on CodePen.

Data Visualizations

See the Pen Bar Charts with Scale by @miriamsuzanne on CodePen.

Check For A11y

When manipulating data tables

JavaScript Interactions

See the Pen Custom Property Color Palettes by @miriamsuzanne on CodePen.

html {
  @media (prefers-color-scheme: dark) {
    --os-mode: -1;
  }

  @media (prefers-color-scheme: light) {
    --os-mode: 1;
  }
}

[data-colors='light'] {
  --html-mode: 1;
}

[data-colors='dark'] {
  --html-mode: -1;
}

[data-colors] {
  --mode: var(
    --html-mode, var(
      --user-mode, var(
        --os-mode, 1
      )
    )
  );
}

See the Pen Vue Invaders! by @miriamsuzanne on CodePen.

CSS Animation

Set Index Prop To Offset Delay

<div style="--index: {{ loop.index }};">

[style*='--index'] {
  animation-delay: calc(var(--index) * 50ms);
}

Create API For HTML Soft Patch

<div style="--ease: var(--in-out-back);">

[style*='--ease'] {
  --in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

<section
  class="sprite-demo"
  :style="{
    '--src': show.sprite.src,
    '--columns': show.sprite.columns,
    '--rows': show.sprite.rows,
}">...</section>

<div
  v-for="action in show.actions"
  :key="action.name"
  :data-action="action.name"
  :style="{
    '--row': action.row,
  }"
/>

cssSprites

Variable Issues… Unknown Value Types

Transition & Animate Target Properties

Not the variable itself…

button {
  --color: green;
  background: var(--color);
  transition: background 0.5s;

  &:hover {
    --color: red;
  }
}

Houdini Fix

Proposed CSS

@property --brand-color {
  syntax: "<color>";
  initialValue: "pink";
  inherits: true;
}

Can I use… @property?

Current JavaScript

CSS.registerProperty({
  name: "--brand-color",
  syntax: "<color>",
  initialValue: "pink",
  inherits: true,
});

Initial values Must be Absolute

When the syntax is not *

Variable Issues… Content Requires Quoted Values

div::after {
  --string: 'hello world';
  content: var(--string);
}

No Support in url() and @media

`var(--size)em` `calc( var(--size)` **`* 1em`** `)`

`@supports (` `--css: vars` `)`

Any valid definition will work…

Custom Properties Are Not Just Variables

(as we’ve known them)

Sass Variables… Development Shortcuts

Global Tokens
Reusable Mixins
Pre-Compiled Functions

Custom Properties Dynamic & Responsive Styling

Capture values Where Defined

Change values Based on State or Class

Inherit Values Based on Context

Contextual tokens
Dynamic Visualizations
Component Settings
User Interactions

For defining Systems & Components

See the Pen CSS Custom Properties Demo by @miriamsuzanne on CodePen.

I heard You Like Variables

I heard You Like Variables

Sass Less PostCSS CSS-in-JS…

Take Common Values

Global Design Tokens

hsl(322, 92%, 24%)

Provide Meaningful Names

$deep-raspberry

$best-color

$action

$link $button

Don’t Do Anything

😎 cooool

2014… CSS Variables

$name: value; --name: value;

-webkit-property -moz-property --property

--very: few restrictions;

Define On Elements

:root Selector?

Any Document Root

Inherit By Default

Apply On Any Descendants

var( --property )

Keep Sass/CSS Global Values NSYNC

If you Only Use Global Values

Then You’re Missing Out

Preprocessor are… Compiled (Server-Side)

Preprocessor ✨ Magic ✨

Sass Variables are Static at Compilation

That’s a Huge Limitation

CSS is… Responsive (Client-Side)

Responds to Devices

Responds to Browsers

Responds to User Preferences

Responds to Interactions

Responds to HTML Context

CSS Variables Are Responsive

CSS Variables Are Always Dynamic

CSS Variables Need a New Mental Model

"CSS Custom Properties…

Cascade Like Properties

Inherit Like (some) Properties

Custom Properties

The Cascade Filters Targeted Values

Change values Based on State, Class, &c

Then Inheritance Fills in Missing Values

Change values Based on DOM Context

Custom properties Capture a Value

And then… That Value Inherits

Reduce Nesting

Inheritance Rewards Proximity

Reset Inheritance With Explicit Selectors

Declare Locally

Declare Universally

Combine Both

Define Nowhere

like JS Undefined Initial Guaranteed Invalid

var( --undefined , fallback)

var( --undefined, fallback )

Allows List Values

Nested Fallbacks

Font Stacks

Warning Not for Legacy Support

❌ Browser Fallbacks

Browser Fallbacks

CSS Variables Manage Dynamic Changes

User Preferences

Attribute Patterns

Media Queries

Variations on a Default

Safe Inline Styles

Dynamic Layouts

cssSusy

Client Day Planner

Define the Day

Define the Events

Color Schemes

Individual Color Channels

Hue is Radial

Lightness is “Clamped”

Sass
Less
PostCSS
CSS-in-JS…

`hsl(322, 92%, 24%)`

`$``deep-raspberry`

`$``best-color`

`$``action`

`$``link`
`$``button`

`$name: value;`
`--``name:` `value``;`

`-``webkit``-property`
`-``moz``-property` `--property`

`--very``: few restrictions;`

`:root` Selector?

`var(` `--property` `)`

like JS `Undefined` Initial Guaranteed Invalid

`var(` `--undefined` `, fallback)`

`var( --undefined,` `fallback` `)`

`currentColor` Inherits as Keyword

`var(--size)em` `calc( var(--size)` **`* 1em`** `)`

`@supports (` `--css: vars` `)`