index.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Dynamic CSS Masterclass</title>
<link href="https://inspirejs.org/inspire.css" rel="stylesheet" />
<link href="https://inspirejs.org/theme.css" rel="stylesheet" />
<link href="https://projects.verou.me/talks/shared/intro-outro.css" rel="stylesheet" />
<link href="css/prism.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<link href="css/talk.css" rel="stylesheet" />
<link href="https://projects.verou.me/talks/shared/browser-support.css" rel="stylesheet" />
</head>
<body class="language-css"
	data-markdown-elements="details.notes, .md, .takeaway.slide > h1, .credit"
	data-balance-elements=".slide > h1:only-child, .takeaway.slide > h1, .speech.slide > h1">

<header id="intro" class="slide dont-resize">
	<h1>Dynamic CSS</h1>
	<h2>…with custom properties</h2>
	<p class="attribution">By <a href="http://lea.verou.me">Lea Verou</a> (<a href="http://twitter.com/leaverou">@LeaVerou</a>)</p>
</header>

<article class="slide" id="lea-verou">
	<h1>Lea Verou
		<a href="https://twitter.com">@leaverou</a>
	</h1>

	<img src="img/smiling-smaller.jpg" alt="">

	<ul>
		<li><strong>CSS WG</strong> Invited Expert since 2012</li>
		<li><a href="https://lea.verou.me/publications/#specifications">Co-editor of 5 CSS specifications</a></li>
		<li>Elected <strong>W3C TAG</strong> Member</li>
		<li>Day job: Usable Programming @ <strong>MIT</strong> (research & teaching)</li>
		<li>Started <a href="https://github.com/leaverou">dozens of open source projects</a>, some of them used on <a href="https://www.npmjs.com/package/prismjs">millions of websites</a></li>
	</ul>
</article>

<article class="slide">
	<h1 data-label="Welcome! 👋🏼" style="--label-color: var(--accent1)">Prerequisites</h1>

	<ul>
		<li>A solid understanding of <strong>modern CSS</strong></li>
		<li>Significant experience <strong>solving problems with CSS</strong></li>
		<li>A little bit of <strong>Sass</strong> (variables, @for loops)</li>
		<li>A little bit of <strong>vanilla JS</strong> (events, basic DOM)</li>
	</ul>
</article>

<article class="slide">
	<h1>What are we going to learn?</h1>

	<ul class="emoji-list">
		<li style="list-style-type: '✅';">
			How to use custom properties to…
			<ul>
				<li>…improve maintainability of our CSS</li>
				<li>…create style hooks for customizable components</li>
				<li>…create transitions and animations not feasible without JS</li>
				<li>…cleanly separate style and behavior</li>
			</ul>
		</li>
		<li style="list-style-type: '🤦🏽‍♀️';">Caveats, gotchas, and workarounds</li>
	</ul>
</article>

<article class="slide">
	<h1>How will we learn it?</h1>

	<ul class="emoji-list">
		<li style="list-style-type: '👩🏽‍🏫'">
			Teaching
			<ul>
				<li>Regular slides</li>
				<li>Live coding slides</li>
				<li>Mini-quizzes</li>
			</ul>
		</li>
		<li style="list-style-type: '🏋🏽‍♀️'">Practice</li>
		<li style="list-style-type: '📚'">Homework</li>
	</ul>
	<details class="notes">
		There are two main components to this workshop: teaching, and practice.

		When you hear "teaching", you may imagine passive listening, but this part of the workshop is hands-on as well.
		There are a few more classic slides, but the bulk of what we learn will be taught by interactive live coding demos where I explain as I code, and you can
		choose to either watch, or follow along, it’s up to you.

		You can code directly in the slides, or open each example in CodePen and work there, if you’re more comfortable with that.
		If you run into any issues while doing this, you can always interrupt me to ask.

		When we are about to learn something potentially surprising, it is often preceded by "mini-quizzes", where I ask you what result you expect a small snippet of code to produce
		and you guess, either freely or between predefined answers.
		These quizzes are not testing your knowledge, since to answer correctly they'd require knowing something we haven’t learned yet.
		They just aim to demonstrate how surprising aspects of CSS may be, and how code we think we fully understand can often have surprising results
		because of concepts we may not know.

		There are also exercises, i.e. mini-projects where you practice what we have learned so far on your own, ask any questions along the way,
		and after a while we reconvene to code the solution together. This may often involve multiple steps.

		A more freeform mini-project will be given as homework during our 2 week break, but there will be no homework between the other sessions, as they are in consecutive days.

		There is no over-arching large project that we build gradually throughout this workshop.
		While there is value in that approach, it is not my approach of choice.
		Those who know me from other workshops, or my book know I prefer smaller, self-contained examples and exercises that are designed to let you practice specific things
		and do not involve grunt work that is unrelated to what we're learning.
		This means that if for any reason you have trouble with one exercise, it does not affect how you do in the rest.

		The breakdown of each session into teaching and practicing is not constant.
		The first session is mainly teaching, so we build a solid foundation, whereas the other three are more balanced.

		Your companion slides include almost anything that my slides include, except the quizzes (otherwise it wouldn’t be fun).
		At the end of the workshop, you will get the full version that includes the quizzes as well.

		Please do not skip ahead on your slide deck. Slides are not designed to be standalone, and you’re missing out on what is currently being taught.
	</details>
</article>

<article class="slide">
	<h1>What will you need?</h1>

	<ul class="emoji-list">
		<li style="list-style-image: url(img/chrome-logo.svg)">A recent Chrome</li>
		<li style="list-style-type: '⌨️';">A functioning keyboard.</li>
		<li style="list-style-type: '🤯'">Yup, that’s it!</li>
	</ul>
</article>

<article class="confused slide">
	<!-- <h1 class="balance-lines">A whole day discussing …CSS variables? Really?!</h1> -->
	<h1 class="balance-lines">A whole workshop discussing …CSS variables? Really?!</h1>
</article>

<article class="slide" id="preprocessors" data-steps="1">
	<h1>Variables in <span class="swap" style="--content: 'Sass'; --content-1: 'Less'"></span></h1>
	<pre><code style="--content: '$'; --content-1: '@'">
		<span class="swap"></span>accent-color: #f06;
		<span class="swap"></span>heading-font: Fancy Webfont, serif;

		h2 {
			color: <span class="swap"></span>accent-color;
			font-family: <span class="swap"></span>heading-font;
		}
	</code></pre>

	<details class="notes">
		You may come from a Sass or Less background, where variables are used like this…
	</details>
</article>

<article class="slide" id="preprocessors-scope">
	<h1>So many refactor to this…</h1>
	<pre><code style="--content: '$'; --content-1: '@'">
		:root {
			--accent-color: #f06;
			--heading-font: Fancy Webfont, serif;
		}

		h2 {
			color: var(--accent-color);
			font-family: var(--heading-font);
		}
	</code></pre>
	<div class="note delayed">but CSS variables can do so much more!</div>

	<details class="notes">
		So people often migrate to CSS variables by just changing syntax.
		And it works, for the most part.
		But it's like hiring a Michelin star chef to fry eggs.
		CSS Custom properties can do so much more!

		If you want more resources beyond this workshop, here are a few good introductory articles on CSS variables/custom properties:
		- [MDN is always a good resource](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
		- [Introduction to CSS Custom Properties - BetterProgramming](https://betterprogramming.pub/introduction-to-css-custom-properties-66b9474d3012)
		- [A Strategy Guide To CSS Custom Properties - Smashing Magazine](https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/)
		- [A user’s guide to CSS variables - Increment](https://increment.com/frontend/a-users-guide-to-css-variables/)
	</details>
</article>

<article class="isolated demo slide" id="cut-corner" style="--division: 65">
	<textarea class="language-css">
		.cut-corner {
			padding: 1em;
			clip-path: polygon(
				calc(100% - var(--corner-size)) 0,
				100% var(--corner-size),
				100% 100%, 0 100%, 0 0
			);
		}

		#a {
			background: hotpink;
			--corner-size: 1em;
		}

		#b {
			background: skyblue;
			--corner-size: 10px;
		}
	</textarea>
	<textarea class="language-html">
		<p class="cut-corner" id="a">CSS is awesome</p>
		<p class="cut-corner" id="b">CSS is awesome</p>
	</textarea>
	<details class="notes">
		CSS variables are scoped on elements, not curly bracket blocks,
		taking full advantage of the browser’s DOM structure knowledge.

		This means that we can set them and use them in entirely unrelated parts of
		our CSS, and things just work beautifully.
		Take a look at this example. How would you do it in Sass?
		The same code using Sass variables would produce a [syntax error](https://codepen.io/leaverou/pen/3ae47e6e2b1587c66d6b2545ab26de79?editors=1100).

		Try setting the corner size via an inline style.
		That is definitely something you can't do with preprocessors!
		You could also use any unit you want, even viewport units!

		-------

		*(We revisit this slide after discussing fallbacks)*

		Note that these cutout corners can only be 45 degrees, we cannot have
		different horizontal and vertical offsets.
		How can we change this example so that we can also use
		`--corner-size-x` and `--corner-size-y` (either both or just one)?

		Does this work like a shorthand? If not, what's the difference?
	</details>
</article>

<article class="takeaway slide">
	<h1 class="no-md">
		Sass variables are scoped on <em><code>{…}</code> blocks</em>,
		CSS variables are scoped on <em>elements</em>
		<div class="note">(lexical vs dynamic scope)</div>
	</h1>
</article>

<article class="confused slide">
	<h1 class="balance-lines">
		<q>I thought we weren’t supposed to call them CSS variables?</q>
	</h1>
	<details class="notes bottom-right">
		* Short answer: *it doesn't matter, use whatever term you want*
		* [The spec itself](https://drafts.csswg.org/css-variables/) uses both.
		* Yes, they are custom properties, but they can be used as reactive variables too.
		Certain use cases naturally make more sense with one or the other term, others work with both.
		* I will be using both terms throughout this workshop.
		* Some people have suggested using the term "custom property" when setting (`--foo: ...`)
		and "CSS variable" when getting (`var(--foo)`).
		Feel free to adopt this if it resonates with you. Or don't. *It doesn't actually matter.*
	</details>
</article>

<article class="question slide">
	<h1>What’s up with :root?</h1>
</article>

<article class="slide">
	<h1>Getting to the root of :root</h1>

	<ul>
		<li><code>:root</code> = the root element. <code>&lt;html></code> in HTML, <code>&lt;svg></code> in SVG etc</li>
		<li>In HTML, <code>:root</code> = <code>html</code> but with higher specificity</li>
		<li>Just a convention. Follow it or don’t.</li>
	</ul>
	<div style="display: flex; font-size: 70%;" class="delayed-children">
		<pre><code>
			/* This is fine */
			:root {
				--accent-color: #f06;
				--font-body: FancyFont, serif;
			}

			html {
				background: yellow;
				min-height: 100vh;
			}
		</code></pre>
		<pre style="margin: 0"><code>
			/* This is also fine */
			html {
				--accent-color: #f06;
				--font-body: FancyFont, serif;
				background: yellow;
				min-height: 100vh;
			}
		</code></pre>
		<pre style="margin: 0"><code>
			/* This is also fine */
			:root {
				--accent-color: #f06;
				--font-body: FancyFont, serif;
				background: yellow;
				min-height: 100vh;
			}
		</code></pre>
	</div>
	<details class="notes">
		In the past, one reason to prefer `:root` was also that there were scripts like [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)
		that only preprocessed custom properties in `:root`.
		However, these days this is no longer relevant,
		not only because browser support for custom properties is great so the need to preprocess is pretty much gone,
		but also because there are [PostCSS plugins](https://www.npmjs.com/package/postcss-css-variables) that do heavier transformations
		and are not just restricted to `:root`.
	</details>
</article>

<article class="slide">
	<h1>What CSS variables <em>can’t do</em></h1>

	<table>
		<thead>
			<tr>
				<th></th>
				<th>Valid Sass code</th>
				<th>Invalid CSS code</th>
			</tr>
		</thead>
		<tbody class="delayed-children">
			<tr>
				<th>Property names</th>
				<td>
					<pre><code class="language-scss">
						$prop: margin-top;
						#{$prop}: 10px;
					</code></pre>
				</td>
				<td>
					<pre><code>
						--prop: margin-top;
						var(--prop): 10px;
					</code></pre>
				</td>
			</tr>
			<tr>
				<th>Selectors</th>
				<td>
					<pre><code class="language-scss">
						$i: 1;
						.foo-#{$i} {
							...
						}
					</code></pre>
				</td>
				<td>
					<pre><code>
						:root { --i: 1; }
						.foo-var(--i) {
							...
						}
					</code></pre>
				</td>
			</tr>
			<tr>
				<th>@rules</th>
				<td>
					<pre><code class="language-scss">
						$w: 500px;
						@media (min-width: #{$w}) {
							...
						}
					</code></pre>
				</td>
				<td>
					<pre><code>
						:root { --w: 500px; }
						@media (min-width: var(--w)) {
							...
						}
					</code></pre>
				</td>
			</tr>
		</tbody>
	</table>

	<details class="notes">
		This entire workshop will go in depth about how CSS variables are
		more powerful than preprocessor variables.
		So it's only fair that before we start we briefly discuss what they *can't* do.
	</details>
</article>

<section>
	<header class="slide" id="inheritance-header" style="--icon: 💸; background-color: var(--accent2)">
		<h1>Inheritance</h1>
	</header>

	<article class="isolated demo slide" id="inheritance" style="--division: 60">
		<textarea class="language-css">
			:root {
				--primary-color: hsl(250 30% 40%);
				--secondary-color: hsl(190 40% 40%);
				--tinted-background: hsl(0 0% 100% / .8);
			}

			h1 {
				color: var(--secondary-color);
			}

			article {
				background: var(--primary-color);
			}

			article h2 { color: white; }

			article a {
				color: var(--primary-color);
			}

			article .content {
				background: var(--tinted-background);
			}
		</textarea>
		<!--
		@media (prefers-color-scheme: dark) {
			:root {
				--tinted-background: hsl(0 0% 10% / .6);
			}
		}

		body {
			color-scheme: light dark;
			background: canvas;
			color: canvastext;
		}
		article.alt {
			--primary-color: var(--secondary-color);
		}
		 -->
		<style class="demo" data-slide media="not all">
			body {
				font-size: 100%;
				line-height: 1.5;
			}

			article {
				border-radius: .3rem;
				overflow: hidden;
				margin: 1em 0;
			}

			article h2 {
				padding: .3rem .5rem;
				margin: 0;
			}

			article a {
				font-weight: bold;
			}

			article .content {
				padding: .1em .5rem;
			}
		</style>
		<textarea class="language-html">
			<h1>Lea Verou's blog</h1>

			<article>
				<h2>Blog Post 1</h2>
				<div class="content">
					<p>Blog post 1 content with <a href="https://lea.verou.me">link</a></p>
				</div>
			</article>

			<article class="alt">
				<h2>Blog Post 2</h2>
				<div class="content">
					<p>Blog post 2 content with <a href="https://lea.verou.me">link</a></p>
				</div>
			</article>
		</textarea>
		<details class="notes">
			The browser is aware of our DOM structure, and custom properties inherit by default.
			Here we have defined our properties on the `:root` selector,
			but they are available on every other element.
			But even better, we can *override* variables on individual elements
			and it's the more specific value that inherits down.

			Let's make any blog post with the `.alt` class use the secondary color instead.

			------

			One of the major ways we take advantage of this inheritance is media queries.
			We can only overide a few variables in the media query and have all our styles adjust
			instead of rewriting a bunch of rules.
			Let's see how this works in practice with a crude dark mode version of this website.
			[Codepen solution](https://codepen.io/leaverou/pen/deee6211f81af64b1a5ebb70f53e044e?editors=1100)

			------

			Remember the clumsy dark mode we used here? Let's improve it!
		</details>
	</article>

	<article class="takeaway slide">
		<h1>CSS Variables are actually <br>
			<span class="delayed collapsed">inherited</span> CSS properties</h1>
	</article>

	<article class="slide" data-insert="#inheritance"></article>

	<article class="slide" data-type="Aside">
		<div>
			<p class="balance-lines">
				If <code>color-scheme: light dark</code> is specified,<br>
				<code>canvas</code> and <code>canvastext</code> act like this:</p>
			<pre><code>
				:root {
					--canvas: white;
					--canvastext: black;
				}

				@media (prefers-color-scheme: dark) {
					:root {
						--canvas: black;
						--canvastext: white;
					}
				}
			</code></pre>
		</div>
		<details class="notes">
			Related:

			- [Initial value of `color` is `canvastext`, not `black`](https://drafts.csswg.org/css-color/#the-color-property)
			- [The `color-scheme` property](https://drafts.csswg.org/css-color-adjust/#color-scheme-prop)
		</details>
	</article>

	<article class="question slide">
		<h1>What if we don’t want inheritance?</h1>
	</article>

	<article class="isolated demo slide" id="cut-corner">
		<textarea class="language-css">
			* {
				clip-path: polygon(
					calc(100% - var(--corner-size)) 0,
					100% var(--corner-size),
					100% 100%, 0 100%, 0 0
				);
			}

			p {
				padding: 1em;
				background: skyblue;
				--corner-size: 1em;
			}
		</textarea>
		<textarea class="language-html">
			<p>CSS is <mark>awesome</mark></p>
		</textarea>
		<details class="notes">
			Sometimes inheritance is not desirable.

			One common pattern for using custom properties more as properties
			is to use them on very liberal selectors, e.g. `input` or even `*`
			and then specify them only when we want to trigger the corresponding effect.
			Often, these effects should not be inherited.

			One way to disable inheritance is to just make sure the property always has a non-inherited value.
			`initial` is perfect for that: it resets the property to its initial value,
			as if it had not been set at all, but still prevents it from inheriting.
			We can always opt-in inheritance on a case-by-case basis by using the `inherit` keyword.

			--------

			There is a newer, more explicit way to disable inheritance: the [@property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) rule.
			It makes custom properties tremendously more powerful, and we will keep revisiting it
			throughout this workshop.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>
			You can disable inheritance by setting the property to `initial` on `*`
		</h1>
	</article>

	<article class="slide" data-insert="#cut-corner-2"></article>

	<article class="takeaway slide">
		<h1>`@property` allows us to register our properties and control how they behave</h1>
	</article>

	<article class="slide">
		<h1>Remember this?</h1>
		<pre><code class="language-javascript">
			CSS.registerProperty({
				name: "--corner-size",
				syntax: "*";
				inherits: false
			})
		</code></pre>
		<details class="notes">
			Registering custom properties, started as a JS API,
			and we got the declarative `@property` rule later.
		</details>
	</article>

	<article class="browser-support slide">
		<table>
			<thead>
				<tr>
					<th></th>
					<th><img src="img/chrome-logo.svg" alt="Chrome"></th>
					<th><img src="img/firefox-logo.svg" alt="Firefox"></th>
					<th><img src="img/edge-logo.svg" alt="Edge"></th>
					<th><img src="img/safari-logo.png" alt="Safari"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th><a href="https://caniuse.com/mdn-css_at-rules_property">@property</a></th>
					<td>85</td>
					<td></td>
					<td>85</td>
					<td></td>
				</tr>
				<tr>
					<th><a href="https://caniuse.com/mdn-api_css_registerproperty">CSS.registerProperty()</a></th>
					<td>79</td>
					<td></td>
					<td>79</td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<details class="notes">
			However, today there is only a very marginal benefit to using the JS API,
			as it's supported by the same browsers,
			it just shipped in a slightly older version compared to `@property`.
			Given that most users of these browsers have updated to a version that supports `@property`
			at this point, you would only be getting a small increase in support,
			for a significant increase in maintainability cost.

			Also, Safari has [hinted](https://github.com/w3c/css-houdini-drafts/issues/940)
			that they may implement `@property` *first* due to its improved performance.

			The JS API is still useful for debugging,
			because it actually prints out readable errors, while the CSS rule fails silently.
		</details>
	</article>

	<article class="isolated horizontal demo slide">
		<textarea class="language-html">
			<sl-image-comparer>
				<img slot="before" src="img/kittens-bw.jpg" alt="Grayscale version of kittens in a basket looking around.">
				<img slot="after" src="img/kittens.jpg" alt="Color version of kittens in a basket looking around.">
			</sl-image-comparer>

			<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.51/dist/shoelace.js"></script>
		</textarea>
		<textarea class="language-css">
			@import url("https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.51/dist/themes/light.css");

			sl-image-comparer {
				--divider-width: 3px;
				--handle-size: 2em;
			}
		</textarea>
		<details class="notes">
			Since custom properties are inherited properties, they also inherit down Shadow DOM boundaries,
			and they are not affected by any potential `all: unset` CSS resets.
			Users of Web components cannot directly style them (that’s the whole point of encapsulation),
			but custom properties can provide style hooks for customizing aspects of the component.

			Here we see how the [Shoelace Image Comparer](https://shoelace.style/components/image-comparer) component
			is using CSS variables as style hooks.

			Photo by Jari Hytönen on Unsplash
		</details>
	</article>

	<article class="isolated horizontal demo slide">
		<textarea class="language-html">
			<sl-image-comparer>
				<img slot="before" src="img/kittens-bw.jpg" alt="Grayscale version of kittens in a basket looking around.">
				<img slot="after" src="img/kittens.jpg" alt="Color version of kittens in a basket looking around.">
			</sl-image-comparer>

			<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.51/dist/shoelace.js"></script>
		</textarea>
		<textarea class="language-css">
			@import url("https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.51/dist/themes/light.css");

			sl-image-comparer::part(divider),
			sl-image-comparer::part(handle) {
				background: gold;
			}
		</textarea>
		<details class="notes">
			Even as consumers of components, we can use custom properties to create our own higher-level abstractions for styling components.
			Let's take a look at this example.
			We want to change the divider color, but the component does not expose a custom property for this.
			Instead, it exposes two [parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) of the component: `divider` and `handle`.
			We can define a custom property that allows us to set the color of both at once without having to drill down to the parts.

			Note that this technique is not just limited to actual web components, it can be useful for any reusable blob of HTML & CSS (which is essentially what a component is).
		</details>
	</article>

	<article class="isolated demo slide" style="--division: 60">
		<textarea class="language-html">
			<progress value="30" max="100"></progress>
		</textarea>
		<textarea class="language-css">
			progress {
				-webkit-appearance: none;
				background: hsl(220 10% 88%);
			}

			progress::-webkit-progress-value {
				background: purple;
			}

			progress::-moz-progress-bar {
				background: purple;
			}
		</textarea>

		<style data-slide media="not all" class="demo">
			html {
				padding: 1em;
			}

			progress {
				transform: scale(2);
				transform-origin: 0 0;
				width: 50%;
				margin-bottom: 2em;
			}

			progress::-webkit-progress-bar {
				background: transparent;
			}
		</style>
		<details class="notes">
			The same technique allows us to define custom properties that style native components,
			so we can avoid using messy prefixed pseudo-elements all over the place.

			Here we have a rather simple example of styling a `&lt;progress>` element.
			Every time we want to change the color of the progress bar, we have to override two separate rules.
			Custom properties can help abstract away this ugliness.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>
			Custom properties inherit down Shadow&nbsp;DOM boundaries
			<div class="note">(and are not reset by all: initial)</div>
		</h1>
		<details class="notes">
			Unlike other inheritable properties however,
			custom properties cannot be reset by `all: initial`.
		</details>
	</article>
</section>

<section id="fallbacks">
	<header class="slide" style="--icon: 🧗🏽; background-color: var(--accent1)">
		<h1>Fallbacks</h1>
	</header>

	<article class="isolated demo slide" id="gallery" style="--division: 55">
		<textarea class="language-html">
			<div class="fancy-photos">
				<img src="img/cat1.jpg" alt="">
				<img src="img/cat2.jpg" alt="">
				<img src="img/cat3.jpg" alt="">
				<img src="img/cat4.jpg" alt="">
				<img src="img/cat5.jpg" alt="">
				<img src="img/cat6.jpg" alt="">
				<img src="img/cat7.jpg" alt="">
				<img src="img/cat8.jpg" alt="">
				<img src="img/cat9.jpg" alt="">
				<img src="img/cat10.jpg" alt="">
			</div>
		</textarea>
		<textarea class="language-css">
			.fancy-photos {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 3vw;
			}

			.fancy-photos img {
				width: 100%;
				box-sizing: border-box;
				aspect-ratio: 1 / 1;
				object-fit: cover;
				transform: scale(var(--scale))
				           rotate(var(--rotate));
				transition: .3s;
			}

			.fancy-photos img:hover {
				background: yellow;
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			body {
				margin: 4vw;
			}

			.fancy-photos img {
				margin: 1vw;
				padding: 1vw;
				background: white;
				box-shadow: 0 .1vw .5vw rgb(0 0 0 / .3);
			}
		</style>

		<!-- TODO translate to show it can have two tokens -->
		<details class="notes">
			* Often, we use custom properties as optional styling hooks that may or may not be used.
			This allows us to create a sort of *"styling API"* for us or even other developers.
			* In these cases, we want to provide default values along,
			so that people using our code do not need to set every single property.
			* Here, we are using `--rotate` and `--scale` properties to allow specifying
			transforms individually on these images
			(aside: there are [actual standardized properties for this, but support is still limited](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate)).
			* Let's try to apply subtle rotations to some images ([Cicada principle](https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/))
			and also enlarge them slightly on `:hover`.
			* Notice that for our transforms to be applied, both need to be set,
			defeating the purpose of using a custom property. What to do?
			* We *could* set `--scale` and `--rotate` on `img` as well, and it would fix the demo,
			but is not ideal because:
			  - it breaks inheritance
			  - It forces our API consumers to battle specificity
			* Thankfully, the `var()` function allows for a fallback parameter too, which is perfect for this.
			* Unlike just setting variables to values, the fallback parameter also allows us to provide
			different fallbacks per usage, **for the same custom property**
			* Note that an alternative to using these fallbacks is to register our properties and provide initial values.
				- We cannot do both. Once we declare an initial value, the fallback is never triggered.
			* [Codepen solution](https://codepen.io/leaverou/pen/1f5c9aa156dd2f1902b4932e95716b66?editors=1100)
		</details>
	</article>

	<article class="question slide">
		<h1>How do these fallbacks actually work?</h1>
	</article>

	<article class="slide color-reveal">
		<div class="delayed-children">
			<br>
			<div style="background: yellowgreen">--accent-color: yellowgreen</div>
			<br>
			<div style="background: orange">No --accent-color set</div>
			<br>
			<div style="background: orange">--accent-color: initial</div>
			<br>
			<div style="background: red">No CSS variables support</div>
		</div>

		<pre style="margin-top: 2em; overflow: visible"><code>
			background: red;
			background: var(--accent-color, orange);
		</code></pre>
	</article>

	<article class="takeaway slide">
		<h1>
			The `var()` fallback is applied when there is no value, or when it resolves to `initial`
			<div class="note">(and some other cases we'll see later)</div>
		</h1>

	</article>

	<article class="takeaway slide">
		<h1>The `var()` fallback is no help in browsers that don’t support CSS variables</h1>
	</article>

	<article class="browser-support slide">
		<table>
			<thead>
				<tr>
					<th></th>
					<th><img src="img/chrome-logo.svg" alt="Chrome"></th>
					<th><img src="img/firefox-logo.svg" alt="Firefox"></th>
					<th><img src="img/edge-logo.svg" alt="Edge"></th>
					<th><img src="img/safari-logo.png" alt="Safari"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th><a href="https://caniuse.com/css-variables" target="_blank">CSS Variables</a></th>
					<td>49</td>
					<td>31</td>
					<td>15</td>
					<td>9.1</td>
				</tr>
			</tbody>
		</table>
	</article>

	<article class="isolated demo slide" id="atsupports" style="--division: 50">
		<textarea class="language-css">
			body {
				background: red;
			}

			@supports (--css: variables) {
				body {
					background: green;
				}
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			body {
				min-height: 100vh;
				margin: 0;
			}
		</style>
		<details class="notes">
			For most cases, providing fallbacks via the cascade
			works fine to provide a baseline accessible experience to the
			few browsers that still don’t support custom properties.

			However, if you need a more elaborate fallback, you can use the
			[`@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
			rule. Any custom property and any value will do as the test.

			When do you need a more elaborate fallback?
			Typically when you need to control more properties and/or rules than the ones with
			the `var()` reference.

			Avoid using its negative form (`@supports not (--css: variables)`),
			as that will prevent you from targeting the really old browsers (notably, IE 11 or under)
			that don’t even support `@supports`.

			----------

			Can we use `@supports` to detect `@property` support? Let's try.
		</details>
	</article>

	<article class="slide takeaway">
		<h1>Use `@supports` to provide more elaborate fallback styling
			<div class="note">And avoid @supports not (…)</div>
		</h1>

	</article>

	<article class="browser-support slide">
		<table>
			<thead>
				<tr>
					<th></th>
					<th><img src="img/chrome-logo.svg" alt="Chrome"></th>
					<th><img src="img/firefox-logo.svg" alt="Firefox"></th>
					<th><img src="img/edge-logo.svg" alt="Edge"></th>
					<th><img src="img/safari-logo.png" alt="Safari"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>CSS Variables</th>
					<td>49</td>
					<td>31</td>
					<td>15</td>
					<td>9.1</td>
				</tr>
				<tr>
					<th><a href="https://caniuse.com/css-featurequeries">@supports</a></th>
					<td>28</td>
					<td>22</td>
					<td>13</td>
					<td>9</td>
				</tr>
			</tbody>
		</table>
	</article>

	<!-- <article class="slide takeaway">
		<h1>Avoid using `@supports not` for a single test</h1>
		<details class="notes">
			Why? It only applies what's inside to browsers that
			both support `@supports` **and** don't support the thing you're testing.

			`not` can be useful in conjunciton with positive tests,
			but when you're just testing if a given feature is supported,
			go with a positive test and progressive enhancement.
		</details>
	</article> -->

	<article class="slide" data-insert="#atsupports"></article>

	<article class="slide takeaway">
		<h1>There is currently no way to use `@supports` to detect `@property` support</h1>
		<details class="notes">Why does this not work? We'll see in the next section, when we talk about parse time vs computed time values.</details>
	</article>

	<article class="slide">
		<h1 class="balance-lines">How can we detect <code>@property</code> then?</h1>
		<pre><code class="language-javascript">
			if (window.CSSPropertyRule) {
				let root = document.documentElement;
				root.classList.add("supports-atproperty");
			}
		</code></pre>
	</article>

	<article class="slide color-reveal">
		<div class="delayed-children">
			<br>
			<div style="background: orange">--accent-color: initial</div>
			<br>
			<div style="background: orange">--accent-color: unset</div>
			<br>
			<div style="background: orange">--accent-color: inherit</div>
			<br>
			<div style="background: orange">--accent-color: revert</div>
		</div>

		<pre style="margin-top: 2em; overflow: visible"><code>
			background: red;
			background: var(--accent-color, orange);
		</code></pre>
	</article>

	<article class="question slide">
		<h1>Do all CSS wide keywords trigger a variable’s fallback?!</h1>
	</article>

	<article class="demo slide reveal" data-steps="1">
		<textarea class="language-css preserve-selectors">
			:root {
				--accent-color: skyblue;
			}

			.slide {
				/* --accent-color: inherit; */
				background: var(--accent-color, orange);
			}
		</textarea>
		<details class="notes css">
			No, not all global CSS values simply trigger a variable's fallback.

			* `initial` does, by definition
			* `inherit` does not, unless there's no value to inherit
			* `unset` in custom properties behaves identically to `inherit`
				(unless they are defined as non-inheriting).
			* `revert` reverts the custom property to its UA provided value,
				which is ...`unset`.
			* Surprised by the result of `revert`?
			[You're not alone](https://twitter.com/LeaVerou/status/1395379573190168576)!
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Out of all CSS wide keywords, only `initial` actually triggers the fallback
			<div class="note">(and anything that resolves to it)</div>
		</h1>
	</article>

	<article class="slide" id="multiple-default-values" data-steps="1">
		<h1>Multiple fallbacks?</h1>
		<div>
			<pre><code>background: var(--nonexistent, none, yellowgreen);</code></pre>
			<pre><code>
				/* Resolves to: */
				background: none, yellowgreen;
			</code></pre>
		</div>
		<details class="notes">
			Anything after the comma is part of the fallback, including …other commas.
		</details>
	</article>

	<!-- <article class="slide dont-resize" id="daisy-chain" data-source="Image source: https://www.flickr.com/photos/26235325@N05/5641177399">
		<pre><code>
			var(--color1<span class="delayed">, var(--color2<span class="delayed">, var(--color3<span class="delayed" style="--length: 5">, gray</span>)</span>)</span>)
		</code></pre>
		<details class="notes">
			A variable’s fallback can be another variable reference,
			allowing us to have interactive defaults that can depend on other values.
		</details>
	</article> -->

	<article class="slide" data-insert="#cut-corner"></article>

	<article class="takeaway slide">
		<h1>
			Fallbacks can be dynamic, via `var()` references
		</h1>
	</article>

	<article class="takeaway slide">
		<h1>
			Default values allow us to create “shorthands” of sorts
			<div class="note">(but careful, they’re not real shorthands!)</div>
		</h1>
	</article>

	<article class="isolated demo slide" id="button">
		<textarea class="language-html">
			<button>Click me</button>
			<button class="pink">Click me</button>
		</textarea>

		<textarea class="language-css">
			button {
				border: .1em solid black;
				background: transparent;
				color: black;
			}

			button:hover {
				background: black;
				color: white;
			}

			button.pink {
				border-color: #f06;
				color: #f06;
			}

			button.pink:hover {
				background: #f06;
				color: white;
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			button {
				border-radius: .3em;
				padding: .1em .5em .15em;
				font-weight: bold;
				font-size: 180%;
				margin: .2em;
				cursor: pointer;
			}
		</style>
		<details class="notes">
			This is a simplified flat button whose text color becomes its background color on hover, a common effect.
			Note the repetition required to specify a color variation. Let's use CSS variables to eliminate that!

			After rewriting with CSS variables, only a single `--color` declaration is sufficient to create a color variation of the entire component.

			However, the fallbacks are getting quite repetitive.

			Although the syntax allows us to use a different fallback in every usage,
			in most cases, we don't need that.
			Repeating the fallback value over and over is not [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself).
			What can we do to reduce that duplication?

			-----------

			Another benefit of custom properties is *encapsulation*.
			We can change how styling works completely, and as long as we use the same custom properties
			anyone using and styling our component doesn't need to change a thing.
		</details>
	</article>

	<article class="takeaway slide">
		<h1><abbr title="Don’t Repeat Yourself">DRY</abbr> fallback strategy 1: Fallback in a separate variable</h1>

		<pre><code>
			--color-initial: black;
			...
			color: var(--color, var(--color-initial));
		</code></pre>

		<details class="notes">
			This way allows you to use the same property internally
			that you expose to other people, but it makes each usage extremely verbose.

			One advantage is that it allows consumers of your component *to override the defaults*,
			which no other method allows.
		</details>
	</article>

	<article class="takeaway slide">
		<h1><abbr title="Don’t Repeat Yourself">DRY</abbr> fallback strategy 2: <br>Pseudo-private properties</h1>

		<pre><code>
			--_color: var(--color, black);
			...
			color: var(--_color);
		</code></pre>

		<details class="notes">
			I’ve written more about this method in [this article](https://lea.verou.me/2021/10/custom-properties-with-defaults/),
			and in most cases, it’s my method of choice.

			With this method, you use different properties internally than the ones you expose to the outside world,
			which have the defaults "baked in".

			The advantages of this method is that it doesn’t add any extra verbosity, and it is self-documenting.
			It’s like the code is saying: "This is my CSS API, and these are the defaults for each property".
			For a demonstration of this, take a look at [this example of a switch-styled checkbox](https://codepen.io/leaverou/pen/PoKPQYE)

			One downside of this method is that it’s easy to forget the `_` when writing CSS, then be puzzled why the CSS is broken.
			Another downside is that these are only private by convention, but hey, that worked for JS for over 20 years!
		</details>
	</article>

	<article class="takeaway slide">
		<h1><abbr title="Don’t Repeat Yourself">DRY</abbr> fallback with `@property`</h1>

		<pre><code>
		@property --color {
			syntax: "&lt;color>";
			initial-value: black;
			inherits: true;
		}
		...
		color: var(--color);
		</code></pre>

		<details class="notes">
			In most cases, `@property` offers a far better solution,
			with the main drawbacks being its browser support and the fact that it’s tree scoped
			(essentially global, unless you’re in Shadow DOM).

			Another downside is that the other approaches
			allow for different defaults per use,
			whereas an `@property` rule is global.
		</details>
	</article>

	<article class="slide" data-insert="button"></article>

	<article class="takeaway slide" id="button-takeaway">
		<h1>CSS Variables enable theming<br> independent of CSS structure</h1>
		<details class="notes">
			This is one of the most important takeaways from today.
			When custom properties are used as styling hooks, a component can
			change its internal CSS structure entirely, without anyone needing to change their
			code that uses and customizes said component.
		</details>
	</article>

	<article class="slide allow-attendee" id="homework-bar-chart">
		<h1 data-label="Exercise">Customizable bar chart component</h1>
		<style data-slide media="not all">
			@import url("css/bar-chart.css");
		</style>
		<div class="bar-chart">
			<div style="--p: 95%">A</div>
			<div style="--p: 100%">B</div>
			<div style="--p: 95%">C</div>
			<div style="--p: 38%">D</div>
			<div style="--p: 84.21%">E</div>
			<div style="--p: 49%">F</div>
		</div>
	</article>

	<article class="isolated demo slide" id="bar-chart">
		<textarea class="language-css">
			:root {
				background: hsl(200, 15%, 20%);
			}

			.bar-chart {
				display: flex;
				align-items: flex-end;
				gap: 1.5em;
				padding: 0 1.5em;
				font-size: 60%;
				background: linear-gradient(to bottom, hsla(0,0%,100%,.1) 50%, transparent 0) top / 100% 20%;
				border: 2px solid white;
				border-top: 0;
				border-right: 0;
				width: fit-content;
				height: calc(100vmin - 12em);
				margin: 2em auto;
			}

			.bar-chart > div {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				width: 2em;
				background: deeppink;
				box-sizing: border-box;
				padding: .3em 0;
				font-weight: bold;
				letter-spacing: -.04em;
				word-wrap: break-word;
				line-height: 1;
				color: white;
			}
		</textarea>
		<textarea class="language-html">
			<div class="bar-chart">
				<div style="--p: 95%">A</div>
				<div style="--p: 100%">B</div>
				<div style="--p: 95%">C</div>
				<div style="--p: 38%">D</div>
				<div style="--p: 84.21%">E</div>
				<div style="--p: 49%">F</div>
			</div>
		</textarea>
		<details class="notes">
			1. **Base**: Fill in the CSS missing to utilize the `--p` variables for the percentages.
			2. **Going further:** Introduce properties to further customize the chart. Some ideas:
				* `--bar-color`
				* `--bar-width`
				* `--bar-spacing`
				* `--band-count`
			3. Question: Why use `--bar-color` or `--bar-width` when we could just override the corresponding properties?

			[CodePen solution](https://codepen.io/leaverou/pen/6e8a25602a965ce9b016cc5b266316aa)
		</details>
	</article>
</section>

<section>
	<header class="slide" style="--icon: 🙅🏽‍♀️; background-color: var(--accent3)">
		<h1>Invalid Values</h1>
	</header>

	<article class="slide color-reveal" id="invalid-values">
		<div class="delayed-children">
			<br>
			<div style="background: transparent;">--accent-color: 42deg;</div>
		</div>

		<pre style="margin-top: 2em; overflow: visible"><code>
			background: red;
			background: var(--accent-color, orange);
		</code></pre>
	</article>

	<article class="takeaway slide">
		<h1 class="no-md">
			Otherwise valid CSS values may make declarations <br>
			<a href="https://drafts.csswg.org/css-variables/#invalid-at-computed-value-time">
				<strong>Invalid At Computed Value Time (IACVT)</strong>
			</a>
		</h1>
	</article>

	<article class="takeaway slide" data-type="Aside">
		<h1>What is a Computed Value?</h1>

		<ul class="delayed-children">
			<li>
				<strong>Parse time (specified values):</strong>
				When the actual CSS code is read, parsed, and converted to a tree of objects (CSSOM). One and done operation.
				<div class="note">E.g. this is when duplicate properties are removed, and the shorthand properties are expanded.</div>
			</li>
			<li>
				<strong>Computed Values:</strong>
				An intermediate runtime representation where most relative values are absolutized but not all.
				<div class="note">E.g. this is when relative units are resolved to px</div>
			</li>
			<li>
				<strong>Used values:</strong>
				The final stage, when values are fully resolved to be used for painting.
				<div class="note">E.g. this is when % widths are resolved to px</div>
			</li>
		</ul>
		<details class="notes">
			* The computed value is the value that is transferred from parent to child during inheritance.
			For historical reasons, it is not necessarily the value returned by the `getComputedStyle()` function, which sometimes returns used values.
			* In general, the computed value resolves the specified value as far as possible without laying out the document or performing other expensive or hard-to-parallelize operations,
			such as resolving network requests or retrieving values other than from the element and its parent.
			* Read more:
				  * [Computed Values](https://www.w3.org/TR/css-cascade-4/#computed)
				  * [Used Values](https://www.w3.org/TR/css-cascade-4/#used)
		</details>
	</article>

	<article class="takeaway slide">
		<h1 class="no-balance-lines"><abbr title="Invalid At Computed Value Time">IACVT</abbr> → `unset`</h1>
		<details class="notes">
			So what does IACVT mean in practice?
			A property that is IACVT is treated as being set to [`unset`](https://developer.mozilla.org/en-US/docs/Web/CSS/unset).
			If you haven't heard of it, `unset` is a very useful keyword that resolves to `initial` for non-inherited properties,
			and `inherit` for inherited properties.
			E.g. `* { all: unset; }` would be the most quick & dirty CSS reset 😉
		</details>
	</article>

	<article class="slide color-reveal" id="invalid-values">
		<div class="delayed-children">
			<br>
			<div style="background: transparent;">--accent-color: initial;</div>
		</div>

		<pre style="margin-top: 2em; overflow: visible"><code>
			background: red;
			background: var(--accent-color, 42deg);
		</code></pre>
	</article>

	<article class="takeaway slide">
		<h1>Fallbacks can also trigger IACVT</h1>
	</article>

	<article class="slide heading-3x3 speaker-only" id="iavct-cascade">
		<h1>Are these equivalent?</h1>
		<pre><code>
			background: gold;
			background: lch(60% 100 0);
		</code></pre>
		<pre><code>
			--color: lch(60% 100 0);
			background: gold;
			background: var(--color);
		</code></pre>
		<pre><code>
			--color: gold;
			--color: lch(60% 100 0);
			background: var(--color);
		</code></pre>
		<p class="supported">
			LCH: <span class="swatch lch-pink" style=""></span>
		</p>
		<p class="supported">
			LCH: <span class="swatch lch-pink" style=""></span>
		</p>
		<p class="supported">
			LCH: <span class="swatch lch-pink" style=""></span>
		</p>
		<p class="not-supported">
			No LCH: <span class="swatch delayed" style="background: gold;"></span>
		</p>
		<p class="not-supported">
			No LCH: <span class="swatch transparent delayed"></span>
		</p>
		<p class="not-supported">
			No LCH: <span class="swatch transparent delayed"></span>
		</p>
		<details class="notes">
			We are used to the classic cascade behavior,
			where if a value is not supported, the browser just discards the entire declaration
			and falls back to any preceding declarations for the same property.
			This happens at parse time.

			This does not work with custom properties.
			Since their values are resolved at computed value time,
			the browser has already thrown away any preceding declarations.
			This is exactly why the concept of Invalid At Computed Value Time (IACVT)
			was introduced.
		</details>
	</article>

	<article class="demo slide reveal" data-steps="1">
		<textarea class="language-css">
			@property --color {
				syntax: '<color>';
				inherits: true;
				initial-value: skyblue;
			}

			.slide {
				--color: gold;
				--color: lch(60% 100 0);
				background: var(--color);
			}
		</textarea>
		<details class="notes">
			It would be reasonable to expect that if we register our custom property
			it would throw away invalid values during parse time, so we can still
			use the cascade for fallbacks.

			Unfortunately, that's not the case.
			Registered properties only enforce their syntax at computed value time,
			and become IACVT if they do not match it.
			The reason for this is that otherwise,
			registering new properties (which could happen at any time),
			would trigger a reparse of the entire stylesheet.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>
			The syntax of registered properties is checked at computed value time,
			not parse time
		</h1>
		<details class="notes">
			This is why we cannot detect `@property` through `@supports`:
			`@supports` checks for parse-time syntax.
		</details>
	</article>

	<article class="question slide">
		<h1>
			Then how do we provide fallbacks for unsupported features??
			<div class="note delayed">@supports to the rescue!</div>
		</h1>
	</article>

	<article class="isolated demo slide">
		<textarea class="language-css">
			:root {
				--primary-color: rgb(100% 19% 58%);
			}

			@supports (color: lch(0% 0 0)) {
				:root {
					--primary-color: lch(60% 100 0);
				}
			}

			body {
				background: var(--primary-color);
			}
		</textarea>
		<details class="notes">
			Yes, this is quite verbose and annoying.
			There are plans to allow `@supports` to be nested in regular CSS rules.
			There are also plans for an inline [`first-supported()`](https://github.com/w3c/csswg-drafts/issues/5055) function.
			Both of these are quite far into the future though.
		</details>
	</article>

	<article class="slide">
		<h1>What about this?</h1>

		<pre><code>
			font-size: 20px;
			font-size: clamp(16px, 1em * var(--font-size-scale), 24px);
		</code></pre>

		<p class="note">What happens in browsers that don’t support clamp()?</p>

		<details class="notes">
			Because when parsing, the browser doesn't have the values of custom properties,
			it cannot know if after substitution, the resulting values will be valid.
			Therefore, it optimistically assumes they will be valid, and throws away any other fallback values.
			So, even though the unsupported function is right there, and not inside a variable, like in our previous examples,
			once `var()` is introduced, these types of fallbacks go out of the window, and `@supports` is the only way.
		</details>
	</article>

	<!-- <article class="slide" data-insert="#homework-bar-chart"></article> -->

	<article class="isolated demo slide" id="inheritance" style="--division: 55">
		<textarea class="language-css">
			:root {
				--primary-color: hsl(250 30% 40%);
				--secondary-color: hsl(190 40% 40%);
				--tinted-background: hsl(0 0% 100% / .8);
			}

			h1 {
				color: var(--primary-color);
			}

			article {
				background: var(--primary-color);
			}

			article.alt {
				--primary-color: var(--secondary-color);
			}

			article h2 {
				background: var(--primary-color);
				color: white;
			}

			article a {
				color: var(--secondary-color);
			}

			article .content {
				background: var(--tinted-background);
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			body {
				font-size: 100%;
				line-height: 1.5;
			}

			article {
				border-radius: .3rem;
				overflow: hidden;
				margin: 1em 0;
			}

			article h2 {
				padding: .3rem .5rem;
				margin: 0;
			}

			article a {
				font-weight: bold;
			}

			article .content {
				padding: .1em .5rem;
			}
		</style>
		<textarea class="language-html">
			<h1>Lea Verou's blog</h1>

			<article>
				<h2>Blog Post 1</h2>
				<div class="content">
					<p>Blog post 1 content with <a href="https://lea.verou.me">link</a></p>
				</div>
			</article>

			<article class="alt">
				<h2>Blog Post 2</h2>
				<div class="content">
					<p>Blog post 2 content with <a href="https://lea.verou.me">link</a></p>
				</div>
			</article>
		</textarea>
		<details class="notes">
			Remember this?
			Now each article utilizes both its primary and secondary colors,
			which means our tweak for `article.alt` doesn’t work well anymore.
			How can we swap `--primary-color` and `--secondary-color`?
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Cycles make all variables in the cycle IACVT</h1>
	</article>

	<!-- <article class="slide" data-steps="2">
		<style data-slide media="not all">
			article.slide[data-step] {
				background: orange;
			}

			article.slide[data-step] pre {
				filter: invert(100%);
				mix-blend-mode: multiply;
			}

			article.slide[data-step="2"] {
				background: none;
			}

			article.slide[data-step="2"] pre code .delete {
				opacity: 0;
			}
		</style>

		<pre><code>
			--accent-color: 42deg;
			<span class="delete">--accent-color: var(--accent-color);</span>
			background: red;
			background: var(--accent-color, orange);
		</code></pre>
	</article> -->

	<article class="slide">
		<h1>What CSS variables <em>can’t do</em></h1>

		<table>
			<thead>
				<tr>
					<th>Valid Sass code</th>
					<th>Invalid CSS code</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<pre><code>
							:root {
								$depth: 0;


								& > * {
									$depth: $depth + 1;
								}
							}
						</code></pre>
					</td>
					<td>
						<pre><code>
							:root {
								--depth: 0;
							}
							:root > * {
								/* ⚠️ Cycle! */
								--depth: calc(var(--depth) + 1);
							}
						</code></pre>
					</td>
				</tr>
			</tbody>
		</table>

		<details class="notes">
			In Sass (and in JS!) variables are *imperative*.
			There is an order of steps in their calculation,
			and expressions involving multiple variables are executed once.
			CSS variables are *reactive*: there is no order of steps,
			and expressions involving multiple variables are recalculated
			every time a value changes.
			In imperative variables, an assignment can include the variable itself,
			as it can operate in its previous value.
			In reactive variables, if an assignment refers to the variable being set,
			that is a *cycle*.
		</details>
	</article>

	<article class="future slide">
		<h1>Possible <a href="https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-816280875">future</a>?</h1>

		<pre><code>
			* {
				--depth: calc(parent(--depth) + 1);
			}

			article.alt {
				--primary-color: parent(--secondary-color);
				--secondary-color: parent(--primary-color);
			}
		</code></pre>

		<details class="notes">
			There has been a [proposal](https://github.com/w3c/csswg-drafts/issues/2864) (by yours truly)
			to add a `parent()` function to CSS, which would work similarly to `var()` but would
			return the *parent* value. It would also work with every property, not just custom properties.
			It was [accepted by the CSS WG](https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-816280875),
			though note that any implementation is likely several years away.
		</details>
	</article>

	<article class="slide">
		<h1>Combining Sass and CSS variables</h1>

		<table>
			<thead>
				<tr>
					<th>Sass</th>
					<th>Compiled CSS code</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<pre><code class="language-scss">
							:root {
								$depth: 0;
								--depth: #{$depth};

								& > * {
									$depth: $depth + 1;
									--depth: #{$depth};
								}
							}
						</code></pre>
					</td>
					<td>
						<pre><code>
							:root {
								--depth: 0;
							}

							:root > * {
								--depth: 1;
							}
						</code></pre>
					</td>
				</tr>
			</tbody>
		</table>

		<details class="notes">
			Until `parent()` arrives (which will be a while!),
			you can combine Sass (or Less) and CSS variables to get the best of both worlds.
			Later on we will see a case where this is useful.

			Note that this only goes one way: you can set CSS variables to Sass variables,
			but you cannot set Sass variables to CSS variables, as the preprocessor
			does not have enough context to compute them.
		</details>
	</article>

	<!-- <article class="isolated demo slide" style="--division: 60">
		<textarea class="language-css">
			p {
				--font-size: clamp(20px, var(--font-size, 1rem), 40px);
				font-size: var(--font-size);
			}

			.tinytiny {
				--font-size: 5px;
			}
		</textarea>
		<textarea class="language-html">
			<p class="tinytiny">
				Hello there. Let's try to make this text
				<em>really</em> small
			</p>
		</textarea>
		<details class="notes css">
			One way we may inadvertently end up with cycles is when we want to
			do math on the inherited value of a custom property.
			Another way is when we want to enforce some sort of constraint on its value,
			such as a minimum or maximum.

			Haven't seen the `clamp()` function before?
			It's pretty cool, and [supported everywhere](https://caniuse.com/css-math-functions)!
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Use fake "private" variables to enforce constraints and avoid cycles</h1>
	</article>

	<article class="browser-support slide">
		<table>
			<thead>
				<tr>
					<th></th>
					<th><img src="img/chrome-logo.svg" alt="Chrome"></th>
					<th><img src="img/firefox-logo.svg" alt="Firefox"></th>
					<th><img src="img/edge-logo.svg" alt="Edge"></th>
					<th><img src="img/safari-logo.png" alt="Safari"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th><a href="hhttps://caniuse.com/css-math-functions">min() and max()</a></th>
					<td>79</td>
					<td>75</td>
					<td>79</td>
					<td>11.1</td>
				</tr>
				<tr>
					<th><a href="hhttps://caniuse.com/css-math-functions">clamp()</a></th>
					<td>79</td>
					<td>75</td>
					<td>79</td>
					<td>13.1</td>
				</tr>
			</tbody>
		</table>
	</article> -->

	<article class="codepen slide" data-type="Practice time!" id="pie-chart">
		<h1>Flexible pie chart</h1>
		<iframe src="https://codepen.io/leaverou/embed/preview/c701c26e89a4e964e14e4b2ca0a6845a?height=265&theme-id=dark&default-tab=html,result&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
			</iframe>
	</article>

	<article class="codepen slide allow-attendee" id="flexible-pie-chart-exercise" data-type="Practice time!">
		<h1>Flexible pie chart</h1>
		<iframe scrolling="no" title="Pie chart with up to N slices (start)" src="https://codepen.io/leaverou/embed/preview/c19d45c29a103d9324e1f8ab5fbb16d1?default-tab=result&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
		<p><a href="https://codepen.io/leaverou/pen/c19d45c29a103d9324e1f8ab5fbb16d1">Open in new tab</a></p>
		<details class="notes">
			Here we have a hardcoded pie chart, which is not that useful.
			We want to make it into a reusable pie chart component, allowing the values and colors to be customized via `--colorN` and `--valueN` variables,
			with appropriate defaults so they don't all need to be set at once (if a color is not set, it should be `hsl(N * 25 80% 50%))` where N is the index of the slice).
			How can we do that? [Codepen solution](https://codepen.io/leaverou/pen/036a5e69bf8c0929b182df5a6dbac6b8)

			The pure CSS solution works, but is very repetitive. How can we use Sass (or any other preprocessor) to eliminate the repetition?
			Useful links:
			- [Sass variables](https://sass-lang.com/documentation/variables)
			- [Sass interpolation](https://sass-lang.com/documentation/interpolation)
			- [Sass @for loops](https://sass-lang.com/documentation/at-rules/control/for)
			- [Codepen solution](https://codepen.io/leaverou/pen/c701c26e89a4e964e14e4b2ca0a6845a)
		</details>
	</article>

</section>

<section>
	<header class="slide" style="--icon: 👽; --icon-2: 🪐; background-color: var(--color-aqua)">
		<h1>Space Toggle</h1>
	</header>

	<article class="slide color-reveal" id="invalid-values">
		<div class="delayed-children">
			<br>
			<div style="background: orange;">--accent-color:;</div>
			<br>
			<div style="background: transparent;">--accent-color: ;</div>
		</div>

		<pre style="margin-top: 2em; overflow: visible"><code>
			background: red;
			background: var(--accent-color, orange);
		</code></pre>
	</article>

	<article class="slide color-reveal" id="invalid-values">
		<div class="delayed-children">
			<br>
			<div style="background: linear-gradient(white, transparent) orange;">--accent-color:;</div>
			<br>
			<div style="background: linear-gradient(white, transparent);">--accent-color: ;</div>
		</div>

		<pre style="margin-top: 2em; overflow: visible"><code>
			background: red;
			background: linear-gradient(white, transparent)
			            var(--accent-color, orange);
		</code></pre>
		<details class="notes">
			While in our previous example it looked like the empty value and
			a value consisting entirely of whitespace would produce the same result,
			that is not always the case.

			Whitespace is a perfectly valid value for a custom property,
			but depending on how it's used, it may make the resulting declaration invalid
			(as in the previous case, `background: ;` is invalid), triggering IACVT.
			In fact, whitespace is very useful for optionally enabling parts of a value
			as we will see later.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Whitespace is perfectly valid, and useful in turning parts of a value off</h1>
	</article>

	<article class="isolated demo slide" id="box-shadow" style="--font-size-multiplier: .8; --division: 60;">
		<textarea class="language-css">
			* {
				--box-shadow-x: initial;
				--box-shadow-y: initial;
				--box-shadow-blur: initial;
				--box-shadow-spread: initial;
				--box-shadow-color: initial;

				box-shadow: var(--box-shadow-x, 0)
				            var(--box-shadow-y, 0)
				            var(--box-shadow-blur)
				            var(--box-shadow-spread, 0)
				            var(--box-shadow-color, currentColor);
			}

			img {
				transition: .3s;
				--box-shadow-y: .05em;
				--box-shadow-blur: .1em;
				--box-shadow-color: rgb(0 0 0 / .2);
			}

			img:hover {
				--box-shadow-blur: .5em;
				--box-shadow-y: .5em;
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			img {
				--size: 25vw;
				width: var(--size);
				height: var(--size);
				object-fit: cover;
				margin: .2em;
				padding: .2em;
				background: white;
			}
		</style>
		<textarea class="language-html">
			<img src="img/cat1.jpg" alt="">
			<img src="img/cat2.jpg" alt="">
			<img src="img/cat3.jpg" alt="">
			<img src="img/cat4.jpg" alt="">
			<img src="img/cat5.jpg" alt="">
			<img src="img/cat6.jpg" alt="">
			<img src="img/cat7.jpg" alt="">
			<img src="img/cat8.jpg" alt="">
			<img src="img/cat9.jpg" alt="">
			<img src="img/cat10.jpg" alt="">
		</textarea>
		<details class="notes">
			Here we have used a bunch of `--box-shadow-*` properties to emulate longhands for `box-shadow`.
			They all have fallbacks except `--box-shadow-blur`, so that that property can be used to "activate" the shadow
			(otherwise every single element would have a shadow).
			Notice that this is missing a `--box-shadow-inset`. How can we add that? What fallback do we use?
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Whitespace is useful as a fallback too</h1>
	</article>

	<article class="isolated demo slide" id="space-toggle" style="--division: 65;">
		<textarea class="language-html">
			<button>Flat</button>
			<button class="shiny">Shiny</button>
		</textarea>
		<textarea class="language-css">
			button {
				background: hsl(200 100% 50%);
			}

			button.shiny {
				background-image: linear-gradient(
					hsl(0 0% 100% / .3),
					transparent
				);
			}
		</textarea>
		<style data-slide media="not all" class="demo">
			button {
				border: none;
				padding: .6em 1em;
				border-radius: .2em;
				color: white;
				font: 600 100%/1 system-ui, sans-serif;
				cursor: pointer;
			}
		</style>

		<details class="notes">
			Whitespace is far more useful than meets the eye.
			Here we have a button with a "shiny" variation that has a gradient.
			However, this means that to make a button shiny,
			we need to change the HTML, which isn't always feasible.
			What if we could use a `--is-shiny` property to control whether
			our button is shiny?

			We can take advantage of the fact that whitespace is a valid value for every property,
			and use whitespace to turn off parts of a value, and the `var()` fallback to specify what these parts are.
			Then `initial` turns all these fallbacks on in one fell swoop.
			We can even alias ` ` and `initial` to `--ON` and `--OFF` to make the code more readable.
			This is called "space toggle". It's a hack, but sometimes it's the only way to do things.
			Like this example? You can find a more elaborate one [here](https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/).

			[CodePen Solution](https://codepen.io/leaverou/pen/51f5cd77ad5b9c701a33826430874b8a?editors=1100)

			----------

			Space Toggle can be very useful in certain cases, but is not without its limitations.
			The main limitation is that you can only use it to activate parts of a property,
			but you cannot provide an *"else"* clause.
			We could work around this by manually setting an `--is-not-shiny` property, but it’s clumsy.
		</details>
	</article>

	<!-- <article class="isolated demo slide" id="space-toggle" style="--division: 65; --font-size-multiplier: .8">
		<textarea class="language-css">
			button {
				border: 1px solid transparent;
				background: hsl(200 100% 50%);
			}

			button.glossy {
				background-image: linear-gradient(hsl(0 0% 100% / .3), transparent);
				border-color: rgb(0 0 0 / .1);
				box-shadow: 0 1px hsl(0 0% 100% / .8) inset,
				            0 .1em .1em -.1em rgb(0 0 0 / .2);
				text-shadow: 0 -1px 1px rgb(0 0 0 / .3);
			}

			button:hover {
				background-color: hsl(200 100% 40%);
			}

			button.glossy:active {
				box-shadow: 0 1px .2em black inset;
			}
		</textarea>
		<style data-slide media="not all" class="demo">
			button {
				padding: .6em 1em;
				border-radius: .2em;
				color: white;
				font: 600 100%/1 sans-serif;
				cursor: pointer;
			}
		</style>
		<textarea class="language-html">
			<button>Flat</button>
			<button class="glossy">Glossy</button>
		</textarea>
		<details class="notes">
			Whitespace is far more useful than meets the eye.
			Here we have a button with a glossy variation.
			However, this means that to make a button glossy,
			we need to change the HTML, which isn't always feasible.
			What if we could use a `--is-glossy` property to control whether
			our button is glossy?
		</details>
	</article> -->

	<article class="takeaway slide">
		<h1>Turn off multiple different parts of custom properties in one go with whitespace
			<div class="note">(Space Toggle)</div>
		</h1>
	</article>

	<!-- <article class="slide" data-steps="1">
		<style data-slide media="not all">
			article.slide[data-step] {
				background: yellowgreen;
			}

			article.slide[data-step] pre {
				filter: invert(100%);
				mix-blend-mode: multiply;
			}
		</style>
		<h1>What color is this?</h1>
		<pre><code>
			--accent-color: yellowgreen;
			--accent-color:;
			background: var(--accent-color, orange);
		</code></pre>
		<details class="notes">
			The empty value is always invalid. In fact it's **the only value that is
			invalid at parse time**, and not at computed value time.
			Thus, declarations that set custom properties to the empty value will
			be discarded by the cascade, and not trigger IACVT.
		</details>
	</article> -->
</section>

<section id="tokens">
	<!-- <header class="slide" style="--icon: 🪙;">
		<h1>Tokens</h1>
	</header> -->

	<!-- <article class="isolated demo slide" style="--division: 60">
		<textarea class="language-css">
			button.play {
				font-size: 200%;
				box-sizing: content-box;
				padding: .2em;
				width: 2em;
				line-height: 1;
				height: 2em;
				margin: .2em;
				color: slategray;
				border: .2em solid;
				border-radius: 50%;
			}

			button.play.initial {
				background: conic-gradient(
						at right,
						transparent 67%,
						currentColor 0 83%,
						transparent 0
					) 58% 50% / 1.1em 1.5em no-repeat hsl(220 20% 85%);
			}

			button.play.playing {
				background: linear-gradient(
					currentColor, currentColor
				) center / 1em 1em no-repeat hsl(220 20% 85%);
			}
		</textarea>
		<textarea class="language-html">
			<button title="Play" class="play initial"> </button>
			<button title="Pause" class="play playing"> </button>
		</textarea>
		<details class="notes">
			Here we used a trick with gradients to create a triangle and a square,
			since the corresponding Unicode characters are unreliable.
			However, this is mixed in with the rest of our CSS,
			making our code hard to understand and creating repetition.
			Let's abstract the symbol drawing away from the rest of the styling.
			What do you notice?
		</details>
	</article> -->


</section>

<section id="colors-section">
	<!--
	Dependencies: values are token lists
	 -->
	<header class="slide" style="--icon: 🌈; background-color: var(--accent2)">
		<h1>Colors</h1>
	</header>


	<article class="isolated demo slide" id="color-aliases">
		<textarea class="language-css">
			:root {
				--accent-color-1: hsl(200 100% 50%);
				--accent-color-2: hsl(0 70% 50%);
			}

			button {
				--color: var(--accent-color-1);
				border: .1em solid;
				border-radius: .2em;
				color: var(--color);
				background: transparent;
			}

			button:hover {
				background-color: var(--color);
				border-color: transparent;
				color: white;
			}

			button.danger {
				--color: var(--accent-color-2);
			}

			h1 {
				color: var(--accent-color-1);
			}

			h2 {
				color: var(--accent-color-2);
			}
		</textarea>
		<style data-slide media="not all" class="demo">
			button {
				padding: .6em 1em;
				margin: .1em;
				font-weight: bold;
				cursor: pointer;
			}

			h1, h2 {
				line-height: 1;
			}

			h1 {
				font-size: 300%;
				font-weight: 300;
			}

			h2 {
				font-size: 120%;
				font-weight: -.04em;
			}
		</style>
		<textarea class="language-html">
			<h1>Heading 1</h1>
			<h2>Heading 2</h2>
			<p>Text</p>
			<button>Submit</button>
			<button class="danger">Cancel</button>

			<p>More text</p>
			<button>Back</button>
			<button class="danger">Delete</button>
		</textarea>
		<details class="notes">
			Abstracting away colors can be useful to make it easier
			to change an entire theme by only changing a few variables.
			However, it needs to be done with care, because colors also have meaning.
			Here, we use red to signify that an action is destructive, a common convention.
			What happens if in a future redesign, the secondary accent color becomes green?
			Now the UI communicates the *opposite* message!

			The problem is that there is a mismatch between our *intent*
			and our code. Our code says "give me any accent color",
			while our intent was to get a red color that fits in nicely with the current theme,
			regardless of whether it's the primary or secondary color.

			One strategy to avoid this is to use *aliases*:
			in the same place you set your accent colors,
			you can also set hue-based variables.
			Then you use the accent color variables where you just need an accent color,
			and the hue based ones when you need a specific hue to communicate something.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Use both accent colors and hue-based aliases to make intent clear</h1>
		<pre><code>--color-primary: var(--color-red);</code></pre>
	</article>

	<article class="isolated demo slide" id="migraine" style="--division: 55">
		<textarea class="language-css">
			article {
				/* To-do: Make color depend on intensity
					1-5 intensity to roughly 50-0 hue (warm yellow to pure red)
				*/
				--color: hsl(0 70% 40%);
				background: var(--color);
			}

			article h2 {
				color: white;
			}

			article .content {
				background: hsl(0 0% 100% / .8);
			}

			meter {
				filter: grayscale() contrast(3);
				mix-blend-mode: screen;
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			body {
				font-size: 100%;
				line-height: 1.5;
			}

			article {
				border-radius: .3rem;
				overflow: hidden;
				margin: 1em 0;
			}

			article h2 {
				padding: .3rem .5rem;
				margin: 0;
			}

			article .content {
				padding: .1em .5rem;
			}
		</style>
		<textarea class="language-html">
			<h1>🤕 Migraine log</h1>

			<article style="--intensity:1">
				<h2>
					<time datetime="2021-05-19T20:45">May 19th, 2021 at 20:45</time>
					until <time datetime="2021-05-20T01:15">01:15</time>
					<meter max="5" value="2"></meter>
				</h2>
				<div class="content">
					<p>Started after dinner</p>
				</div>
			</article>

			<article style="--intensity:3">
				<h2>
					<time datetime="2021-05-18T10:50">May 18th, 2021 at 10:50</time>
					until <time datetime="2021-05-18T15:15">15:15</time>
					<meter max="5" value="4"></meter>
				</h2>
				<div class="content">
					<p>Upon waking up</p>
				</div>
			</article>

			<article style="--intensity:;">
				<h2>
					<time datetime="2021-05-16T15:00">May 16th, 2021 at 15:00</time>
					until <time datetime="2021-05-16T20:00">20:00</time>
					<meter max="5"></meter>
				</h2>
				<div class="content">
					<p>Headache for several hours, then turned to migraine</p>
				</div>
			</article>

			<article style="--intensity:5;">
				<h2>
					<time datetime="2021-05-12T07:00">May 12th, 2021 at 07:00</time>
					until <time datetime="2021-05-12T16:30">16:30</time>
					<meter max="5" value="5"></meter>
				</h2>
				<div class="content">
					<p>Long tail off</p>
				</div>
			</article>
		</textarea>
		<details class="notes">
			Here we have some repeated HTML to display some data,
			which could have been generated from a server-side templating script.
			We are using an `--intensity` CSS variable to communicate the
			migraine intensity to the CSS so it can be used for styling.
			Let's try to modify the CSS so that stronger migraines are more red
			and lighter ones are more yellow!

			We want `--intensity: 0` to correspond to a hue of roughly `50` (warm yellow)
			and `--intensity: 5` to correspond to a hue of `0` (pure red).

			- [Solution on CodePen](https://codepen.io/leaverou/pen/f4cdf55de3967f451b36f95306b7c8f1)
			<!-- - [Future: Safari 15+ solution](https://codepen.io/leaverou/pen/f4cdf55de3967f451b36f95306b7c8f1) -->

			-----------

			Remember this? Now that we've learned range mapping, this becomes trivial and we can even do it with precision.
			We can even just [plug the numbers in](https://css.land/ranges/?min_x=1&min_y=50&max_x=5&max_y=0&variableName=intensity)
			and voila!
		</details>
	</article>

	<article class="takeaway slide">
		<h1>We can use variables to set color components to create dynamic palettes</h1>
	</article>

	<article class="takeaway slide">
		<h1>To provide a fallback for an entire calculation, use an intermediate variable</h1>
	</article>

	<article class="isolated demo slide" id="color-variations" style="--division: 55">
		<textarea class="language-css">
			:root {
				--primary-color: hsl(250 30% 40%);
				--secondary-color: hsl(190 40% 40%);
			}

			h1 {
				color: var(--secondary-color);
			}

			article {
				background: var(--primary-color);
			}

			article h2 {
				background: var(--primary-color);
				color: white;
			}

			article a {
				color: var(--secondary-color);
				filter: brightness(60%);
			}

			article .content {
				background: hsl(0 0% 100% / .8);
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			body {
				font-size: 100%;
				line-height: 1.5;
			}

			article {
				border-radius: .3rem;
				overflow: hidden;
				margin: 1em 0;
			}

			article h2 {
				padding: .3rem .5rem;
				margin: 0;
			}

			article a {
				font-weight: bold;
			}

			article .content {
				padding: .1em .5rem;
			}
		</style>
		<textarea class="language-html">
			<h1>Lea Verou's blog</h1>

			<article>
				<h2>Blog Post 1</h2>
				<div class="content">
					<p>Blog post 1 content with <a href="https://lea.verou.me">link</a></p>
				</div>
			</article>

			<article class="alt">
				<h2>Blog Post 2</h2>
				<div class="content">
					<p>Blog post 2 content with <a href="https://lea.verou.me">link</a></p>
				</div>
			</article>
		</textarea>
		<details class="notes">
			Here we are using a variety of hacks to create color variations:
			`filter: brightness()` or semi-transparent white overlays.

			[Soon](https://drafts.csswg.org/css-color-5) we will be able to manipulate colors directly,
			but currently this is only supported in Safari (and very partially Firefox).

			What can we do meanwhile? Define more granular custom properties, what else? 😁

			Let's first go the more verbose but clear way: defining individual properties
			for each component.
			Be careful of inheritance caveats!
			How can we ensure that the resulting color is still readable?

			--------------

			Can we eliminate verbosity?
			We can store the hue and saturation in the same property.

			We can also store lighter and darker variations and use those throughout.

			---------------

			What happens if we want to make the link color lighter on hover?
			With this approach, we'd need to redefine the entire color.
			Let's look at a slightly different approach.
			Instead of specifying the link lightness inline, we could assign it to a variable as well, a local one.
			Then on hover, we can just override the variable.

			<!-- -----------------

			We can even override some components in media queries
			to create a rudimentary dark mode!
			[Read more about this technique](https://lea.verou.me/2021/03/inverted-lightness-variables/) -->
		</details>
	</article>

	<article class="takeaway slide">
		<h1>We can specify each color component via separate variables and do math with it
			<div class="note">(but it's verbose AF)</div>
		</h1>
	</article>

	<article class="takeaway slide" data-type="Aside">
		<h1>Use `clamp()` to ensure readability</h1>
	</article>

	<article class="slide" data-insert="#color-variations"></article>

	<article class="takeaway slide">
		<h1>We can store multiple color components in the same variable</h1>
	</article>

	<article class="slide" data-insert="#color-variations"></article>

	<article class="takeaway slide">
		<h1>`--background-color-*` and `--text-color-*` for independent tweaking</h1>
	</article>

	<!-- <article class="slide" data-insert="#color-variations"></article>

	<article class="takeaway slide">
		<h1>`--l-*` lightness variables for a quick & dirty dark mode
			<div class="note delayed">lch() will make this less dirty</div>
		</h1>
	</article>

	 -->


	<article class="slide">
		<h1>Color manipulation, today</h1>

		<div class="md balance-lines">
			- Separate `--primary-color-*` properties
			- Hue and saturation can be stored together
			- Precomputed variations: `--primary-color-lighter`, `--primary-color-darker` etc
			- `--background-color-*` and `--text-color-*` Properties
		</div>
		<p class="delayed note">All of the above can coexist!</p>
	</article>

	<article class="slide" data-insert="#color-variations"></article>

	<article class="slide">
		<h1 style="--emoji: '🌈'">The future is colorful</h1>

		<div class="md balance-lines">
			- Custom properties that store only colors
			- Functions to manipulate colors
			- `color-mix(in lch, var(--color) 80%, white)`
			- Relative syntax: `hsl(from var(--color) h s calc(l * 1.2))`
			- Better color spaces for adjustment: `lch(from var(--color) calc(l * 1.2) c h)`
			- Currently only Safari 15+ 😢
		</div>
	</article>
</section>
<!-- End Colors -->

<section id="types">
	<header class="slide" style="--icon: 🧮; background-color: var(--accent3)">
		<h1>Numbers <span class="amp">&</span> Lengths</h1>
	</header>

	<article class="isolated demo slide" id="viewport">
		<textarea class="language-css">
			.viewport {
				width: 50vw;
				height: 50vh;
			}
		</textarea>
		<textarea class="language-html">
			<div class="viewport">your viewport</div>
		</textarea>
		<style class="demo" data-slide media="not all">
			.viewport {
				box-sizing: border-box;
				padding: 1em;
				background: hsl(220 10% 50%);
				color: white;
			}
		</style>
		<details class="notes">
			Here we have an element whose aspect ratio we want to mirror
			the aspect ratio of our viewport.
			To avoid repeating twice what fraction of the viewport it is,
			it's a reasonable thought to try and abstract that into a variable.
			However, simple concatenation like in Sass
			does not work to get a `&lt;length>` out of that.

			----------

			We can still convert, but we need to use `calc()`.

			Yes, `calc()` is a little verbose.
			Another idea idea may be to specify the entire width in
			the variable, then only use `calc()` in `height`.
			It's a good idea, but does not work yet because we cannot divide by anything that has a unit.

			--------

			Now let's try to display the number we have through generated content.
			Why doesn't it work? How can we fix that?
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Variable values cannot contain parts of tokens</h1>
		<div class="md">
			If you write `var(--p)vw`, the browser understands `50 vw`, not `50vw`
		</div>
	</article>

	<!-- <article class="takeaway slide">
		<h1>If you can't put spaces around `var()` without your code breaking,
		your code is broken</h1>
	</article> -->

	<article class="takeaway slide">
		<h1>Variable values are token lists</h1>
	</article>

	<article class="slide dont-resize" id="token-examples">
		<h1>What’s a token?</h1>

		<div class="delayed-children">
			<code title="Keywords">none</code>
			<code title="Keywords">no-repeat</code>
			<code title="Numbers">42.1</code>
			<code title="Dimension tokens (number + unit)">12px</code>
			<code title="Dimension tokens (number + unit)">360deg</code>
			<code title="Percentages">5%</code>
			<code title="Separators">,</code>
			<code title="Separators">/</code>
			<code title="A function name and opening paren">rgb(</code>
			<code title="A function name and opening paren">image-set(</code>
			<code title="A closing paren">)</code>
			<code title="Hash token">#ff0066</code>
			<code title="Hash token">#container</code>
			<code title="Strings">"YOLO"</code>
			<code title="Unquoted URLs">url(kitten.jpg)</code>
			<code title="Whitespace" class="language-none">&nbsp;	&nbsp;	&nbsp; &nbsp; &nbsp;</code>
		</div>
		<details class="notes">
			Want to know more? Here is [the source](https://drafts.csswg.org/css-syntax-3/#token-diagrams)!
		</details>
	</article>

	<article class="slide valid-quiz">
		<h1>Valid or invalid?</h1>

		<pre class="delayed invalid"><code>
			--type: linear-gradient(;
			background: var(--type) white, black );
		</code></pre>

		<details class="notes">
			Even though `linear-gradient(` is a single token, this will not work
			because variable values [cannot contain mismatched parens or braces](https://drafts.csswg.org/css-variables/#syntax)
		</details>
	</article>

	<article class="isolated demo slide">
		<textarea class="language-css">
			html {
				--type: linear-gradient(;
				background: var(--type) white, black );
				color: red;
			}
		</textarea>
		<textarea class="language-html">
			<h1>Hello</h1>
		</textarea>
	</article>

	<article class="takeaway slide">
		<h1>Variable values cannot contain unmatched `()`, `[]`, or `{}`
			<div class="note delayed">and they severely break parsing!</div>
		</h1>
	</article>

	<article class="slide valid-quiz">
		<h1>Valid or invalid?</h1>

		<pre class="delayed"><code>
			--stops: white, black,;
			background: linear-gradient( var(--stops) red);
		</code></pre>

		<details class="notes">
			This works fine, because `,` is just another token
		</details>
	</article>
	<article class="slide valid-quiz">
		<h1>Valid or invalid?</h1>

		<pre class="delayed"><code>
			--to: to;
			background: linear-gradient( var(--to) right, white, black );
		</code></pre>

		<details class="notes">
			This works fine, because `to` is just another token
		</details>
	</article>

	<article class=" isolated demo slide" id="currying" style="--division: 60;">
		<textarea class="language-css">
			* {
				--3d-with-shadow: initial;
				text-shadow: 1px 1px hsl(0 0% 80%),
				             2px 2px hsl(0 0% 75%),
				             3px 3px hsl(0 0% 70%),
				             4px 4px hsl(0 0% 65%),
				             4px 4px var(--3d-with-shadow);
			}

			h1 {
				color: hsl(0 0% 90%);
				--3d-with-shadow: .1em rebeccapurple;
			}
		</textarea>
		<style data-slide media="not all" class="demo">
			body {
				min-height: 100vh;
				display: flex;
			}

			h1 {
				margin: auto;
				font-size: 500%;
			}
		</style>
		<textarea class="language-html">
			<h1>Deep purple text</h1>
		</textarea>
		<details class="notes">
			A useful application of the fact that variable values can contain
			multiple tokens, is in creating "single property mixins", i.e.
			prefilling part of the value of a property.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>CSS Variables let you create <br>single property mixins
		<div class="delayed note">(like function currying)</div></h1>
	</article>

	<article class="slide" data-insert="#viewport"></article>

	<article class="slide">
		<table>
			<tr>
				<td>Number → unit: </td>
				<td><code class="language-css">calc(var(--foo) * 1px)</code></td>
			</tr>
			<tr>
				<td>Unit → number:</td>
				<td style="font-size: 100px"><span class="poop"></span><span class="poop"></span><span class="poop"></span></td>
			</tr>
		</table>
	</article>

	<article class="takeaway slide">
		<h1>Use variables for pure data, not CSS values</h1>
		<details class="notes">
			This is a good practice regardless of the conversion issues,
			as it ensures better separation of concerns.
		</details>
	</article>

	<article class="isolated demo slide" id="math-conditional" style="--division: 55">
		<textarea class="language-css">
			article {
				background: hsl(250 30% 40%);
			}

			article.dark {
				background: hsl(250 30% 60%);
			}

			article h2 {
				color: white;
			}

			article.dark h2 {
				color: black;
			}

			article .content {
				background: hsl(0 0% 100% / .8);
			}

			article.dark .content {
				background: hsl(0 0% 100% / .2);
				color: white;
			}
		</textarea>
		<style class="demo" data-slide media="not all">
			body {
				font-size: 100%;
				line-height: 1.5;
			}

			article {
				border-radius: .3rem;
				overflow: hidden;
				margin: 1em 0;
			}

			article h2 {
				padding: .3rem .5rem;
				margin: 0;
			}

			article .content {
				padding: .1em .5rem;
			}
		</style>
		<textarea class="language-html">
			<h1>Lea Verou's blog</h1>

			<article>
				<h2>Blog Post 1</h2>
				<div class="content">
					<p>Blog post 1 content</p>
				</div>
			</article>

			<article class="dark">
				<h2>Blog Post 2</h2>
				<div class="content">
					<p>Blog post 2 content</p>
				</div>
			</article>
		</textarea>
		<details class="notes">
			Here we have a dark variation with many overrides,
			which requires a class change.
			Can we use a single `--is-dark` variable for this?
		</details>
	</article>

	<article class="slide takeaway">
		<h1>You can use 0/1 toggles for any numeric value</h1>
		<pre><code>
			--if-not-foo: calc(1 - var(--if-foo));
			property: calc(
				var(--if-foo)     * value_if_true +
				var(--if-not-foo) * value_if_false
			);
		</code></pre>

		<details class="notes">
			Interested in finding out more about ways to work around conditionals in CSS?

			Here are a few good articles:
			- [DRY Switching with CSS Variables: The Difference of One Declaration](https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/) by Ana Tudor
			- [DRY State Switching With CSS Variables: Fallbacks and Invalid Values](https://css-tricks.com/dry-state-switching-with-css-variables-fallbacks-and-invalid-values/) by Ana Tudor
			- [Logical Operations with CSS Variables](https://css-tricks.com/logical-operations-with-css-variables/) by Ana Tudor
			- [CSS Switch-Case Conditions](https://css-tricks.com/css-switch-case-conditions/) by Yair Even Or
		</details>
	</article>

	<article class="isolated horizontal demo slide" id="svg-eyes">
		<textarea class="language-css">
			.iris {
				cx: 50px;
			}
		</textarea>
		<textarea class="language-html">
			<svg viewBox="0 0 250 100">
				<clipPath id="white-clip">
					<path id="white-path" d="M1,50 a65,80 0 0,1 100,0 a80,80 0 0,1 -100,0 Z" />
				</clipPath>
				<use id="eye-white" href="#white-path" />
				<use href="#eye-white" x="148" />
				<circle id="iris" class="iris" cx="50" cy="45" r="18" clip-path="url(#white-clip)" />
				<use class="iris" href="#iris" x="148" />
			</svg>
		</textarea>
		<style data-slide media="not all" class="demo">
			:root {
				background: hsl(20, 40%, 70%);
			}

			svg {
				width: 90vw;
			}

			#eye-white {
				fill: white;
			}

			.iris {
				stroke: hsl(200, 50%, 50%);
				stroke-width: 14;
				fill: black;
			}

			.second-eye {
				x: 150px;
			}
		</style>
		<details class="notes">
			Using variables for data also helps make code more readable.
			It makes much more sense to change a `--look` variable from
			`0` to `1` than from `25px` to `75px`,
			and affords more flexibility for redesigns.
			However, this means we need to map that number to the value we need
			at the point of usage. How can we do that?
		</details>
	</article>

	<!-- <article class="takeaway slide">
		<h1>
			Yes, custom properties work in SVG too!
			<div class="note">Caveat: but not in presentational attributes!</div>
		</h1>
	</article> -->

	<article class="slide takeaway">
		<h1>0 - 1 Range mapping</h1>
		<pre><code>
			property: calc(
				         var(--p)  * min +
				calc(1 - var(--p)) * max
			);
		</code></pre>
		<details class="notes">
			The same formula as 0/1 toggles actually works for entire 0 - 1 ranges,
			as it's actually just the linear interpolation formula.
			Note that min and max here just represent the value you want to get
			if `--p` is 0 and 1, respectively. It is not necessary that min &leq; max.
		</details>
	</article>

	<!-- <article class="slide allow-attendee" data-type="Math time!" id="range-mapping">
		<h1>0 to 1 Range mapping</h1>
		<ul>
			<li>
				For every range, there is a
				<code>calc(a * var(--p) + b)</code> expression
				that will produce that range while <code>--p</code> ranges from <code>0</code> to <code>1</code>.
				How can we find <code>a</code> and <code>b</code>?
			</li>
			<li class="delayed">Let <var>min</var> and <var>max</var> the min and max of the range.

				<ol class="math">
					<li>a &times; 0 + b = min</li>
					<li>b = min</li>
				</ol>
			</li>
			<li class="delayed">Now let’s find <var>a</var>:
				<ol class="math">
					<li>a &times; 1 + b = max</li>
					<li>a &times; 1 + min = max</li>
					<li>a = max - min</li>
				</ol>
			</li>
			<li class="delayed">
				Therefore, <code>calc((max - min) * var(--p) + min)</code> maps to that range
			</li>
		</ul>
	</article> -->

	<!-- <article class="slide allow-attendee" data-type="Math time!" id="ranges-with-midpoint">
		<h1>-1 to 0 to 1 Range mapping</h1>
		<ul>
			<li>
				Same logic:
				<ol class="math">
					<li>a × -1 + b = min</li>
					<li>-a + b = min</li>
					<li>b = min + a</li>
				</ol>
			</li>
			<li class="delayed">Now let’s find <var>a</var>:
				<ol class="math compact">
					<li>a × 1 + b = max</li>
					<li>a × 1 + min + a = max</li>
					<li>a × 2 = max - min</li>
					<li>a = (max - min) / 2</li>
				</ol>
			</li>
			<li class="delayed">Now let’s find <var>b</var>:
				<ol class="math compact">
					<li>b = min + a</li>
					<li>b = min + (max - min) / 2</li>
					<li>b = min + max / 2 - min / 2</li>
					<li>b = min / 2 + max / 2</li>
					<li>b = (min + max) / 2</li>
				</ol>
			</li>
			<li class="delayed">
				Therefore, <code>calc((max - min) / 2 * var(--p) + (max + min) / 2)</code> maps to that range
			</li>
		</ul>
	</article>

	<article class="slide allow-attendee" data-type="Math time!">
		<h1>
			-1-0-1 Range mapping
			<div class="note">Example for min = 25px and max = 75px</div>
		</h1>

		<ul>
			<li>
				<ol class="math">
					<li>a = (max - min) / 2</li>
					<li>a = (75px - 25px) / 2</li>
					<li>a = 50px / 2</li>
					<li>a = 25px</li>
				</ol>
			</li>
			<li class="delayed">
				<ol class="math">
					<li>b = (min + max) / 2</li>
					<li>b = (25px + 75px) / 2</li>
					<li>b = 100px / 2</li>
					<li>b = 50px</li>
				</ol>
			</li>
			<li class="delayed">
				Therefore, <code>calc(25px * var(--look) + 50px)</code>
				is the expression we need
			</li>
		</ul>
	</article>

	<article class="slide" data-insert="#svg-eyes"></article> -->

	<article class="isolated horizontal demo slide" id="shadow-range">
		<textarea class="language-css">
			body {
				background: radial-gradient(circle at 0% 20%, white, transparent 50vw) hsl(0 0% 47%);
			}

			h1 {
				color: hsl(0 0% 50%);
				text-shadow: 1em .3em .2em black;
				font-size: 50vh;
			}
		</textarea>
		<textarea class="language-html">
			<h1>404</h1>
		</textarea>
		<style data-slide media="not all" class="demo">
			body {
				margin: 0;
				display: flex;
				min-height: 100vh;
			}

			h1 {
				margin: auto;
			}
		</style>
		<details class="notes">
			Using abstract 0 to 1 or -1 to 1 ranges can also be immensely useful
			when we want the same variable to control multiple different things.
			For example here, we want the gradient color stop to go from `0%` to `100%`
			while the horizontal text shadow offset goes from `1em` to `-1em`.

			Note that our <var>min</var> and <var>max</var> variables
			do not necessarily satisfy <var>min</var> < <var>max</var>!

			[Codepen solution](https://codepen.io/leaverou/pen/9ba1b5e2fb7fbb320c3ab244df7baf3d)

			------------

			Now let's animate `--p` from `-1` to `1`!

			[Codepen solution](https://codepen.io/leaverou/pen/9c12ab442ff91d44a0bd0ff945a29847)

			Credit where it’s due: [This is the codepen](https://codepen.io/jh3y/pen/MWbvzKb)
			that gave me the inspiration for this example.
			It's a bit more complex, but also a lot nicer.
		</details>
	</article>

	<article class="slide" id="general-linear-range-mapping">
		<h1>General linear range mapping</h1>

		<div>If our variable is x, we basically want to find <var>a</var> and <var>b</var> such that</div>
		<div>
			<span class="math">a × min_x + b = min_y</span> <em>(1)</em>
			<br>
			<span class="math">a × max_x + b = max_y</span> <em>(2)</em>
		</div>

		<div class="delayed">
			We subtract <em>(2)</em> from <em>(1)</em> to find <var>a</var>:

			<ol class="math">
				<li>
					a × (max_x - min_x) = max_y - min_y
				</li>
				<li>
					a = (max_y - min_y) / (max_x - min_x)
				</li>
			</ol>
		</div>

		<div style="margin-top: 1em" class="delayed">
			Then we substitute <var>a</var> into <em>(1)</em> to find <var>b</var>:
			<ol class="math">
				<li>b = min_y - a × min_x</li>
				<li>
					b = min_y - (max_y - min_y) / (max_x - min_x) × min_x
				</li>
			</ol>
		</div>
	</article>

	<article class="iframe slide" data-src="https://css.land/ranges"></article>

	<article class="slide" data-insert="#migraine"></article>

	<article class="slide takeaway">
		<h1>Range mapping allows the same variable to control multiple things</h1>
	</article>


	<!-- <article class="isolated horizontal demo slide" id="viewport">
		<textarea class="language-css">
			* {
				width: var(--width);
				height: calc(var(--width) / var(--aspect-ratio));
			}

			.widescreen {
				--aspect-ratio: 16 / 9;
				--width: 16em;
			}
		</textarea>
		<textarea class="language-html">
			<div class="widescreen">I have a fixed aspect ratio</div>
		</textarea>
		<style class="demo" data-slide media="not all">
			.widescreen {
				box-sizing: border-box;
				padding: 1em;
				margin: 1em;
				background: hsl(220 10% 50%);
				color: white;
			}
		</style>
		<details class="notes css">
			Here we were trying to emulate the new `aspect-ratio` property
			since it's not supported everywhere yet.
			However, it doesn’t seem to work. Can you see why?
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Wrap `var()` in `calc()` in `()` if it can contain calculations</h1>
	</article> -->

	<!-- <article class="isolated demo slide" style="--division: 60">
		<textarea class="language-css">
			.container {
				font-size: calc(2rem + 1vmin);
			}

			.bigger {
				font-size: 250%;
			}

			.bigger p {
				font-size: 40%;
			}
		</textarea>
		<textarea class="language-html">
			<div class="container">
				<p>Base text</p>

				<div class="bigger">
					This text is bigger

					<p>This text should be
						the same size as the base</p>
				</div>
			</div>
		</textarea>
		<style data-slide media="not all" class="demo">

		</style>
		<details class="notes">
			Here we have a child element that needs to reset its font size back to
			the grandparent size, whatever that is.
			In this case we know how to reset it, but this solution is fragile.
			In other cases we can't do this at all, e.g. if the parent font size is set to `0`.
			Can we use a variable set to `1em` on the parent? Let's see what happens.

			The computed value of unregistered properties is the specified value
			with any variables substituted.
			This means that any relative units, such as `em` are resolved at the point of usage,
			not the point of definition.
			Registering the property changes this,
			which means you can use it to grab relative values on any ancestor!

			However, that doesn't seem to work with `currentColor`,
			which is resolved at used value time.
		</details>
	</article> -->

	<!-- <article class="isolated demo slide" style="--division: 60" id="speech">
		<textarea class="language-css">
			.speech {
				position: relative;
				background: hsl(220 10% 85%);
			}

			/* Speech bubble pointer */
			.speech::before {
				content: "";
				position: absolute;
				top: 100%; right: 1.5em;
				width: 1em; height: 1em;
				clip-path: polygon(0 0, 100% 100%, 80% 0);
				background: inherit;
			}

			.speech::after {
				content: var(--character, '🙂');
				position: absolute;
				top: calc(100% + .5em);
				right: 0;
				font-size: 200%;
			}
		</textarea>
		<textarea class="language-html">
			<div class="container">
				<blockquote class="speech" style="--character: '😈'">
					But what if — just hear me out — what if you
					<em>registered</em> your custom property?
				</blockquote>
			</div>
		</textarea>
		<style data-slide media="not all" class="demo">
			.speech {
				padding: .5em;
				border-radius: .3em;
				max-width: 30ch;
			}
		</style>
		<details class="notes">
			Here we have a child element (our generated content)
			that needs to size its offset based on the parent font size.
			However, just using the `em` unit doesn’t help: it refers to its own font size.

			In this case we know how to reset it, but this solution is fragile.
			In other cases we can't do this at all, e.g. if the current font size is set to `0`.
			Can we use a variable set to `1em` on the parent? Let's see what happens.

			The computed value of unregistered properties is the specified value
			with any variables substituted.
			This means that any relative units, such as `em` are resolved at the point of usage,
			not the point of definition.
			Registering the property changes this,
			which means you can use it to grab relative values on any ancestor!
			[Here is the solution](https://codepen.io/leaverou/pen/XWMZewB?editors=1100)
			to this exercise.

			Note that this approach doesn't work with `currentColor`,
			which is resolved at used value time.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>
			Relative values inherit as syntax tokens
			*unless* the property is registered
		</h1>
	</article>

	<article class="takeaway slide">
		<h1>
			Registering a property as `&lt;length>` allows us to pass down
			ancestor font sizes!
		</h1>
	</article> -->
</section>
<!-- End Numbers & lengths -->


<section>
	<header class="slide" style="--icon: 📲; background-color: var(--accent2)">
		<h1>Responsive Design</h1>
	</header>

	<article class="isolated slide demo no-base-css" id="responsive" style="--font-size-multiplier: .8">
		<textarea class="language-css">
			body {
				display: grid;
				gap: .3em;
				font-size: 90%;
			}

			section {
				background: silver;
				padding: 1.2em;
			}

			section:nth-of-type(3n + 4) {
				background-color: #f06;
				color: hsl(0 0% 100% /.6);
			}

			section:nth-last-of-type(2) {
				background-color: orange;
			}

			@media (min-width: 600px) {
				body {
					gap: .5em;
					font-size: 110%;
					grid-template-columns: repeat(3, 1fr);
				}

				section {
					padding: 1.6em;
				}

				section:nth-of-type(3n + 4) {
					grid-column-end: span 3;
				}

				section:nth-last-of-type(2) {
					grid-column-end: span 2;
				}
			}
		</textarea>
		<textarea class="language-html">
			<section>
				<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
			</section>
			<section>
				<p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
			</section>
			<section>
				<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
			</section>

			<section>
				<p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
				<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
				<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
				<p>Drops of rain could be heard hitting the pane, which made him feel quite sad.</p>

			</section>

			<section>
				<p>"How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was.</p>
			</section>
			<section>
				<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before.</p>
			</section>
		</textarea>
		<style data-slide media="not all" class="demo">
			body {
				padding: 1em;
				font-weight: bold;
				font-family: Helvetica Neue, Segoe UI, sans-serif;
			}

			section {
				box-sizing: border-box;
				hyphens: auto;
			}

			p:first-child {margin-top: 0}
			p:last-child {margin-bottom: 0}
		</style>
		<details class="notes">
			Custom properties make responsive design easier,
			but there are many different ways to use them.
			The obvious way is using variables in our base CSS,
			and overriding them as needed in the media query.
			This tremendously reduces the amount of overrides needed, making code
			far more maintainable.

			------------

			However, it does mean we still need to hunt down in multiple places for the
			value of each style. Another strategy to keep everything together is to
			use different properties for each breakpoint, e.g. `--font-size-large`

			When the adjustment is relative, it means that
			we need to adjust both when the base value changes.
			One way to avoid this is to define optional *scaling factors* in our MQs, and
			use them defensively in our base CSS.

			[Codepen solution](https://codepen.io/leaverou/pen/77d09a1015c57d8d6f40c0fbfda3d839?editors=1100)
		</details>
	</article>

	<article class="takeaway slide" id="responsive-takeaway">
		<h1>RWD strategy 1</h1>

		<p>Base CSS uses <code>var()</code> and sets defaults, MQs override</p>

		<pre><code>
			margin: var(--gutter);
			padding: calc(.6em + var(--gutter) * 2);
		</code></pre>

		<details class="notes">
			Make sure the relationships you express are real and not spurious correlations that just *happen* to be true for your current numbers.
			I.e. let's take this case. The code indicates that padding is double the gutter plus a little bit.
			Is that actually our intention? Will it still be true if we add more breakpoints
			or is it just a false relationship we extracted by trying to make `1.6em` and `1.2em` depend on their corresponding gutter
			(and for two data points, it is nearly always possible to extract such spurious relationships).
		</details>
	</article>

	<article class="slide" data-insert="#responsive"></article>

	<article class="takeaway slide" id="responsive-takeaway">
		<h1>RWD strategy 2</h1>

		<p>Base CSS sets different custom properties for each breakpoint, MQs use them</p>

		<pre><code>
			font-size: 90%;
			--font-size-large: 110%;
		</code></pre>
	</article>

	<article class="takeaway slide" id="responsive-takeaway">
		<h1>RWD strategy 3</h1>

		<p>Base CSS multiplies by optional scaling factor, MQs set said factor</p>

		<pre><code>
			font-size: calc(90% * var(--font-size-scale, 1));
		</code></pre>

		<details class="notes">
			Want to dig in more?
			[This article](https://css-tricks.com/responsive-designs-and-css-custom-properties-defining-variables-and-breakpoints/)
			by Mikolaj Dobrucki is quite good.

			Note that these techniques are useful every time you need to create variations of a design,
			not just for RWD. E.g. multipliers can be useful when you have multiple instances of a component with different content,
			and need to vary some of them. In fact, these slides use a similar technique to vary the font size of the live demos!
		</details>
	</article>

</section>
<!-- End RWD-->

<section id="animations">
	<header class="slide" style="--icon: ⏳; background-color: var(--accent3)">
		<h1>Transitions <span class="amp">&</span> Animations</h1>
	</header>

	<article class="isolated demo slide" id="gallery-transition" style="--division: 55">
		<textarea class="language-css">
			img {
				width: 20vw;
				aspect-ratio: 1 / 1;
				object-fit: cover;
				transform: scale(var(--scale, 1))
				           rotate(var(--rotate, 0deg));
				transition: .5s;
			}

			img:hover {
				background: hsl(50 90% 90%);
				--scale: 1.2;
			}

			img:nth-child(odd) { --rotate: 3deg; }
			img:nth-child(3n+1) { --rotate: -2deg; }
		</textarea>
		<style class="demo" data-slide media="not all">
			img {
				margin: .3em;
				padding: .2em;
				background: white;
				box-shadow: 0 .05em .1em rgb(0 0 0 / .1);
			}
		</style>
		<textarea class="language-html">
			<img src="img/cat1.jpg" alt="">
			<img src="img/cat2.jpg" alt="">
			<img src="img/cat3.jpg" alt="">
			<img src="img/cat4.jpg" alt="">
			<img src="img/cat5.jpg" alt="">
			<img src="img/cat6.jpg" alt="">
			<img src="img/cat7.jpg" alt="">
			<img src="img/cat8.jpg" alt="">
			<img src="img/cat9.jpg" alt="">
			<img src="img/cat10.jpg" alt="">
		</textarea>
		<details class="notes">
			Remember this gallery?
			Note how the hover style triggers a smooth transition.
			But what if we wanted to apply different parameters to the `--scale`
			transition and different ones to the background one?
			For example, if we wanted the scale transition to bounce,
			by using [`cubic-bezier()`](https://cubic-bezier.com/#.1,.6,.6,2)
			values > 1.
			We don’t want our background to bounce too, cause that’s just *weird*.
			However, restricting our transition to `--scale` does not have the intended result…

			---------------

			Can we enable transitions and animations on the custom property itself?
			Yes, if we can register it with a syntax!
		</details>
	</article>

	<article class="slide">
		<blockquote style="width: 21em">
			<p>[CSS variables] can even be <strong>tran&shy;sitioned or ani&shy;mated</strong>, but since the UA has no way to interpret their con&shy;tents, <strong>they always use the "flips at 50%"</strong> behav&shy;ior that is used for any oth&shy;er pair of val&shy;ues that can’t be intelligently interpolated.</p>
			<p class="cite"><a href="https://w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a></p>
		</blockquote>
	</article>

	<article class="takeaway slide">
		<h1>Custom properties can trigger transitions but do not interpolate by default</h1>
	</article>

	<article class="slide" data-insert="#gallery-transition"></article>

	<article class="takeaway slide">
		<h1>*Registered* custom properties can interpolate!</h1>
	</article>

	<article class="isolated demo slide" id="animation" style="--division: 60">
		<textarea class="language-css">
			@keyframes bg {
				from { background-color: yellow; }
				to { background-color: #0ca; }
			}

			:root {
				--accent-color-1: yellow;
				--accent-color-2: #0ca;

				animation: 2s bg infinite alternate;
			}
		</textarea>
		<textarea class="language-markup">
			<h1>CSS Variables in @keyframes?</h1>
		</textarea>
		<details class="notes">
			Here we are animating from one color to another.
			Let's use our two main colors instead of repeating them.
			This works just fine.

			Animating the custom properties themselves requires registration however.
		</details>
	</article>

	<article class="takeaway slide" id="animation-poop">
		<h1>`var()` in keyframes works just fine</h1>
	</article>

	<article class="isolated horizontal demo slide">
		<textarea class="language-css">
			@keyframes progress {
				to {
					background: linear-gradient(to right, black 100%, white);
				}
			}

			:root {
				background: linear-gradient(to right, black 0%, white);
				animation: 1s progress infinite alternate;
			}
		</textarea>
		<details class="notes">
			Interpolating parts of non-interpolatable values is a prime use case for
			animating custom properties, and gradients are possibly the most common such case.
			Even if gradients *were* interpolatable, animating custom properties is usually preferable,
			as it allows for more [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) code.

			Let's modify this code to do a cool image reveal!

			Interested in more examples of animating gradients?
			Ana Tudor has written [a whole article](https://css-tricks.com/the-state-of-changing-gradients-with-css-transitions-and-animations/) about it.

			And when it comes to animating custom properties in general,
			[this article](https://css-tricks.com/exploring-property-and-its-animating-powers/) by Jhey Tompkins is full of cool examples and interesting techniques.

			A word of caution however: Do *not* use this for long-running animations. It can be a performance hog in today's browsers.
		</details>
	</article>

	<!-- <article class="isolated demo slide" style="--division: 65">
		<textarea class="language-css">
			:root {
				background:repeating-conic-gradient(
					from 0deg,
					transparent 0 2.5%,
					hsl(0 0% 100% / .3) 0 5%
				) slategray;
				height: 100vh;
			}
		</textarea>
		<details class="notes">
			Here we have a typical starburst background, generated with a repeating conic gradient.
			Let’s add some styling hooks through custom properties.
			What properties would you use?

			Now let's try to make it rotate by increasing the `from` argument
			(hint: you can just click on it and press the up/down arrows to do that).

			Let's create a CSS animation to produce the same effect.
			Which of the other custom properties might be fun to animate?
		</details>
	</article> -->

	<article class="slide" data-insert="#shadow-range"></article>

	<!-- <article class="isolated horizontal demo slide" id="autoprefixing" style="--division: 60;">
		<textarea class="language-css">
			* {
				--backdrop-filter: initial;
				-webkit-backdrop-filter: var(--backdrop-filter);
				backdrop-filter: var(--backdrop-filter);
			}

			section {
				background: hsl(0 0% 100% / .5);
				--backdrop-filter: blur(5px);
			}
		</textarea>
		<style data-slide media="not all" class="demo">
			body {
				background: url(img/cat5.jpg) center / cover;
				display: flex;
				min-height: 100vh;
				margin: 0;
			}

			section {
				padding: 1em;
				margin: auto;
				border-radius: .2em;
			}
		</style>
		<textarea class="language-html">
			<section>
				<p>Content</p>
			</section>
		</textarea>
		<details class="notes">
			Custom properties can help with vendor prefixes.
			For example, `backdrop-filter` still needs a `-webkit-` prefix
			in [certain browsers](https://caniuse.com/css-backdrop-filter).
		</details>
	</article>

	<article class="takeaway slide">
		<h1>CSS Variables enable you to <br>set multiple properties at once
			<div class="note">but they do not interpolate!</div>
		</h1>
	</article> -->

	<article class="codepen slide" id="staggered">
		<iframe scrolling="no" title="Staggered slide in" src="https://codepen.io/leaverou/embed/preview/wvJpEMQ?height=265&theme-id=dark&default-tab=css,result&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
		<details class="notes">
			It is common to want to apply various effects, especially animations,
			that are different depending on the index of an element among its siblings.
			Staggered animations are a common example.
			We can use Sass to define a generic `--index` property that we can then
			use wherever we want in our CSS.

			Going further: How does our code handle the case of exceeding the number of siblings
			we have accounted for? Can we improve things?
		</details>
	</article>

	<article class="takeaway slide">
		<h1>A generic `--index` can be used for many effects, including staggered animations</h1>
	</article>
</section>
<!-- End Animations -->


<!-- <article class="isolated demo slide" id="homework-buttons">
	<textarea class="language-css">
		button {
			padding: .6em 1em;
			margin: .1em;
			border: .1em solid transparent;
			border-radius: .2em;
			color: white;
			font: 600 100%/1 sans-serif;
			cursor: pointer;
		}

		button:not(.primary) {
			border-color: currentColor;
			color: hsl(200 100% 50%);
			background: transparent;
		}

		button.primary,
		button:not(.primary):hover {
			background-color: hsl(200 100% 50%);
		}

		button.primary:hover {
			background-color: hsl(200 100% 40%);
		}

		button.danger:not(.primary) {
			color: hsl(0, 70%, 50%);
		}

		button.danger.primary,
		button.danger:hover {
			background: hsl(0, 70%, 50%);
		}

		button.danger.primary:hover {
			background: hsl(0, 70%, 40%);
		}

		button.primary.primary,
		button:hover:hover {
			border-color: transparent;
			color: white;
		}
	</textarea>
	<textarea class="language-html">
		<p>Plain buttons:</p>
		<button class="primary">Submit</button>
		<button>Back</button>
		<p>Danger buttons:</p>
		<button class="primary danger">Delete</button>
		<button class="danger">Cancel</button>
	</textarea>
	<details class="notes">
		Here we have a set of buttons with two orthogonal variations,
		as is pretty common in many design systems and frameworks (these were inspired by Bootstrap).

		Q1: Notice that there is a lot of repetition.
		Your homework for next week is to refactor this CSS to reduce repetition,
		improve maintainability,
		and make it easier to create more variations.
		([Solution](https://codepen.io/leaverou/pen/f84043e1c5fcc0e58e15db1cbe0674be?editors=1100))

		Q2: Going further, can we toggle these variations by setting an
		`--is-dangerous` and/or `--is-primary` declaration only?

		If you want to go even further, you could explore adding other potential variations,
		you could look [here](https://getbootstrap.com/docs/4.0/components/buttons/) for inspiration.
	</details>
</article> -->


<section>
	<header class="slide" style="--icon: 🎻; xbackground-color: var(--accent3)">
		<h1>Strings</h1>
	</header>

	<article class="isolated demo slide" id="prepend">
		<textarea class="language-html">
			<h1 style="--emoji: 🌈">The future is colorful</h1>
		</textarea>
		<textarea class="language-css">
			h1::before,
			h1::after {
				content: var(--emoji);
				margin: 0 .2em;
			}

			h1::after {
				transform: scaleX(-1);
			}
		</textarea>

		<details class="notes">
			Here we want to prepend and append an emoji after certain headings, so we tried using a custom property to specify what the emoji should be.
			However, it doesn’t seem to be working. What did we do wrong?
		</details>
	</article>

	<!-- <article class="isolated demo slide" id="prepend">
		<p class="hint">inline style too</p>
		<textarea class="language-css">
			@property --prepend {
				syntax: "<string> | none";
				initial-value: none;
				inherits: false;
			}

			::before {
				content: var(--prepend);
			}

			.currency {
				font-weight: bold;
				color: hsl(220 10% 30%)
			}

			.currency.usd {
				--prepend: "$";
			}

			a {
				--prepend: "🐦";
				color: hsl(210 10% 30%);
				text-decoration: none;
			}
		</textarea>
		<textarea class="language-html">
			<p>
				If childcare costs <span class="currency usd">18</span>/hour,
				you pay <span class="currency usd">144</span>/day,
				just to be able to work.
			</p>
			<p>
				Find me on <a href="https://twitter.com">Twitter</a>.
			</p>
		</textarea>
	</article> -->

	<article class="takeaway slide">
		<h1>If your custom property contains a string, don’t forget the quotes!</h1>
	</article>

	<article class="slide" data-insert="#viewport"></article>

	<article class="takeaway slide">
		<h1>`content` only accepts strings. You can convert numbers to strings via `counter-reset`.</h1>
		<details class="notes">
			For the same reason, `counter()` returns a string, and thus cannot be used in calculations.
		</details>
	</article>

	<article class="isolated demo slide" id="bar-chart-percentage">
		<textarea class="language-css">
			.bar-chart > div {
				height: var(--p);
			}

			.bar-chart > div::before {
				content: "5%";
			}
		</textarea>
		<textarea class="language-html">
			<div class="bar-chart">
				<div style="--p: 95%">A</div>
				<div style="--p: 100%">B</div>
				<div style="--p: 95%">C</div>
				<div style="--p: 38%">D</div>
				<div style="--p: 84.21%">E</div>
				<div style="--p: 49%">F</div>
			</div>
		</textarea>
		<style data-slide media="not all" class="demo">
			@import url("css/bar-chart.css");
			:root {
				background: hsl(200, 15%, 20%);
			}
		</style>
		<details class="notes">
			Let's try to use this trick to display a percentage on each bar.
			What problem do you see?

			----------

			We can convert any number to an integer by assigning it to a
			property registered as `&lt;integer>` and doing some (even trivial)
			math with it to trigger the conversion.

		</details>
	</article>

	<article class="left speech slide" style="--character: '😞'">
		<h1>The counter trick only works with integers. Sorry!</h1>
		<!-- <details class="notes">
			But what if we could convert the number to an integer?
			Ana Tudor has [discovered](https://twitter.com/anatudor/status/1399849494628425734)
			a very clever way to do that.
		</details> -->
	</article>

	<article class="devil speech slide">
		<h1>But what if we convert the number to an integer?</h1>
	</article>

	<article class="slide" data-insert="#bar-chart-percentage"></article>

	<article class="takeaway slide">
		<h1>Convert a number to an integer by assigning it to a property registered as `"&lt;integer>"` inside `calc()`</h1>
	</article>

	<article class="slide">
		<pre><code>
			/* Round: */
			--integer: calc(var(--number));

			/* Floor: */
			--integer: calc(var(--number) - 0.5);

			/* Ceil: */
			--integer: calc(var(--number) + 0.5);
		</code></pre>
		<p class="credit">Credit to [Ana Tudor](https://twitter.com/anatudor/status/1399849494628425734) for discovering this trick.</p>
		<details class="notes">
			[CSS Values 4](https://www.w3.org/TR/css-values-4/) includes a
			[`round()` function](https://www.w3.org/TR/css-values-4/#round-func) for this,
			that can also do lengths etc and rounds by arbitrary steps,
			but it is not currently implemented anywhere.
		</details>
	</article>
</section>
<!-- End Strings -->

<section>
	<!--
	Dependencies: none really, but it would be *weird* if it comes before
	colors or numbers
	 -->
	<header class="slide" style="--icon: 🖼;">
		<h1>Images</h1>
	</header>

	<article class="horizontal demo slide" id="url" style="--division: 50">
		<textarea class="language-css">
			article {
				background: url("img/cat1.jpg") center / cover;
			}
		</textarea>
	</article>

	<article class="slide" id="url-cases">
		<table>
			<tr>
				<td><pre><code>
					--img: "cat1.jpg";
					background: url("img/" var(--img));
				</code></pre></td>
				<td style="color: red">CSS limitation</td>
			</tr>
			<tr class="delayed">
				<td><pre><code>
					--img: "img/cat1.jpg";
					background: url(var(--img));
				</code></pre></td>
				<td style="color: red">CSS bug</td>
			</tr>
			<tr class="delayed">
				<td><pre><code>
					--img: url("img/cat1.jpg");
					background: var(--img);
				</code></pre></td>
				<td style="color: yellowgreen">Works!</td>
			</tr>
		</table>
		<details class="notes">
			The first case doesn't work because CSS lacks string concatenation syntax.
			You may be familiar with concatenating strings in the `content` property
			by just placing them next to each other,
			but that is syntax specific to that property,
			not a CSS wide concatenation mechanism.
			Note that there is [consensus to add such syntax in some form](https://github.com/w3c/csswg-drafts/issues/542),
			though the exact details have not been worked out yet.

			The second case doesn’t work due to a …bug in CSS itself.
			When `url()` was introduced in CSS 1, it allowed both quoted and unquoted URLs.
			However, this flexibility comes at a hefty price:
			to parse `url()` tokens, if their parameter is not a quoted string,
			everything within needs to be assumed to be a relative URL,
			and that includes `var()` references!
			In this case, the unquoted `(` inside `url()` will cause a parse error,
			so the entire declaration is thrown out as invalid.
			There is a new function that was recently introduced, [`src()`](https://drafts.csswg.org/css-values-4/#urls),
			which will fix this by only allowing strings to specify the URL,
			however there are no implementations yet.

			Including the entire `url()` token in the variable works,
			though as we will see in the next few slides, it's not without its warts.
		</details>
	</article>

	<article class="takeaway slide">
		<h1>
			Custom properties can only contain entire `url()` tokens, not parts thereof
			<div class="note">(for now)</div>
		</h1>
	</article>

	<!-- <article class="horizontal isolated demo slide" id="letitsnow">
		<textarea class="language-css">
			:root {
				--snow: url('data:image/svg+xml,\
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
					<text y=".9em" font-size="20">❄️</text>\
				</svg>');
				--background: linear-gradient(black, navy);
				background: var(--snow) 0 0 / 5em;
			}
		</textarea>
		<style data-slide media="not all" class="demo">
			:root {
				background: linear-gradient(hsl(200, 40%, 15%), hsl(200, 40%, 45%));
				font-size: 250%;
				height: 100vh;
			}
		</style>
		<!--
		@keyframes snow {
			50% { background-position-x: 0; }
			to { background-position-y: 5em, 3em, 10em }
		}

		:root {
			--snow: url('data:image/svg+xml,\
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
				<text y=".9em" font-size="20">❄️</text>\
			</svg>');
			background: var(--snow) 0 0 / 5em, var(--snow) 1em 0 / 3em, var(--snow) 2em 0 / 10em;
			animation: snow 3s infinite linear;
		}
		--
		<details class="notes">
			So how could entire `url()` tokens be useful to store in CSS variables?
			One perhaps non-obvious example is SVG data URIs.
			You can specify the SVG once, and then re-use it as many times as you need.
			You could even build an icon library!
			Note that while this is a case that preprocessor variables could handle just fine,
			the CSS they would produce would be rife with duplication, and potentially huge,
			whereas when using native CSS variables, the data URI is only specified once.
		</details>
	</article> -->

	<article class="slide">
		<h1>How do relative URLs resolve?</h1>
		<pre><code>
			/* a.css */
			--img: url("a.png");

			/* b.css */
			background-image: var(--img);
		</code></pre>

		<p class="delayed">
			<a href="https://codepen.io/leaverou/project/editor/DNepLE">Let’s check out what happens!</a>
		</p>

		<details class="notes">
			If you’re interested in the reasoning behind the decision,
			[csswg-drafts#757](https://github.com/w3c/csswg-drafts/issues/757)
			is the thread to dig into!
		</details>
	</article>

	<article class="takeaway slide">
		<h1>Relative URLs in custom properties resolve at the point of usage</h1>
		<div class="note delayed balance-lines">Registering as "&lt;url>" or "&lt;image>" will allow us to change this in the future (but doesn’t work yet)</p>
	</article>

	<!-- <article class="slide">
		<h1>What about now?</h1>
		<pre><code>
			@property --img {
				syntax: "&lt;url> | none";
				initial-value: none;
				inherits: false;
			}

			/* a.css */
			--img: url("a.png");

			/* b.css */
			background-image: var(--img);
		</code></pre>

		<details class="notes">
			This should resolve in `a.css`, however Chrome appears to be buggy with
			`&lt;url>` registered properties right now.
		</details>
	</article> -->

	<!-- <article class="takeaway slide">
		<h1>Relative URLs in custom properties resolve at the point of usage
			 ***unless* they are registered as `&lt;url>`**
		</h1>
	</article> -->

	<!-- <article class="isolated demo slide" id="icon-links" style="--division: 60">
		<textarea class="language-css">
			a::before {
				content: "";
				background: var(--icon) bottom / contain no-repeat;
				display: inline-block;
				width: 1em;
				height: .8em;
				margin-right: .3em;
			}

			a[href^="https://twitter.com"]:before {
				--icon: url("https://twitter.com/favicon.ico");
			}

			a[href^="https://github.com"]:before {
				--icon: url("https://github.com/favicon.ico");
			}

			a[href*="https://smashingmagazine.com"]:before,
			a[href*="https://smashingconf.com"]:before {
				--icon: url("https://www.smashingmagazine.com/images/favicon/favicon.png");
			}
		</textarea>
		<textarea class="language-html">
			<p>Hi, I’m Lea.
			I’m quite active on <a href="https://twitter.com/leaverou">Twitter</a>
			and <a href="https://github.com/leaverou">GitHub</a>.
			I hope you are enjoying <a href="https://smashingconf.com/online-workshops/workshops/lea-verou#/">this workshop</a>.
		</textarea>
	</article> -->
</section>

<section class="language-javascript">
	<header class="slide" style="--icon: ⚙️; background-color: var(--accent3)">
		<h1>JS</h1>
	</header>

	<article class="slide allow-attendee">
		<div>
			<pre><code>
				// Get variable from inline style
				element.style.getPropertyValue("--foo");
			</code></pre>
			<pre class="delayed"><code>
				// Get variable from wherever
				getComputedStyle(element).getPropertyValue("--foo");
			</code></pre>
			<pre class="delayed"><code>
				// Set variable on inline style
				element.style.setProperty("--foo", 38 + 4);
			</code></pre>
		</div>
	</article>

	<!-- <header class="slide" style="--icon: 🐭; background-color: var(--accent2);">
		<h1>Mouse position</h1>
	</header> -->

	<article class="isolated horizontal demo slide" id="mouse">
		<textarea class="language-css">
			:root {
				background-image: radial-gradient(
					at 50% 50%,
					transparent, black);
				min-height: 100vh;
			}
		</textarea>
		<textarea class="language-js">
			let root = document.documentElement;

			document.addEventListener("pointermove", evt => {
				/*
				evt.clientX and evt.clientY are the mouse coordinates
				innerWidth and innerHeight give you viewport dimensions
				*/

				root.style.setProperty("--mouse-x", 0);
				root.style.setProperty("--mouse-y", 0);
			});
		</textarea>
		<details class="notes">
			Here we have a radial gradient background whose center is hardcoded to the center of the page.
			However, we want it to follow the mouse, for a subtle (with suitable colors) spotlight effect.
			With a little bit of JS, we can set `--mouse-x` and `--mouse-y` properties to communicate the mouse position to CSS.
			This already gives us a big advantage over pre-custom property CSS, where we'd need to set the entire gradient
			in JS, and tweak JS code every time we wanted to make a design change.
		</details>
	</article>

	<article class="isolated horizontal demo slide" id="svg-eyes-2">
		<textarea class="language-css">
			.iris {
				cx: calc(50px * var(--look, 0) + 25px);
			}
		</textarea>
		<textarea class="language-html">
			<svg viewBox="0 0 250 100">
				<clipPath id="white-clip">
					<path id="white-path" d="M1,50 a65,80 0 0,1 100,0 a80,80 0 0,1 -100,0 Z" />
				</clipPath>
				<use id="eye-white" href="#white-path" />
				<use href="#eye-white" x="148" />
				<circle id="iris" class="iris" cx="50" cy="45" r="18" clip-path="url(#white-clip)" />
				<use class="iris" href="#iris" x="148" />
			</svg>
		</textarea>
		<textarea class="language-js">
			let root = document.documentElement;

			document.addEventListener("pointermove", evt => {
				root.style.setProperty("--mouse-x", evt.clientX);
				root.style.setProperty("--mouse-y", evt.clientY);
			});
		</textarea>
		<style data-slide media="not all" class="demo">
			:root {
				background: hsl(20, 40%, 70%);
			}

			svg {
				width: 90vw;
			}

			#eye-white {
				fill: white;
			}

			.iris {
				stroke: hsl(200, 50%, 50%);
				stroke-width: 14;
				fill: black;
			}

			.second-eye {
				x: 150px;
			}
		</style>
		<details class="notes">
			If we set `--mouse-x` and `--mouse-y` based on pixels,
			what happens here? How can we set `--look` based on that?

			Setting things based on pixels makes them less reusable.
			What if we instead set `--mouse-x` and `--mouse-y`
			based on percentage of screen?

			--------

			Then we can still get a length by multiplying with `100vw`
			and `100vh` respectively, but we can also just use
			the percentage directly.
		</details>
	</article>

	<article class="slide allow-attendee">
		<h1>Reusable pointer coordinates</h1>
		<pre><code>
			let root = document.documentElement;

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

				root.style.setProperty("--mouse-x", x);
				root.style.setProperty("--mouse-y", y);
			});
		</code></pre>
	</article>

	<article class="slide" data-insert="svg-eyes-2"></article>

	<article class="takeaway slide">
		<h1>Prefer abstract 0 to 1 percentages than absolute pixel lengths</h1>
	</article>

	<article class="slide language-css">
		<div>
			<p>0-1 can be converted to a length:</p>
			<pre><code>calc(var(--mouse-x) * 100vw)</code></pre>

			<p>…but the reverse isn’t possible</p>
		</div>
	</article>

	<article class="question slide">
		<h1>What about local coordinates?</h1>
	</article>

	<article class="slide allow-attendee">
		<h1>Getting local pointer coordinates</h1>

		<pre><code>
			let rect = evt.target.getBoundingClientRect();
			let top = evt.clientY - rect.top;
			let left = evt.clientX - rect.left;
			<span class="delayed">let x = left / rect.width;
			let y = top / rect.height;

			evt.target.style.setProperty("--mouse-local-x", x);
			evt.target.style.setProperty("--mouse-local-y", y);</span>
		</code></pre>
	</article>

	<!--
	<article class="isolated demo slide">
		<textarea class="language-css">

		</textarea>
		<textarea class="language-html">

		</textarea>
		<textarea class="language-js">

		</textarea>
		<style data-slide media="not all" class="demo">

		</style>
		<details class="notes">

		</details>
	</article>
	-->

	<article class="isolated horizontal demo slide no-base-css" id="mouse-local">
		<textarea class="language-css">
			button {
				background-color: rebeccapurple;
			}

			button:active {
				background-image: radial-gradient(
					circle at calc(100% * var(--mouse-local-x)) calc(100% * var(--mouse-local-y)),
					hsl(0 100% 100% / .4), transparent
				);
			}
		</textarea>
		<textarea class="language-html">
			<button>Hello</button>
		</textarea>
		<textarea class="language-js">
			document.addEventListener("pointerdown", evt => {
				let target = evt.target;
				let rect = target.getBoundingClientRect();
				let x = (evt.clientX - rect.left) / rect.width;
				let y = (evt.clientY - rect.top) / rect.height;

				target.style.setProperty("--mouse-local-x", x);
				target.style.setProperty("--mouse-local-y", y);
			});
		</textarea>
		<style data-slide media="not all" class="demo">
			button {
				padding: .5em .8em;
				border-radius: .2em;
				border: 0;
				font: 200%/1 Helvetica Neue, Segoe UI, sans-serif;
				color: white;
			}
		</style>
		<details class="notes">
			Here we are generically setting local pointer coordinates on an element.
			Let's change the background gradient to draw a circle.
			Note that we did not need to change anything in the JS.

			Can we use this code as a starting point to draw a "ripple effect", similar to [that of Material Design](https://material.io/components/buttons)?
			If you're not familiar with it, this means that after clicking, the semi-transparent white circle
			grows in radius until it fills the entire button and simultaneously decreases in opacity until it fades out.

			([Codepen solution](https://codepen.io/leaverou/pen/acb3c50c99c89ed9aec9f141c6b1653a)).
		</details>
	</article>

	<article class="codepen slide" id="ripple-effect">
		<p>Solution (don’t peek at the CSS if you haven’t solved it yet!)</p>
		<iframe src="https://codepen.io/leaverou/embed/preview/acb3c50c99c89ed9aec9f141c6b1653a?height=265&theme-id=dark&default-tab=html,result&editable=true" loading="lazy"></iframe>
	</article>

	<article class="takeaway slide">
		<h1>Range mapping is also useful to avoid registering a ton of properties</h1>
	</article>

	<article class="md slide">
		# A note on performance

		- Event delegation (monitoring events on `document`)
		gives you maximum flexibility and maintainability, but can be slower
		- Scoping to specific (few) elements can be more performant, but is a tighter coupling of CSS and JS
		- For anything other than `*move`, err on flexibility
		- For `*move`, it depends. I'd err on flexibility, measure, adjust if needed.

		<details class="notes">
			See also [this article](https://nolanlawson.com/2019/08/11/high-performance-input-handling-on-the-web/).
		</details>
	</article>

	<!-- <article class="slide allow-attendee">
		<h1>More 0-1 Range Mapping</h1>

		<p>Remember <code>calc((max - min) * var(--p) + min)</code>?

		<ol class="math">
			<li>(max - min) &times; p + min</li>
			<li>max &times; p - min &times; p + min</li>
			<li>max &times; p + (1 - p) &times; min</li>
		</ol>

		<p>What does <code>calc(var(--p) * max + (1 - var(--p)) * min)</code> remind you?</p>
	</article>

	<article class="slide" data-insert="#mouse-local"></article> -->

	<!-- <header class="slide" style="--icon: 👗; background-color: var(--accent3)">
		<h1>Forms</h1>
	</header> -->

	<article class="slide allow-attendee">
		<div><pre><code>
			for (let input of document.querySelectorAll("input")) {
				input.style.setProperty("--value", input.value);
			}
		</code></pre>
		<pre class="delayed"><code>
			document.addEventListener("input", evt => {
				let input = evt.target;
				input.style.setProperty("--value", input.value);
			});
		</code></pre></div>
	</article>

	<article class="horizontal isolated demo slide" id="slider">
		<textarea class="language-css">
			input {
				appearance: none;
				background: linear-gradient(to right, #f06 50%, hsl(220 10% 90%) 0);
			}
		</textarea>
		<textarea class="language-js">
			for (let input of document.querySelectorAll("input")) {
				input.style.setProperty("--value", input.value);
			}
			document.addEventListener("input", evt => {
				let input = evt.target;
				input.style.setProperty("--value", input.value);
			});
		</textarea>
		<style class="demo" data-slide>
			input {
				width: 300px;
				-webkit-appearance: none;
				transform: scale(3);
				transform-origin: top left;
				border-radius: .1em;
			}
		</style>
		<textarea class="language-html"><input type="range" /></textarea>
	</article>

	<!-- <header class="slide" style="--icon: 💬">
		<h1>Content-dependent effects</h1>
	</header> -->

	<article class="horizontal isolated demo no-base-css slide" id="typing">
		<textarea class="language-css">
			@keyframes typing { from { width: 0; } }
			@keyframes caret { 50% { border-color: transparent; } }

			.typing {
				width: 25ch;
				border-right: 2px solid;
				overflow: hidden;
				animation: typing calc(25 * .4s) steps(25),
				           caret .5s step-end infinite alternate;
			}
		</textarea>
		<textarea class="language-html">
			<h1 class="typing">CSS variables are awesome</h1>
		</textarea>
		<textarea class="language-js">

		</textarea>
		<style data-slide media="not all" class="demo">
			:root {
				background: hsl(200, 10%, 25%);
			}

			.typing {
				white-space: nowrap;
				font: bold 400% Consolas, Monaco, monospace;
				color: white;
			}
		</style>
		<details class="notes">
			Let’s try to recreate a common "typewriter" effect for this heading.
			Our width is set in `ch` units. `1ch` is the width of the `0` glyph.
			That is not super useful in general, but in monospace fonts,
			that gives us the width of *every* character.

			So, we have managed to recreate the effect, but we had to hardcode the length of the heading.
			CSS variables can help us make this more widely useful.

			-----------

			What happens if the text can change after initial load?
			Either our code would need to take care of updating the `--length` variable,
			or (to avoid such tight couplings) we can use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
		</details>
	</article>

	<article class="slide allow-attendee">
		<h1>Passing element content length</h1>
		<pre><code>
			for (let element of document.querySelectorAll(".typing")) {
				let length = element.textContent.length;
				element.style.setProperty("--length", length);
			}
		</code></pre>
	</article>

	<article class="slide" data-insert="typing"></article>

	<!-- <article class="question slide">
		<h1>What happens if content can change after load?</h1>
	</article>

	<article class="horizontal isolated demo no-base-css slide" id="typing">
		<textarea class="language-css">
			@keyframes typing { from { width: 0; } }
			@keyframes caret { 50% { border-color: transparent; } }

			.typing {
				width: calc(1ch * var(--length));
				border-right: 2px solid;
				overflow: hidden;
				animation: caret .5s step-end infinite alternate,
							typing calc(.3s * var(--length)) steps(var(--length));
			}
		</textarea>
		<textarea class="language-html">
			<h1 class="typing" contentEditable>CSS variables are awesome</h1>
		</textarea>
		<textarea class="language-js">
			for (let element of document.querySelectorAll(".typing")) {
				let length = element.textContent.length;
				element.style.setProperty("--length", length);
			}
		</textarea>
		<style data-slide media="not all" class="demo">
			:root {
				background: hsl(200, 10%, 25%);
			}

			.typing {
				white-space: nowrap;
				font: bold 400% Consolas, Monaco, monospace;
				color: white;
			}
		</style>
		<details class="notes">
			Let’s try to recreate a common "typewriter" effect for this heading.
			Our width is set in `ch` units. `1ch` is the width of the `0` glyph.
			That is not super useful in general, but in monospace fonts,
			that gives us the width of *every* character.

			So, we have managed to recreate the effect, but we had to hardcode the length of the heading.
			CSS variables can help us make this more widely useful.
		</details>
	</article>

	<article class="slide allow-attendee">
		<h1>Mutation Observers to the rescue!</h1>

		<pre><code>
			let observer = new MutationObserver(records => {
				for (let r of records) {
					let element = r.target;
					<span class="delayed">if (element.nodeType === Node.TEXT_NODE) {
						element = element.parentNode;
					}</span>
					let length = element.textContent.length;
					element.style.setProperty("--length", length);
				}
			});
		</code></pre>
	</article>
	<article class="slide allow-attendee">
		<h1>Mutation Observers to the rescue!</h1>

		<pre><code>
			for (let element of document.querySelectorAll(".typing")) {
				let length = element.textContent.length;
				element.style.setProperty("--length", length);
				<span class="delayed">observer.observe(element, {
					characterData: true,
					childNodes: true,
					subtree: true
				});</span>
			}
		</code></pre>
	</article> -->

	<!-- <header class="slide" style="--icon: 📜">
		<h1>Scrolling</h1>
	</header> -->

	<article class="slide allow-attendee">
		<pre><code>
			document.addEventListener("scroll", evt => {
				let el = evt.target;
				<span class="delayed">let maxScroll = el.scrollHeight - el.offsetHeight;</span>
				let scroll = el.scrollTop <span class="delayed">/ maxScroll;</span>
				el.style.setProperty("--scroll", scroll);
			}, {capture: true});
		</code></pre>
	</article>

	<article class="horizontal isolated demo slide" id="scrolling">
		<textarea class="language-css">
			.scrolling {
				background-image: linear-gradient(to right,
					hsl(220 10% 90%) 20%, transparent 0)
			}
		</textarea>
		<style data-slide class="demo">
			.scrolling {
				overflow: auto;
				max-height: 50vh;
				border: .2em solid white;
				background: hsla(0,0%,100%,.2) no-repeat;
				text-align: left;
				padding: .5em 1em;
				font: 100% Baskerville, Palatino, Georgia, serif;
			}
		</style>
		<textarea class="language-js">
			document.addEventListener("scroll", evt => {
				let el = evt.target;
				let maxScroll = el.scrollHeight - el.offsetHeight;
				let scroll = el.scrollTop / maxScroll;
				el.style.setProperty("--scroll", scroll);
			}, {capture: true});
		</textarea>
		<textarea class="language-html">
			<div class="scrolling">
				<p>The allowed syntax for custom properties is extremely permissive. The &lt;declaration-value> production matches any sequence of one or more tokens, so long as the sequence does not contain &lt;bad-string-token>, &lt;bad-url-token>, unmatched &lt;)-token>, &lt;]-token>, or &lt;}-token>, or top-level &lt;semicolon-token> tokens or &lt;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>
		</textarea>
	</article>

	<article class="md slide">
		# A note on performance

		- This has been fun, but event delegation on `scroll` is *usually* a Bad Idea™
		- Trade in some flexibility for performance and scope it to specific elements

		<details class="notes">
			See also [this article](https://nolanlawson.com/2019/08/11/high-performance-input-handling-on-the-web/).
		</details>
	</article>

	<article class="takeaway slide">
		<h1>CSS Variables are a revolution for <br>separation of style and behavior</h1>
	</article>

	<!-- <section>
		<header class="slide" style="--icon: 🎨; background-color: var(--accent4)">
			<h1>Houdini Paint API</h1>
		</header>

		<article class="question slide">
			<h1>What is it for?</h1>
		</article>

		<article class="takeaway slide">
			<h1>The Paint API is for creating custom CSS `&lt;image>` values</h1>
			<details class="notes">
				Remember how once `conic-gradient()` was introduced, we had to wait
				years until it got support across the board?
				The idea of the Paint API is to provide a mechanism with which
				developers can create their own dynamic graphics to use as CSS images
				instead of waiting for browsers to support native syntax for them.
			</details>
		</article>

		<article class="slide language-css">
			<h1>The vision</h1>
			<div>
				<pre><code>
					background: conic-gradient(white, black);
				</code></pre>

				<p class="md">👆🏼Proposed in 2011, took until 2020 for [full support](https://caniuse.com/css-conic-gradients)</p>
				<pre><code>
					background: paint(conic-gradient, white black);
				</code></pre>
				<p class="md">👆🏼JS implementation can be written & shared immediately</p>
			</div>
			<details class="notes">
				- [Current browser support](https://caniuse.com/css-paint-api)
				- [Polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill)
			</details>
		</article>

		<article class="slide language-css">
			<h1>With fallback</h1>

			<pre><code>
				article {
					border: 2px solid rebeccapurple;
				}

				@supports (border-image: paint(foo)) {
					article {
						border-image: paint(fancy-border);
					}
				}
			</code></pre>
		</article>

		<article class="slide">
			<h1>How does it work?</h1>

			<pre><code>
				// Main JS:
				CSS.paintWorklet.addModule("paint-conic-gradient.js");

				// paint-conic-gradient.js:
				registerPaint("conic-gradient", class {
					static get inputArguments() { return ["&lt;color>+"]; }
					paint(ctx, size, properties, args) {
						// Draw conic gradient on ctx using Canvas methods
						// args contains the paint() arguments (the colors)
					}
				});
			</code></pre>
			<details class="notes">
				A [full conic gradient implementation with Paint API](https://css-houdini.rocks/conic-gradient/)
			</details>
		</article>

		<article class="slide">
			<h1>Self-contained Paint Worklet</h1>

			<pre><code>
				if (typeof PaintWorkletGlobalScope === "undefined") {
					// We are not in a paint worklet, register our worklet
					CSS.paintWorklet.addModule(import.meta.url);
				}
				else {
					// We are in a paint worklet! Let’s paint! 🎨
					registerPaint("conic-gradient", class {
						static get inputArguments() { return ["&lt;color>+"]; }
						paint(ctx, size, properties, args) {
							// Draw conic gradient on ctx
						}
					});
				}
			</code></pre>
		</article>

		<article class="confused slide language-css">
			<h1>The reality…</h1>

			<div><pre><code>paint(conic-gradient, white, black)</code></pre> doesn't work. No arguments yet.</div>
		</article>

		<article class="slide language-css">
			<h1>Custom properties as input</h1>

			<div>
				<p>Instead of:</p>
				<pre><code>
					background: paint(conic-gradient, white black);
				</code></pre>
				<p>This works today:</p>
				<pre><code>
					--conic-gradient-colors: white black;
					background: paint(conic-gradient);
				</code></pre>
			</div>
		</article>

		<article class="slide">
			<pre><code>
				CSS.registerProperty({
					name: "--conic-gradient-colors",
					syntax: "&lt;color>+",
					initialValue: "transparent",
					inherits: false
				});
				registerPaint("conic-gradient", class {
					static get inputProperties() {
						return ["--conic-gradient-colors"];
					}
					paint(ctx, size, properties) {
						let colors = properties.get("--conic-gradient-colors");
						// Draw conic gradient on ctx
					}
				});
			</code></pre>
		</article>

		<article class="question slide">
			<h1>Why is that a problem?</h1>
		</article>

		<article class="slide language-css">
			<h1>How to rewrite this?</h1>
			<pre><code>
				background: paint(conic-gradient, white silver);
				border-image: paint(conic-gradient, white black);
				list-style-image: paint(conic-gradient, lime yellow);
				mask-image: paint(conic-gradient, transparent black);
			</code></pre>
			<div class="delayed">
				<p>Or even this…</p>
				<pre><code>
					background: paint(conic-gradient, white transparent),
								paint(conic-gradient, lime yellow);
				</code></pre>
			</div>
			<details class="notes">
				Admittedly, this is an extreme example to illustrate the problem.
				While it is highly unlikely that you may want to use that many conic gradients
				on a single element, it's far more likely with other types of paint worklets,
				e.g. those drawing shapes.

				As a side point, notice that these images are not just useful as backgrounds,
				but there are many more image-accepting properties!
			</details>
		</article>

		<article class="takeaway slide">
			<h1>Custom properties apply to the element,
			arguments apply to the image</h1>
		</article>

		<article class="slide language-css">
			<h1>What about this?</h1>

			<pre><code>
				@property --background-image {
					syntax: "&lt;image> | none";
					initial-value: none;
					inherits: false;
				}

				.my-div {
					--background-image: url(img/cat1.jpg);
					--background-opacity: .5;
					background: paint(background-opacity);
				}
			</code></pre>
		</article>

		<article class="confused slide">
			<h1>Nope.</h1>
			<p>Registering a custom property as <code>&lt;image></code><br> is not yet supported. 👎🏼</p>
			<p class="md delayed">…although there are some [terrible hacks](https://css-houdini.rocks/background-properties)</p>
			<details class="notes language-css">
				This demo uses `list-style-image` (an image property that is not used)
				to stuff a custom property in and actually get an image back
				(i.e. a `CSSImageValue` in JS that can be painted on to canvas)
			</details>
		</article>

		<header class="slide" style="--icon: 💩; background-color: var(--accent3)">
			<h1>What about this?</h1>
		</header>

		<article class="slide language-css">
			<h1>Idea: CSS API</h1>

			<pre><code>
				--background-icon: 💩;
				background: paint(emoji-polka);
			</code></pre>
		</article>

		<article class="slide">
			<h1>Idea: JS implementation</h1>

			<pre><code>
				registerPaint("emoji-polka", class {
					static get inputProperties() {
						return ["--background-icon"];
					}
					paint(ctx, size, properties) {
						let icon = properties.get("--background-icon");
						ctx.fillText(icon, 0, 0);
					}
				});
			</code></pre>

			<details class="notes">
				Obviously we'd eventually refine it to set the font size,
				fine-tune the emoji position etc
			</details>
		</article>

		<article class="confused slide">
			<h1>Nope.</h1>
			<p>No text rendering methods on <code>ctx</code> 👎🏼</p>
		</article>

		<article class="slide">
			<blockquote style="width: 21em">
				<div class="md">
					**Note:** The `PaintRenderingContext2D` implements a subset of the `CanvasRenderingContext2D` API.
					Specifically it doesn’t implement the `CanvasImageData`, `CanvasUserInterface`, `CanvasText`, or `CanvasTextDrawingStyles` APIs.
				</div>
				<p class="cite"><a href="https://drafts.css-houdini.org/css-paint-api-1/#2d-rendering-context">CSS Painting API Level 1</a></p>
			</blockquote>
		</article>

		<article class="question slide">
			<h1>So what can Paint API do today?</h1>
		</article>

		<article class="slide">
			<h1 class="md">
				[Lots of things!](https://houdini.how)<br>
				[And more!](https://css-houdini.rocks)
			</h1>
		</article>
	</section> -->


<!-- <footer class="slide" id="day-end">
	<h1>Thank you!</h1>
	<p>See you next week! 👋🏼</p>
</footer> -->


<footer class="dark slide dont-resize">
	<img src="img/mark.svg" class="logo" />
	<h1>Thank you!</h1>
	<img src="img/stickers.jpg" class="stickers delayed" alt="">
	<p class="stickercaption delayed">Want one? Just ask! ---></p>
	<ul>
		<li style="--icon: '🌍'"><a href="http://mavo.io">lea.verou.me</a></li>
		<li style="--icon: '✉'"><a href="mailto:lea@verou.me">lea@verou.me</a></li>
		<li style="--icon: '🐦'"><a href="http://twitter.com/leaverou">@leaverou</a></li>
	</ul>
	<p>Please give me feedback by filling in <a href="https://docs.google.com/forms/d/e/1FAIpQLSdtbZBK-0NYteTnd0LJiN4udZnxKc7IQ5SQFJbDcLuDIZQhOA/viewform" target="_blank">this survey</span>!</p>
	<!-- <p>Slides: <a href="https://leaverou.github.io/talks/css-variables">leaverou.github.io/talks/css-variables</a></p> -->
	<p style="font-size: 50%;">This slide deck was entirely built with open web technologies! Slideshow framework: <a href="http://github.com/LeaVerou/CSSS">github.com/LeaVerou/CSSS</a></p>
</footer>

<script src="https://projects.verou.me/talks/shared/js/bliss.shy.min.js"></script>
<script src="https://projects.verou.me/talks/shared/js/prism.js"></script>
<script src="https://projects.verou.me/incrementable/incrementable.js"></script>
<script src="https://inspirejs.org/inspire.js"></script>
<script src="talk.js"></script>

</body>
</html>