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

Value Resolution & Custom Properties

Miriam Suzanne @ Smashing Conf Freiburg

I heard You Like Variables

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;
Physical patch bay with wires

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);
}
Krystal Campioni sprite animation
Sprite from Monster Slayer animation 
<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.