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.
You can follow my Notes using any RSS reader — my personal favorite is Reeder.
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.
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.