With Safari not supporting the typed attr() function, I thought Apple users would have to wait for an update to see the improved view transitions on my website. But it turns out this is not the case!

Thanks to a toot by Bramus, I learned that Safari supports view-transition-name: auto. When the transition name is set to auto, Safari takes the good old id attribute of an HTML element to uniquely identify it during a view transition. Unfortunately Safari is currently the only browser that supports it.

But since attr() doesn’t care about which attribute it references, I simply altered the CSS I found on David Bushell’s website, which works on Chrome, changed attr() to reference id instead of data-id, and added view-transition-name: auto as a fallback for Safari.

Now view transitions work in both browsers and as a little bonus I can simply use id instead of data-id. Progressive enhancement for the win!

div[id] {
  @media not (prefers-reduced-motion: reduce) {
    view-transition-name: auto;
    view-transition-name: attr(id type(<custom-ident>), none);
    view-transition-class: your-element-type;
  }
}

<div id="unique-identifier">
  I’m my own element in Chromium and Webkit during a view transition!
</div>