I think it’s wrong, that light-dark() in CSS only works with colors.

When the decision was made to add syntactic sugar for (prefers-color-scheme: dark), which allows passing different values at the point of definition, why did they choose to only allow it for colors?

This breaks the shorthand for common use cases like changing the background-image based on the color scheme. And that also means, that we cannot use light-dark() in combination with gradients. I’ve refactored the CSS on my website to use it, but I’m disappointed, that its use case is very limited.

With most traffic coming from mobile devices and therefore small screens, are there any websites that have put “desktop” styles in a separate file and only load it, if the media query matches?

Something like this?

<link
  href="big-screens.css"
  media="(min-width: 800px)"
>

This would remove render blocking by desktop styles when mobile devices visit the website. They are still being downloaded, but don’t block the time to first paint.

I don’t know any websites that do this yet, but maybe I just haven’t found them?

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.