Modern Web Weekly #43

The modern web, tested and explained in plain English

Photo by Alvaro Reyes / Unsplash

Improved CSS attr() function

In Chrome Canary you can now use the improved CSS attr() function. This function can reed any attribute from the element it's applied to. Using its output however was limited to the CSS content attribute but now you can use it in conjunction with any CSS property.

For example, you can now define the background color of a <div> with a data attribute and then use that in its CSS like this:

<div
  data-bg="#00ff00"></div>

<style>
  div {
    background-color: attr(data-bg type(<color>));
  }
</style>  

The attr() function reads the data-bg attribute and declares that its value is a color value with type(<color>). There are many other value types like for example <string>and <number>. You can find the complete list in the specs.

You can also define a CSS unit if the value you read from an attribute needs to include a unit value like px for example:

div {
  font-size: attr(data-font-size px);
}

or use this as the value of a CSS custom property:

/* set the value of the "--font-size" custom property */
div {
  --font-size: attr(data-font-size px);
}

If the attribute that attr() reads is not present you can also define a fallback value:

div {
  background-color: attr(data-bg type(<color>), #00ff00);
}

(note the comma before the fallback value)

This way, you can expose a couple of (data-) attributes that can be used to style an element solely by changing its attribute values. The benefits that this approach has over utility classes and inline styles is that utility classes can only have fixed values and inline styles can be blocked by content security policies

Checkout the codepen where you can change the data-attributes of the <div> to change its styling and the min and max attributes of the slider to change the background color.

---

If you think offline support doesn't apply to your web app...

...ask yourself what it is you want your users to see when they open your web app while offline.

Is it a screen with content that is fitting for that offline state that at least shows the user something... or a dinosaur?

Chrome and Safari when not connected to the internet

It's choosing between an app that at least starts up or one that treats offline as an error and doesn't do anything at all.

Offline support applies to all web apps, also the ones that need a network to function.

WhatsApp on iPhone when not connected to the internet

This is what WhatsApp looks like on my phone when I'm offline.
It shows me my chats and I can even send messages. Of course, they won't be delivered, but they will be when I'm back online.

No error messages or dinosaurs because WhatsApp doesn't treat offline as an error. It simply provides the best possible user experience for that situation.

Offline is not an error. It's a natural state that your web app can be in and that it should account for by providing the best possible user experience for that situation.

If you're serious about your web app, it should at least start up and show the user something, never the standard browser offline page.

---

PWA Audit: on your way to a great PWA

Do you already have a PWA but are you running into issues with performance, security, or functionality? Or are you not sure how to make your PWA better?

I can help you by running an audit of your PWA

I will evaluate it on more than 35 criteria and provide you with clear and actionable instructions on how to improve it. No generic stuff that you can get anywhere but an in-depth quality checkup to get you on your way to a great PWA.

Some of the criteria I will evaluate it on are:

• Installability

• Cross-device and cross-platform compatibility

• Offline support

• Usability

• Effective use of modern web APIs

• Performance

• Security

Your investment in the improvement of your PWA through the audit is $499 excluding VAT (where applicable).

If you want to request an audit or first would like to know more you can
fill out the form or book a call with me.

---

Anchor positioning in Safari Tech Preview

It's not fully functional yet, but anchor positioning is slowly coming to Safari and is now partially implemented in Safari Tech Preview 210. You will need to enable it in the Feature flags (Develop menu) but then you can already tether elements together although the fallback positioning doesn't work yet.

Anchor positioning in Safari Tech Preview 210

Check the codepen here.

Oh, and there's more Webkit news...

---

Safari 18.2 now supports cross-document view transitions

With Safari coming on board, you can now use cross-document view transitions in both Safari and Chrome, which means view transitions between two complete separate HTML pages.

This is a big no, huge deal because now you no longer need to build a single-page app if you want to have nice page transitions in your web app. This will save you a lot of complexity and JavaScript.

I built What PWA Can Do Today as a single-page app to get the sliding page transition that's common in native apps and trust me, it's complicated, error-prone and generally not much fun to build (let alone debug...).

I'm now in the process of converting What PWA Can Do Today to a multi-page app with static HTML only and will write about it in an upcoming edition of Modern Web Weekly.

Here's what it looks like:

And here you can check the demo:

---

Effective use of view transition types

I recently added the option to expand info about the demos on What PWA Can Do Today on mobile phones. By default, this is hidden on small screens but now you can toggle the view to show or hide more info.

It was also a nice excuse for me to add some more view transitions to it 😉

Here's what it looks like:

But when I first tried to implement it, it looked like this: