#CSS
:is() selector 🎉
the successor to :any() and :matches()
sneak peak into our talk, here's a neat gif I made with XD showing what the :is() selector syntax can do. be excited for Chrome Dev Summit y'all!
developer.chrome.com/devsummit/
make taps 300ms faster with 1 line of CSS:
```#css
touch-action: manipulation;
```
means:
element doesn't want double-tap to zoom
result:
browser *immediately* responds to taps instead of waiting 300ms for a "potential" 2nd tap 🤓
caniuse (YES!) caniuse.com/mdn-css_proper…
Can you believe these slides are full page loads to completely new HTML pages‽
#smashingconfsmashing-transitions.netlify.app
^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation
what. rad. tech. 🤯
make focus a little more engaging
```css
@Media (prefers-reduced-motion: no-preference) {
:focus {
transition: outline-offset .25s ease;
outline-offset: 5px;
}
}
```
try it codepen.io/argyleink/pen/…
.logo {
display: flex;
place-items: center;
gap: .5ch;
font-size: 20vmin;
}
.logo > img {
max-block-size: 1.25em;
}
🤩 logo img height is 125% of a responsive font-size (20vmin) letter M.. relative units are so cool!
codepen.io/argyleink/pen/…
🎉 flex that gap in the latest release of Chrome Canary 🎉
```css
display: flex; 🦾
gap: 1ch; 🔥
```
early adopters:
help us test it out won't ya!?
note:
requires web experiments enabled, visit chrome://flags/#enable-experimental-web-platform-features in Canary to enable
I can't stop seeing #CSS View Transitions!
here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲
try it codepen.io/argyleink/pen/…
