I love with how little this website managed to mimic displays of old TVs. The scan lines look great and are just a pure CSS background.

hypertext.tv

Daily programming for the handmade web. Airing now.

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>

I noticed that the view transitions on my website stopped working in Safari. The reason was that I moved and nested the lines for activating them inside :root. Chrome still applies them if the declaration is nested, but Safari doesn‘t.

/* nesting breaks view transitions in Webkit */
:root {
  @view-transition {
    navigation: auto;
  }
}

/* works in Webkit and Chromium */
@view-transition {
  navigation: auto;
}

I’ve just spent a long time improving the little view transition of tags on my bookmarks page. Before my fixes the text was being stretched and the transition looked out of place. So I took the time to dive into how to make view transitions look like they are supposed to and I learned quite a few things.

By far the best resource for learning about this topic is Jake Archibald’s post about handling aspect ratio changes. He also has a great video on how to debug view transitions with dev tools.

To add view transitions to specific elements on my website, I’ve copied the code I found on David Bushell’s website:

@media not (prefers-reduced-motion: reduce) {
  view-transition-name: attr(data-id type(<custom-ident>), none);
  view-transition-class: heading;
}

With this CSS you just need to add a unique data-id="id-{some_identifier}" attribute to your elements (replace {some_identifier} with a unique id) and they’ll each transition as a single object.

I’ve now added view transitions to my blog headlines, my notes and the little tag cloud on my bookmarks page.

I’ve just stumbled upon the UA+ reset with lots of interesting additions.

This lead me to finally separate my own reset.css into a second base.css, which does more than just resetting default browser styles.

The goal is that reset.css can be copied into any project to act as a baseline across projects. base.css is then setting the basic styles for the given project on top of the reset, like colors, fonts etc.