Modern Frontends Live! 2022

<div class="content-warning">
  <div>Content</div>
  <div>Advisory</div>
  <div>Creative Content</div>
</div>
---

<img class="qr-intro" src="/shared/images/remote-qr.svg" alt="" />

## Don't scan this

###### tinyurl.com/jh3y-remote
---
<br>
<div class="block-reveal">
              
  # Here
  # we
  # gooooo!

</div>
<img class="watermark-bear" src="/shared/images/bear-2022--black.png" alt=""/>
---
<br>

###### Modern Frontends Live! 2022
## Supercharge your skills with creative coding
<div class="volume-title">Vol. V</div>

---
<br>
## I'm Jhey Tompkins
#### Developer Relations Engineer<br>@ <span class="googley">Google</span>

<img class="polaroid" src="/shared/images/baby-photo--resized.jpeg" width="300" />
---
<br>
---

---

---

## Expression through the "impractically practical"
---

### Give yourself the <span style="color: var(--citric)">confidence</span> to create <span style="color: var(--fuschia)">anything</span> your imagination brings.<br>Go <span style="color: var(--cinnabar);">beyond documentation</span>, become it.
---

---

<div class="fuel">
  <div class="word-waterfall">
    <div data-word="Perspective">Perspective</div>
    <div data-word="Creativity">Creativity</div>
    <div data-word="Innovation">Innovation</div>
  </div>
  <div class="word-waterfall">
    <div data-word="Perspective">Perspective</div>
    <div data-word="Creativity">Creativity</div>
    <div data-word="Innovation">Innovation</div>
  </div>
</div>
---

## Hoard your <span style="color: var(--citric)">inspiration</span>.<br><span style="color: var(--blueberry)">Focus</span> on <span style="color: var(--fuschia)">"What"</span> and not the "How" or "Why".
---

<div class="demo-row">
  <video autoplay controls muted loop src="/shared/video/demo-two.mp4"></video>
  <video autoplay controls muted loop src="/shared/video/demo-one.mp4"></video>
  <video autoplay controls muted loop src="/shared/video/demo-three.mp4"></video>
</div>
---

---

## It's a <span style="color: var(--chateau)">personal</span> journey. It's a <span style="color: var(--selective)">process</span>. Something you can <span style="color: var(--fuschia)">train over time</span>.
---

<img src="https://media.giphy.com/media/t79McFW5Yxxff4FP09/giphy.gif" alt="" />
---

---

<div class="content-warning">
  <div>Content</div>
  <div>Advisory</div>
  <div>Experimental Content</div>
</div>
---

## CSS :has
---

<div class="support-grid">
  <span class="browser-logo" data-browser="chrome"></span>
  <span class="browser-logo" data-browser="edge"></span>
  <span class="browser-logo" data-browser="safari"></span>
  <span class="browser-logo" data-browser="firefox"></span>
  <span class="browser-version" data-supported>105</span>
  <span class="browser-version" data-supported>105</span>
  <span class="browser-version" data-supported>15.4</span>
  <span class="browser-version">
    <span class="material-symbols-outlined">
      flag
    </span>
  </span>
</div>
---

---

```css []
<target>:has(<condition>) { <styles> }
```
---

<div>

```css []
.everybody:has(.a-good-time) {
  animation: party-like-its 1999s forwards;
}

.jeff:has(~ .aunt) {
  animation: visit 10000s;
}
```

</div>

```html []

<div class="everybody">
  <div class="body body--at-web-dev-conf">
    <div class="a-good-time"></div>
  </div>
</div>

<div class="everybody"></div>

<div class="jeff"></div>
<div class="some-distance"></div>
<div class="aunt"></div>
```
---

## Break the mental model <span class="flipper-wrapper"><span class="flipper">🛹</span></span>
---

<div class="code-split">

```html
<div class="🐱"></div>
```

```css
.🐱:before {
  --content: "😿";
}
```
</div>

</div>
---

<div class="code-split">

```html
<div class="🐱"></div>
<div></div>
<div class="🍔"></div>
```

```css
.🐱:has(~ .🍔):before {
  --content: "😾";
}
```
</div>

</div>
---

<div class="code-split">

```html
<div class="🐱"></div>
<div class="🍔"></div>
```

```css
.🐱:has(+ .🍔):before {
  --content: "🙀";
  animation: anticipate 0.1s infinite;
}

@keyframes anticipate {
  50% {
    transform: translate(0, -5%);
  }
}
```
</div>

</div>
---

```html
<div class="🐱">
  <div class="🍔"></div>
</div>
```

```css
.🐱:has(.🍔):before {
  --content: "😻";
  transform-origin: 50% 75%;
  animation:
    satisfied steps(1, end) 2s both,
    gobble 0.2s 10 linear both,
    full 6s 2s infinite linear;
}
```

</div>

---

---

---

```css
.card {
  box-shadow: var(--shadow-elevation-low);
}
.card:has(.card__feature) {
  box-shadow: var(--shadow-elevation-high);
}
.card:not(:has(.card__blurb)):not(:has(.card__author)) {
  aspect-ratio: 3 / 4;
}
.card:not(:has(.card__blurb)):not(:has(.card__author)) .card__image {
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .card:has(.card__feature) {
    animation: wiggle 6s infinite;
  }
}
```
---

---

## use cases for days

```css []
/* Change the grid layout based on content */
.card:has(.card__image) { grid-template-columns: 100px 1fr; }
/* Full width card when containing feature */
.card:has(.card__feature) { grid-column: 1 / -1; }
/* Non icon links */
a:not(:has(> svg)) { ... }
/* Update the :root based on some state change */
:root:has([aria-pressed=true]) { … }
/* Select the .container that has an odd number of children */
.container:has(> .container__item:last-of-type:nth-of-type(odd)) { ... }
/* Custom elements are supported too */
main:has(todo-list) { ... }
```

<sub>There are a bunch of examples in ":has(): the family selector" over on [developer.chrome.com](https://developer.chrome.com/blog/has-m105).</sub>
---


```html []
<div class="form-group">
  <label for="email" class="form-group__label">Email</label>
  <input
    required
    type="email"
    id="email"
    class="form-input"
    title="Enter valid email address"
    placeholder="Enter valid email address"
  />
</div>
```
---

---

```css []
label {
  color: var(--color);
}

input {
  border: 4px solid var(--color);
}

input:focus-visible {
  outline-color: var(--color);
}

input::placeholder {
  color: transparent;
}

/* Cascade in effect */
.form-group:has(:invalid) {
  --color: var(--invalid);
}
/* :focus-within also valid */
.form-group:has(:focus) {
  --color: var(--focus);
}

.form-group:has(:valid) {
  --color: var(--valid);
}
```
---

---




<div>

```html []
<label for="email" class="form-group__label">
  <span data-splitting="" aria-hidden="true">
    <span class="char" data-char="E" style="--char-index:0;">E</span>
    <span class="char" data-char="m" style="--char-index:1;">m</span>
    <span class="char" data-char="a" style="--char-index:2;">a</span>
    <span class="char" data-char="i" style="--char-index:3;">i</span>
    <span class="char" data-char="l" style="--char-index:4;">l</span>
  </span>
  <span class="sr-only">Email</span>
</label>
```

</div>

```css []
@media (prefers-reduced-motion: no-preference) {
  .form-group:has(:valid) label span {
    display: inline-block;
    animation: jump 0.25s calc(var(--char-index) * 0.05s);
  }
  @keyframes jump {
    50% {
      transform: translateY(-50%);
    }
  }
}
/* Show an error message? */
.form-group:has(:invalid:not(:focus):not(:placeholder-shown))
.form-group__error {
  display: block;
}
```
---

---

```css []
:root {
  --dark-mode: 0;
  --text-1: var(--gray-9);
  --text-2: var(--gray-8);
}
/* Don't do it with a checkbox 🙏 */
:root:has(.theme-toggle[aria-pressed=true]) {
  --dark-mode: 1;
  --text-1: var(--gray-0);
  --text-2: var(--gray-1);
}
body {
  color: var(--text-2);
}
h1 {
  color: var(--text-1);
}
```
---

---


---

```css []
li:hover {
  background: var(--pink-6);
}

li:hover + li,
/* Previous sibling! */
li:has(+ li:hover) {
  background: var(--pink-3);
}
```
---

---


```css []
:root {
  --lerp-0: 1;
  --lerp-1: 0.5625;
  --lerp-2: 0.25;
  --lerp-3: 0.0625;
  --lerp-4: 0;
}
.blocks {
  display: flex;
}
.block {
  transition: flex 0.2s;
  flex: calc(0.2 + (var(--lerp, 0) * 1.5));
}
:is(.block:hover, .block:focus-visible) {
  --lerp: var(--lerp-0);
  z-index: 5;
}
.block:has( + :is(.block:hover, .block:focus-visible)),
:is(.block:hover, .block:focus-visible) + .block {
  --lerp: var(--lerp-1);
  z-index: 4;
}
.block:has( + .block + :is(.block:hover, .block:focus-visible)),
:is(.block:hover, .block:focus-visible) + .block + .block {
  --lerp: var(--lerp-2);
  z-index: 3;
}
```
---

---

---

```html []
<table>
  <tr>
    <td class="calendar__cell">
      <span class="calendar__number">30</span>
      <input type="radio" class="sr-only" name="from" id="from-09-30" />
      <input type="radio" class="sr-only" name="to" id="to-09-30" />
      <label for="from-09-30">from 09-30</label>
      <label for="to-09-30">to 09-30</label>
    </td>
    <td class="calendar__cell">
      <span class="calendar__number">1</span>
      <input type="radio" class="sr-only" name="from" id="from-10-01" />
      <input type="radio" class="sr-only" name="to" id="to-10-01" />
      <label for="from-10-01">from 10-01</label>
      <label for="to-10-01">to 10-01</label>
    </td>
  </tr>
</table>
```
---

```css []
.calendar__cell:has(:checked) {
  --background: var(--primary);
  --alpha: 1;
  --color: var(--light);
}

.calendar:has([id*=from]:checked):not(:has([id*=to]:checked)):has(.calendar__cell:hover)
tr:has(:checked) ~ tr:has(:hover)
.calendar__cell:has(~ .calendar__cell:hover) {
  --background: var(--potential);
  --alpha: 1;
}

.calendar:has([id*=from]:checked):has([id*=to]:checked)
tr:has([id*=from]:checked):has(~ tr .calendar__cell > :checked)
.calendar__cell:has([id*=from]:checked) ~ .calendar__cell:not(:hover) {
  --background: var(--in-range);
  --alpha: 1;
  --color: var(--light);
}
```
---


---

```html []
<form class="game">
  <div class="board">
    
    <input class="x-check" type="checkbox" id="x-8"/>
    <input class="o-check" type="checkbox" id="o-8"/>
    <div class="board__cell">
      <label for="x-0">
        <svg class="x ghost"></svg>
      </label>
      <label for="o-0">
        <svg class="o ghost"></svg>
      </label>
      <svg class="x board__x"></svg>
      <svg class="o board__o"></svg>
    </div>
  </div>
</form>
```
---

```css []
[for*="x"] {
  z-index: calc(1 + var(--turn));
}
/* Counters don't work with calc... yet */
.board:has(:checked),
.board:has(:checked ~ :checked ~ :checked) {
  --turn: 1;
}
.board:has(:checked ~ :checked),
.board:has(:checked ~ :checked ~ :checked ~ :checked) {
  --turn: 0;
}
:root:has(#x-0:checked ~ #x-1:checked ~ #x-2:checked),
:root:has(#x-3:checked ~ #x-4:checked ~ #x-5:checked) {
  --show-cross: 1;
  --show-draw: 0;
}
:root:has(#o-0:checked ~ #o-1:checked ~ #o-2:checked),
:root:has(#o-3:checked ~ #o-4:checked ~ #o-5:checked) {
  --show-naught: 1;
  --show-draw: 0;
}
```
---

```html [4,5]
<form class="game">
  <div class="board">
    
    <input class="x-check" type="checkbox" id="x-8"/>
    <input class="o-check" type="checkbox" id="o-8"/>
    <div class="board__cell">
      <label for="x-0">
        <svg class="x ghost"></svg>
      </label>
      <label for="o-0">
        <svg class="o ghost"></svg>
      </label>
      <svg class="x board__x"></svg>
      <svg class="o board__o"></svg>
    </div>
  </div>
</form>
```
---

```css []
/* You can :has a :has */
:root:has(#x-0:checked):has(#x-1:checked):has(#x-2:checked),
:root:has(#x-3:checked):has(#x-4:checked):has(#x-5:checked) {
  --show-cross: 1;
  --show-draw: 0;
}
/* But you can't :has a :has */
.board:has(.board__cell:has(:checked):has(+ .board__cell:has(:checked))) {
  --turn: 0;
}
```
---

---

```html [|3,4,18,19]
<div class="board__column">
  <div class="board__cell move-6" style="--row: 1;">
    <input type="checkbox" id="s-6" data-row="s-1" data-column="s-1"/>
    <input type="checkbox" id="p-6" data-row="p-1" data-column="p-1"/>
    <div class="board__disc disc">
      <div class="disc__piece">
      </div>
    </div>
  </div>
  
</div>
<div class="board__labels move-6" data-for="move-6" style="--row: 1;">
  <div class="cuboid">
    <div class="cuboid__side"></div>
    <div class="cuboid__side"></div>
    <div class="cuboid__side">
      <div class="move-controls">
        <label class="board__move" for="s-6"></label>
        <label class="board__move" for="p-6"></label>
      </div>
    </div>
  </div>
</div>
```
---

```css []
/* Horizontal */
.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-1]:checked) ~ .win,
/* Diagonal */
.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-2]:checked) +
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-4]:checked) ~ .win {
  display: block;
  --winner: var(--primary);
  --show-win: 1;
}
```
---

```css []
/* The "Magic" bullet for turn switching */
/* Creates a width to reveal the other label */
.board__labels .move-controls:after {
  content: counter(turn, lower-roman);
  font-size: 1px;
  letter-spacing: var(--cell-size);
  color: transparent;
}

.board__move[for*="s"] {
  left: 0;
}

.board__move[for*="p"] {
  right: 0;
}

body {
  counter-reset: turn 1;
}

[id*="p"]:checked {
  counter-increment: turn 2;
}

[id*="s"]:checked {
  counter-increment: turn -2;
}
```

<sub>h/t Bence Szabó for this one 🙏</sub>
---

```css
:root {
  --mine-count: 8;
}
:root:has([id*="bomb"]:checked) {
  --show-fail: 1;
}
body {
  counter-reset: flag var(--mine-count);
}
[id*=flag--]:checked {
  counter-increment: flag -1;
}
.mine-count:after {
  content: counter(flag);
}
```
---

---

## But, really? How much wood could a woodchuck chuck if a woodchuck could chuck wood?
---

---

```js []
const PARTICLES = [
  {
    trigger: 'cat',
    emoji: '😹'
  },
  {
    trigger: 'lit',
    emoji: '🔥'
  },
  {
    trigger: 'boom',
    emoji: '💣'
  },
  {
    trigger: 'wood',
    emoji: '🌴',
  },
  {
    trigger: 'chuck',
    emoji: '🪓'
  }  
]
```
---
<!-- ```js []
const EMOJIS = document.querySelector('.emojis')
const PROCESS_AUDIO = e => {
  const TRANSCRIPT = e.results[e.results.length - 1][0].transcript
    .toLowerCase()
    .trim()
  if (e.results[e.results.length - 1].isFinal === true) {
    for (const WORD of TRANSCRIPT.split(' ')) {
      const PARTICLE = PARTICLES.filter(p => {
        return WORD.indexOf(p.trigger) !== -1
      })[0]
      if (PARTICLE) {
        const P = document.createElement('div')
        P.innerText = PARTICLE.emoji
        P.className = PARTICLE.trigger
        EMOJIS.appendChild(P)
        if (PARTICLE.trigger === 'wood' || PARTICLE.trigger === 'chuck') {
          P.addEventListener('animationend', () => {
            P.remove()
          })
        }
        if (PARTICLE.trigger === 'boom') {
          setTimeout(() => EMOJIS.innerHTML = '', 2000)
        }
        P.style.setProperty('--index', EMOJIS.children.length)
      }
    }
  }
  document.querySelector('main').innerText = TRANSCRIPT
}

```
--- -->

```css []
.wood:has(+ .chuck) {
  animation: chucked 1s forwards;
}

:is(.wood, .chuck):has(+ .lit) {
  animation: burned 0.25s forwards;
}

:is(.cat):has(+ .lit):after,
.lit + .cat:after {
  content: "🙀";
  position: absolute;
  inset: 0;
}

@keyframes burned {
  to {
    filter: brightness(0);
  }
}

@keyframes chucked {
  to {
    transform: rotate(-90deg);
  }
}
```
---

---
<br>

## Open UI ~~Pop-up~~<br>Popover

---

<div class="support-grid">
  <span class="browser-logo" data-browser="canary"></span>
  <span class="browser-logo" data-browser="chrome"></span>
  <span class="browser-logo" data-browser="edge"></span>
  <span class="browser-logo" data-browser="safari"></span>
  <span class="browser-logo" data-browser="firefox"></span>
  <span class="browser-version" data-supported>
    <span class="material-symbols-outlined">
      flag
    </span>
  </span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
</div>
---

---

## The goal of the <span style="color: var(--citric);">Open UI</span> initiative is to make it <span style="color: var(--blueberry)">easier</span> for developers to make <span style="color: var(--fuschia);">great user experiences</span>
---

```js []
const PopUp = ({ children }) => {
  return (
    <div className="pop-up" style={{ zIndex: Date.now() }}>
      {children}
    </div>
  )
}
```
---

## What's the top layer? A place outside of the <span style="background-color: var(--cinnabar);">document</span> flow. A place where <span style="background-color: var(--chateau);">z-index</span> has no effect. Where every element has a styleable <span style="background-color: var(--selective);">::backdrop</span>.



<!-- ```html []
<div id="my-first-popup" popup>PopUp Content!</div>
<button popuptoggletarget="my-first-popup">Toggle Pop-Up</button>
```

[popover]:open {
  --open: 1;
}
```
---

## <span style="color: var(--fuschia)">Better developer experience</span> leads to less opportunity for poor <span style="color: var(--citric)">user experience</span>
---



---

```html [|3,8]
<div id="code-pop-up" class="balloon" popover>
  <div class="balloon__content">
    <button class="button ripple" popoverhidetarget="code-pop-up">
      Hide Code
    </button>
  </div>
</div>
<button class="button ripple" popovershowtarget="code-pop-up">
  Reveal Code
</button>
```
---


<!-- ```css []
@media (prefers-reduced-motion: no-preference) {
  [popover] {
    animation: exit-animation 250ms ease-out both;
  }

[popover]:open {
    animation: entry-animation 1s ease-in both;
  }

@keyframes exit-animation {
    100% {
      transform: translate(-50%, -50%) translateY(-100vh) scale(0);
    }
  }

@keyframes entry-animation {
    0% {
      transform: translate(-50%, -50%) translateY(100vh) scale(0);
    }
  }
}
``` -->




## Types && Behavior
```html []

<div popover=auto>

<div popover=manual>

<div popover>
  <input autofocus type="text">
</div>
```
---














## JS API
```js []
/* Show a popover */
popoverElement.showPopover()
/* Hide a popover */
popoverElement.hidePopover()
/* Is the popover in the top layer */
popoverElement.matches(':open')
/* Listen for popover events */
popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)
popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)
/* You can cancel a show */
popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a pop-up from being shown’);
})
/* You can't cancel a hide */
popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})
```
---

---
<!-- ```html []
<button
  popover="manual"
  class="balloon"
  id="P"
  defaultopen
  title="Pop 'P'"
  style="--index: -2.5; --hue: 107; --bob-speed: 1; --float-speed: 0.9;"
>
  <span class="balloon__content">
    <span class="balloon__letter">P</span>
    <span class="balloon__handle"></span>
  </span>
</button>
```

<div>

```js []
POPUP.addEventListener("click", () => {
  AUDIO_POP.currentTime = 0;
  AUDIO_POP.play();
  POPUP.hidePopover();
  Object.assign(POPUP, {
    style: `
    --index: ${START_INDEX + p};
    --hue: ${Math.random() * 359};
    --bob-speed: ${Math.random() + 0.5};
    --float-speed: ${Math.random() + 0.5};
  `
  });
  requestAnimationFrame(() => POPUP.showPopover());
});
```

</div> -->





## Breathe new life into old friends
---


---

```css [|17, 18, 19]
[popover] {
  left: 100%;
  width: var(--nav-width);
  transition: transform 0.2s;
  transform: translateX(calc(var(--open, 0) * -100%));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: var(--open, 0);
}

[popover]:open,
[popover]:open::backdrop {
  --open: 1;
}
body:has([popover]:open) {
  transform: translateX(calc(var(--nav-width) * -1));
}
```
---


---
<!-- <div>

```html []
<canvas
  id="custom-cursor"
  class="custom-cursor"
  popover="manual"
  defaultOpen
></canvas>
```

</div>

```js []
document.body.addEventListener("popovershow", (e) => {
  if (canvas.matches(":open") && e.target !== canvas) {
    canvas.hidePopover();
    requestAnimationFrame(() => {
      canvas.showPopover();
    });
  }
});
```
--- -->



---


---

```html []
<div id="spotlight" popover>
  <input
    autocomplete="off"
    role="combobox"
    spellcheck="false"
    aria-expanded="false"
    aria-controls="spotlight-options"
    aria-activedescendant=""
    autofocus
    id="spotlight-search"
    type="text"
    placeholder="Pop-up search..."
  />
  <div popover defaultopen id="spotlight-options" role="listbox">
    
  </div>
</div>
```
---
<!-- ---
```js []
/* Show the pop-up then you get light dismiss etc. for free! */
const handleActivation = (e) => {
  if (e.keyCode === CMD && !STATE.cmd) STATE.cmd = true;
  if (e.keyCode === MOD && STATE.cmd && !STATE.mod) STATE.mod = true;

if (STATE.cmd && STATE.mod && !POPUP.matches(":open")) {
    STATE.cmd = STATE.mod = false;
    POPUP.showPopover();
    OPTIONS.showPopover();
  }
};
``` -->


---

```html []
<div id="screensaver" popover>
  <div class="dvd">
    <div class="dvd__scale">
      <div class="dvd__slide">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="8 44 178 104">
        </svg>
      </div>
    </div>
  </div>
</div>
```
---







---

```html []
<button
  popover="manual"
  defaultopen
  popovertoggletarget="menu"
>
  <i class="material-icons">add</i>
</button>
<div id="menu" class="fab__menu" popover="auto" style="--count: 3">
  <ul class="fab__menu-items">
    <li class="fab__menu-item">
      <button
        autofocus
        class="fab"
        style="--index: 0"
        popoverhidetarget="menu"
      >
        <i class="material-icons">chat</i>
      </button>
    </li>
    <li class="fab__menu-item">
      <button
        class="fab"
        style="--index: 1"
        popoverhidetarget="menu"
      >
        <i class="material-icons">photo_camera</i>
      </button>
    </li>
    <li class="fab__menu-item">
      <button
        class="fab"
        style="--index: 2"
        popoverhidetarget="menu"
      >
        <i class="material-icons">pin_drop</i>
      </button>
    </li>
  </ul>
</div>
```
---

---

---

---

---

## CSS Anchoring
---

<img src="/tpac-2022/assets/tooltip-anatomy.png" />
---

```html
  
  <header style="position: relative;">
    <nav style="position: relative;">
      <span class="nav-links">
        <button id="products-btn">Products</button>
      </span>
      <div popover id="products">
        <button id="css-btn">CSS</button>
      </div>
    </nav>
    <div popover id="css"></div>
  </header>
  ```

```css
  #products-btn {
    anchor-name: --products;
  }
  #products {
    position: absolute;
    left: anchor(--products left);
    top: anchor(--products bottom);
  }
  #css-btn {
    anchor-name: --css;
  }
  #css {
    position: absolute;
    top: anchor(--css top);
    left: anchor(--css right);
  }
  ```

</div>

```css
.chart__tooltip--max {
  position: absolute;
  left: anchor(--chart right);
  bottom: max(
    anchor(--anchor-1 top),
    anchor(--anchor-2 top),
    anchor(--anchor-3 top)
  );
  translate: 0 50%;
}
```
</div>

</div>
---

<div class="code-split">

```css
.anchor {
  anchor-name: --anchor;
}

.boat {
  position-fallback: --top-to-bottom;
}

@position-fallback --top-to-bottom {
  @try {
    bottom: anchor(--anchor top);
    right: anchor(--anchor left);
  }
  @try {
    top: anchor(--anchor bottom);
    right: anchor(--anchor left);
  }
}
```

</div>

</div>

---

<h2>
  <del>It's 2022 and I can't style a &lt;select&gt;?</del>
  <br>
  Open UI SelectMenu
</h2>

<div class="code-stack">
  
```html
<select name=font-size id=size>
  <option value=normal>Normal</option>
  <option value=title>Title</option>
  <option value=subtitle>Subtitle</option>
  <option value=footnote>Title</option>
</select>
```

```css
[value=title] { font-size: 2rem; }
```

</div>
---

---

```html [|1,6]
<selectmenu name=font-size id=size>
  <option value=normal>Normal</option>
  <option value=title>Title</option>
  <option value=subtitle>Subtitle</option>
  <option value=footnote>Title</option>
</selectmenu>
```
---

---

```html [|2,3,8,9]
<selectmenu id=position>
  <div slot=button>
    <button behavior=button>
      <span behavior=selected-value slot=selected-value></span>
      <span role=img class=👆>👆</span>
    </button>
  </div>
  <div slot=listbox>
    <div popover behavior=listbox>
      <option value=top>
        <span class=👉>👉</span>
        <span>Top</span>
      </option>
      <option value=right>
        <span class=👉>👉</span>
        <span>Right</span>
      </option>
      <option value=bottom>
        <span class=👉>👉</span>
        <span>Bottom</span>
      </option>
      <option value=left>
        <span class=👉>👉</span>
        <span>Left</span>
      </option>
    </div>
  </div>
</selectmenu>
```
---

---

---

```html
<selectmenu>
  <div slot="button">
    <button behavior="button" disabled={loading}>
      <span className="pokeselect__image-placeholder">
        {loading && <img className="pokeselect__ball" src="poke-ball.png" alt="" />}
        {!loading && !selected && <img className="pokeselect__choose" src="question.png" alt="" />} 
        {selected && <img className="pokeselect__avatar" src={selected.avatar} alt=""/>}
      </span>
      {!selected && <span className="pokeselect__placeholder">Select Pokémon</span>} 
      {selected && <span>{selected.name}</span>}
      <svg viewBox="0 0 320 512" title="marker"></svg>
    </button>
  </div>
  <div slot="listbox">
    <div popover="auto" behavior="listbox">
      
    </div>
  </div>
</selectmenu>
```
---

---

---



## Scroll Linked Animations
---

<div class="support-grid">
  <span class="browser-logo" data-browser="chrome"></span>
  <span class="browser-logo" data-browser="edge"></span>
  <span class="browser-logo" data-browser="safari"></span>
  <span class="browser-logo" data-browser="firefox"></span>
  <span class="browser-version" data-supported>
    <span class="material-symbols-outlined">
      format_paint
    </span>
  </span>
  <span class="browser-version" data-supported>
    <span class="material-symbols-outlined">
      format_paint
    </span>
  </span>
  <span class="browser-version" data-supported>
    <span class="material-symbols-outlined">
      format_paint
    </span>
  </span>
  <span class="browser-version" data-supported>
    <span class="material-symbols-outlined">
      format_paint
    </span>
  </span>
</div>
---

```css [|3,4,9,22|10,11,12]
/* ViewTimeline */
section {
  view-timeline-name: --section;
  view-timeline-axis: block;
}
img {
  animation: parallax both linear;
  animation-timeline: --section;
  /* Likely to change */
  animation-delay: cover 95%;
  animation-end-delay: exit 75%;
}
@keyframes parallax {
  to {
    transform: translateY(100%);
  }
}
/* ScrollTimeline */
.progress {
  animation: progress both linear;
  animation-timeline: scroll(root);
}
@keyframes progress {
  to {
    rotate: 360deg;
  }
}
```

<sub>You can use this with JavaScript's Web Animations API too!</sub>
---

---

```html []
<html>
  <head>
    <title>Scroll Linked Image Reveals</title>
  </head>
  <body>
    <section>
      <h1>Scroll 👇</h1>
    </section>
    <section>
      <img src="/shared/images/starry-night.jpeg">
    </section>
    <section>
      <img src="/shared/images/night-mountain.jpeg">
    </section>
  </body>
</html>
```
---

```css [|3,4,5,6]
img {
  animation: scale-in both linear;
  view-timeline: --in;
  animation-timeline: --in;
  animation-delay: enter 0%;
  animation-end-delay: cover 50%;
  scroll-snap-align: center;
}

@keyframes scale-in {
  0% {
    scale: 0;
  }
}

```
---

```js [|1-6,15,17-23]
const TIMELINE = new ViewTimeline({
  // Thing you're tracking in the viewport
  subject: IMG,
  // Vertical or Horizontal
  axis: 'block' // || 'inline'
})
// WAAPI Support
IMG.animate(
  [
    {
      scale: 0
    },
    {
      scale: 1
    }
  ],
  {
    timeline: TIMELINE,
    fill: 'both',
    delay: {
      phase: 'cover' // || 'exit' || 'enter' || 'contain', 
      percent: CSS.percent(30),
    },
    endDelay: {
      phase: 'cover', 
      percent: CSS.percent(50),
    }
  }
)

```
---

---

---

<h3 class="daniel-phiri">h/t <span style="color: var(--fuschia)">Daniel Phiri</span> @ strapi</h3>
---

---

---

---

```html []
<body>
  <main>
    <ul class="backdrops">
      <li>
        <img src="backdrop-one.png">
      </li>
      <li>
        <img src="backdrop-two.png">
      </li>
    </ul>  
    <ul class="contents">
      <li>
        <h2>Scroll</h2>
      </li>
      <li>
        <h2>Scroll more</h2>
      </li>
    </ul>
  </main>
</body>
```
---

```css []
.scroller {
  animation-timeline: scroll(root);
  animation: progress both linear;
  animation-delay: cover 0%;
  animation-end-delay: cover 100%;
}
@keyframes progress {
  to {
    transform: rotate(360deg);
  }
}
```
---

```js []
const TIMELINES = []
// Each content section
TRIGGERS.forEach(subject => {
  TIMELINES.push(new ViewTimeline({
    subject,
    axis: 'block'
  }))
})
// Animate each backdrop
BACKDROPS.forEach((backdrop, index) => {
  const IMG = backdrop.querySelector('img')
  // Entry
  IMG.animate([{
    transform: 'translateY(0%)'
  }
  ], {
    timeline: TIMELINES[index - 1],
    fill: 'both',
    delay: {
      phase: 'exit', 
      percent: CSS.percent(5),
    },
    endDelay: {
      phase: 'exit', 
      percent: CSS.percent(75),
    }
  })
})
```
---

## Think in <span style="color: var(--fuschia)">space</span>.
---

---

---

```css
.photo:nth-of-type(7n + 1):nth-of-type(even),
.photo:nth-of-type(7n + 3):nth-of-type(even),
.photo:nth-of-type(7n + 5):nth-of-type(even),
.photo:nth-of-type(7n + 7):nth-of-type(even) {
  --vertical: -100%;
  --horizontal: 100%;
}

.photo {
  animation-name: travel;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-timeline: --collage;
  animation-delay: enter 100%;
  animation-end-delay: exit 0%;
}

@keyframes travel {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 var(--vertical);
  }
  100% {
    translate: var(--horizontal) var(--vertical);
  }
}
```
---

---


---

---

---

---

---

---

---

---

```css []
.blind {
  transform: translate(
    0,
    calc(((-95 * (var(--index, 0))) * 0) * 1%)
  );
  animation: slide both;
  animation-timeline: --trigger;
  animation-delay: enter 0%;
  animation-end-delay: enter 100%;
}

@keyframes slide {
  to {
    transform: translate(
      0,
      calc(((-95 * (var(--index, 0))) * 1) * 1%)
    );
  }
}
```
---

---

## That's it.
---

## If you haven't, <span style="color: var(--fuschia)">start</span> your journey. <span style="color: var(--selective)">Supercharge</span> yourself. It's <span style="color: var(--blueberry)">just pixels</span>.
---

## The more you <span style="color: var(--fuschia)">"play"</span> around, the more you are gonna <span style="color:var(--chateau)">find out</span>
<video style="width: 30%;" src="/shared/video/mantra.mp4" controls></video>
---

## <span style="color: var(--selective)">We</span>'re here to <span style="color: var(--chateau)">help</span>
<img class="chrome-logo" src="/shared/images/chrome-logo.svg">
---

<h2 class="outro-cheers">Cheers</h2>

<br>