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

Value Resolution & Custom Properties

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

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;

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); }

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

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

Media Queries

Variations on a Default

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
">

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

Custom Cascades

Defined Properties

For Changing State/Type

Open Arguments

For Inheriting Context

Custom Longhand

CSS Functions & Mixins

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!

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

Component Arguments

Data Visualizations

Check For A11y

When manipulating data tables

JavaScript Interactions 

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
      )
    )
  );
}

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