TPAC 2022 - CSS Anchoring

## CSS Anchoring ⚓️
##### TPAC 2022 
###### Jhey Tompkins - Google

---

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

---

![Your CSS Needs You](/tpac-2022/assets/your-css-needs-you.jpg)

---

- A common pattern
- A tricky pattern
- A headache for developers

---

<div class="tweet-deck">
  <img src="/tpac-2022/assets/tweet-one.png" />
  <img src="/tpac-2022/assets/tweet-two.png" />
  <img src="/tpac-2022/assets/tweet-three.png" />
  <img src="/tpac-2022/assets/tweet-four.png" />
  <img src="/tpac-2022/assets/tweet-five.png" />
  <img src="/tpac-2022/assets/tweet-six.png" />
  <div>
  <img src="/tpac-2022/assets/tweet-seven.png" />
  <img src="/tpac-2022/assets/tweet-eight.png" />
  </div>
  <img src="/tpac-2022/assets/tweet-nine.png" />  
  <img src="/tpac-2022/assets/tweet-ten.png" /> 
  <div>
    <img src="/tpac-2022/assets/tweet-eleven.png" />
    <img src="/tpac-2022/assets/tweet-twelve.png" />
  </div>
</div>

---

### Anchor positioning<br>around the web

---

---

## Notice all the pop-ups?
###### A lot of these use cases<br>want to get something into the top layer

---

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

---

## What's the solution?

---

## CSS
- Absolute positioning
- Could require a certain DOM structure.<br>Mmm wrappers
- Potential for invalid HTML
- Hard to scale/respond to viewport

---

<div>

```html
<div class="containing-block">
  <div class="tooltip">Anchor me!</div>
  <div class="anchor">The anchor</div>
</div>
```
```css
.containing-block {
  position: relative;
}
.tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
```

</div>

---

<div>

```html
<div class="tooltip">Anchor me!</div>
<div class="anchor">The anchor</div>
```
```css
:root {
  --anchor-width: 40px;
  --anchor-top: 100px;
  --anchor-left: 200px;
}
.anchor {
  position: absolute;
  top: var(--anchor-top);
  width: var(--anchor-width);
}
.tooltip {
  position: absolute;
  top: calc(var(--anchor-top) - 10px);
  left: calc(
    (var(--anchor-width) * 0.5)
    + var(--anchor-left)
  );
  transform: translate(-50%, -100%);
}
```

</div>

---

## JavaScript
- Some boilerplate
- Styles are leaking into script land
- Asks questions
  - When?
  - How?
  - Offsets?

---

<div>

```html
  <div class="tooltip">Anchor me!</div>
  <div class="anchor">The anchor</div>
  ```
  ```css
  .tooltip {
    position: absolute;
    top: calc(var(--y) - 10px);
    left: calc((var(--width) * 0.5) + var(--x));
    transform: translate(-50%, -100%);
  }
  ```
  ```js
  const setAnchorPosition = (anchored, anchor) => {
    const bounds = anchor.getBoundingClientRect().toJSON();
    for (const [key, value] of Object.entries(bounds)) {
      anchored.style.setProperty(`--${key}`, value)
    }
  }
  setAnchorPosition(
    document.querySelector('.tooltip'),
    document.querySelector('.anchor')
  )
  ```
</div>

---

## They all looked...<br>the same?
- Right! This is about developer experience/perspective.
- The better the DX, the less opportunity for poor UX.

---

## So That's it, right?
#### One problem...

---

<div>

### It's not responsive
- Where should it position itself?
- When to update?
- How do I know when it's out of view?
- What's the threshold?
- Scroll position?

</div>

---

## Someone's solved it, right?

---

## Popper.js

<div>

- Interactions handled via JavaScript
- Lots of configuration/choices
  - GPU
  - Placements
  - Padding
  - Offset
- Feels "CSS in JS"
- An extra dependency to learn/maintain (~3kB)

</div>

---

## ~~Popper.js v3~~ Floating UI

<div>

- Same maintainer
- Same choices
  - GPU
  - Placements
  - Padding
  - Offset
- An extra dependency to learn/maintain
- Lighter (~2kB)
- Confused?

</div>

---

## Let's keep the styles<br>in our styles

---

---

## CSS Anchoring API
- Anchor elements to each other without JavaScript
- Let the browser work out the best position 👉
- No dependencies
- No wrapper elements
- Spec: [specs/css-anchor-position](https://tabatkins.github.io/specs/css-anchor-position)

---

## We're experimenting<br>and learning!

Demos 👉 [codepen.io/collection](https://codepen.io/collection/qOEKVN)

---

## Basic Anchor

<div>

```html
<div class="anchor"></div>
<div class="boat-one"></div>
<div class="boat-two"></div>
```

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

.boat-one {
  left: calc(
    anchor(--anchor left) +
    (anchor-size(--anchor width) * 0.5)
  );
  bottom: anchor(--anchor top);
  transform: translateX(-50%);
}

.boat-two {
  left: anchor(--anchor right);
  top: anchor(--anchor bottom);
}
```

</div>

---

## What's happening?

- Elements can be anywhere
- Browsers works out the anchor position and size
- Used by position properties for anchored element
- Containments works as usual for positioning but the browser handles offsets

---

## Fallbacks in action

<div>

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

.boat {
  position-fallback: --compass;
}

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

</div>

---

## Viewport resizing

<div>

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

---

## Container resizing

<div>

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

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

<sub>The lake versus the ocean</sub>

</div>

---

## Content [Out]

<div>

```html
<dialog style="--position-fallback: --fish-set; --anchor: --fish;">
  Wet slippery thing.
</dialog>
<a style="--anchor-name: --fish;">fish</a>
```

```css
a {
  anchor-name: var(--anchor-name);
}
dialog {
  position-fallback: var(--position-fallback);
}

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

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

<sub>You may want to clip on a certain axis</sub>

</div>

---

## Content [In]

<div>

```html
<dialog style="--position-fallback: --fish-set; --anchor: --fish;">
  Wet slippery thing.
</dialog>
<a style="--anchor-name: --fish;">fish</a>
```

```css
a {
  anchor-name: var(--anchor-name);
}
dialog {
  position-fallback: var(--position-fallback);
}

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

<sub>Now constrained by the scroller</sub>

</div>

---

<!-- .slide: data-background-color="hsl(210 80% 20%)" class="code-grid-with-header" style="--code-size: 0.5rem"
## Viewport Detection [Scroll]

--- -->

## Where we need this

---

## Pop-ups

<div>

- Anchoring things in the top layer
  - No out of the box way to do this... yet 🙏
  - JavaScript solutions sometimes hit limits

</div>

---

## &lt;selectmenu&gt;

<div>

- Uses [popup] for the listbox
  - Microsoft demos: [demos/selectmenu](https://microsoftedge.github.io/Demos/selectmenu/)

</div>

---

## Bonus

---

## Charts

<div>
  
  - Think of the combos with many anchors and calc!

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

---

## Menus

<div>
  
  - Nested anchors!

```html
  
  <header style="position: relative;">
    <nav style="position: relative;">
      <span class="nav-links">
        <button id="products-btn">Products</button>
      </span>
      <div popup id="products">
        <button id="css-btn">CSS</button>
      </div>
    </nav>
    <div popup 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>

---

## Fin.

---

## Talking points
- How to detect which side your arrow goes on? Position query?
- Detecting when something is "Out of bounds"
- How to create lots of `position-fallback` sets? Scoped custom properties?

<div>

```css
[popup=hint] {
  --anchor: --some-anchor-link;
  position-fallback: --dynamic-reusable;
}

@position-fallback --dynamic-reusable {
  /* Uses custom property scope instead? */
  @try {
    top: anchor(var(--anchor) top);
    left: anchor(var(--anchor) right);
  }
}
```

</div><br>