Important

This slide deck was created for use in a controlled environment, during a talk. It works best with Chrome. It may or may not work properly in other browsers. The demos were live coded, so these slides are a bit pointless if you never watched the talk.

CSS (Variable) Secrets

By Lea Verou (@LeaVerou)

#funfact

I grew up in Lesbos, Greece

…which technically makes me geographically Lesbian

I make stuff

CSS WG Invited Expert

MIT HCI researcher @ CSAIL

★★★★★ on Amazon

CSS Variables

$color: #ff0066;

@color: #ff0066;

NOPE.

--color, --corner, inline style, fallback

CSS Variables work like
normal CSS properties

inheritance, cancel inheritance, inherit keyword

CSS Variables are
inherited properties
but you can change that

`--img: "cat1.jpg"; background: url("img/" var(--img));`	CSS limitation
`--img: "img/cat1.jpg"; background: url(var(--img));`	CSS bug
`--img: url("img/cat1.jpg"); background: var(--img);`	Works!

CSS variables + url() =

WTFs

--foo:; is invalid
--foo: ; is valid
--foo ≠ --FOO

No CSS variables support

No --accent-color set

--accent-color: yellowgreen

--accent-color: 42deg


				background: red;
				background: var(--accent-color, orange);

Invalid at computed-value time?!

Invalid at computed-value time = initial


				var(--color1, var(--color2, var(--color3, red)))

background: var(--nonexistent, none, yellowgreen);


					/* Equivalent to: */
					background: none, yellowgreen;

Cycles make variables invalid
at computed-value time


				--accent-color: 42deg;
				--accent-color: var(--accent-color);
				background: red;
				background: var(--accent-color, orange);

Won’t someone, please, think of browser support?!


CSS Variables	49	31	15	9.1


CSS Variables	49	31	15	9.1
@supports	28	22	13	9

Show division not working

Number → unit:	`calc(var(--foo) * 1px)`
Unit → number:

Use variables for pure data,
not CSS values

Try to animate --color | show that var() is ok

CSS Variables in @keyframes?

[CSS variables] can even be transitioned or animated, but since the UA has no way to interpret their contents, they always use the "flips at 50%" behavior that is used for any other pair of values that can’t be intelligently interpolated.

— CSS Custom Properties for Cascading Variables Module Level 1

CSS variables + animations =

🔮 Near Future 🔮


CSS.registerProperty()	⛳️

CSS variables + animations =🔮❤️

Common use Cases

Theming by class, by style, box-shadow transition | default default values

CSS Variables enable theming
independent of CSS structure

Default default values are possible


			--colorD: var(--color, black);
			/* use --colorD instead of --color internally */

CSS Variables make
responsive design easier

Cool use cases

CSS Variables enable you to
set multiple properties at once

CSS Variables let you create
single property mixins
(like function currying, in programmerese)

No inherit from box-shadow, invalid at computed value time

CSS Variables enable you to
create custom longhands

inline style too

CSS Variables enable you to
define your own properties
(in some cases)

CSS Variables & SVG

CSS variables + SVG =♥️

CSS Variables & JavaScript


			// Get variable from inline style
			element.style.getPropertyValue("--foo");


			// Get variable from wherever
			getComputedStyle(element).getPropertyValue("--foo");


			// Set variable on inline style
			element.style.setProperty("--foo", 38 + 4);


			var root = document.documentElement;

			document.addEventListener("mousemove", evt => {
				let x = evt.clientX / innerWidth;
				let y = evt.clientY / innerHeight;

				root.style.setProperty("--mouse-x", x);
				root.style.setProperty("--mouse-y", y);
			});

<html mv-app
      style="--mouse-x: [$mouse.x / innerWidth];
	          --mouse-y: [$mouse.y / innerHeight];">


			for (input of document.querySelectorAll("input")) {
				input.style.setProperty("--value", input.value);
			}


			document.addEventListener("input", evt => {
				var input = evt.target;
				input.style.setProperty("--value", input.value);
			});

Show value indicator

CSS variables are awesome


			for (let element of document.querySelectorAll(".typing")) {
				let length = element.textContent.length;
				element.style.setProperty("--length", length);
			}

CSS variables are awesome


			for (let el of document.querySelectorAll(".scrolling")) {
				el.addEventListener("scroll", evt => {
					let maxScroll = el.scrollHeight - el.offsetHeight;
					let scroll = el.scrollTop / maxScroll;
					el.style.setProperty("--scroll", scroll);
				});
			}

<div class="scrolling">
				<p>The allowed syntax for custom properties is extremely permissive. The <declaration-value> production matches any sequence of one or more tokens, so long as the sequence does not contain <bad-string-token>, <bad-url-token>, unmatched <)-token>, <]-token>, or <}-token>, or top-level <semicolon-token> tokens or <delim-token> tokens with a value of "!".</p>
				<p>In addition, if the value of a custom property contains a var() reference, the var() reference must be valid according to the specified var() grammar. If not, the custom property is invalid and must be ignored.</p>
				<p>The values of custom properties, and the values of var() functions substituted into custom properties, are case-sensitive, and must be preserved in their original author-given casing. (Many CSS values are ASCII case-insensitive, which user agents can take advantage of by "canonicalizing" them into a single casing, but that isn’t allowed for custom properties.)
				<p>The initial value of a custom property is an empty value; that is, nothing at all. This initial value has a special interaction with the var() notation, which is explained in the section defining var().
				<p>Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with @media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.
				<p>Notably, they can even be transitioned or animated, but since the UA has no way to interpret their contents, they always use the "flips at 50%" behavior that is used for any other pair of values that can’t be intelligently interpolated. However, any custom property used in a @keyframes rule becomes animation-tainted, which affects how it is treated when referred to via the var() function in an animation property.</p>
			</div>

CSS Variables are a revolution for
separation of style and behavior

w3.org/TR/css-variables drafts.csswg.org/css-variables

Important

CSS Variables work likenormal CSS properties

CSS Variables are inherited propertiesbut you can change that

CSS variables + url() =

WTFs

Invalid at computed-value time?!

Invalid at computed-value time = initial

Cycles make variables invalid at computed-value time

Won’t someone, please, think of browser support?!

Use variables for pure data, not CSS values

CSS Variables in @keyframes?

CSS variables + animations =

🔮 Near Future 🔮

CSS variables + animations =🔮❤️

CSS Variables enable theming independent of CSS structure

Default default values are possible

CSS Variables make responsive design easier

CSS Variables enable you to set multiple properties at once

CSS Variables let you create single property mixins (like function currying, in programmerese)

CSS Variables enable you to create custom longhands

CSS Variables enable you to define your own properties (in some cases)

CSS variables + SVG =♥️

CSS Variables are a revolution for separation of style and behavior

CSS Variables work like
normal CSS properties

CSS Variables are
inherited properties
but you can change that

Cycles make variables invalid
at computed-value time

Use variables for pure data,
not CSS values

CSS Variables enable theming
independent of CSS structure

CSS Variables make
responsive design easier

CSS Variables enable you to
set multiple properties at once

CSS Variables let you create
single property mixins
(like function currying, in programmerese)

CSS Variables enable you to
create custom longhands

CSS Variables enable you to
define your own properties
(in some cases)

CSS Variables are a revolution for
separation of style and behavior