April 2022 Frontend Updates: The Dialog Element, Priority Hints and Latest Releases

This month we cover:

The Dialog Element

Creating web dialogs has always been a matter of using JS libraries or hacking with z-index, pointer-events and JS to show the element on top and block the other mouse or keyboard events if needed.

There was a native element though, but it was not widely supported, and thus, it was still pretty experimental… Until right now, that it just landed in Safari 15.4 across all Apple devices, as well as Firefox 98.

It’s not just a semantic element, it has an API for opening and closing and special CSS features, like the ::backdrop pseudo-element. You’ll still need to write JS to open it, but it already handles a lot of things for you, like always being on top of everything no matter the z-index and focusing into the modal when it gets opened.

Now that it is supported in every evergreen browser, it is a good time to take a look at it:

Priority Hints

When a browser parses HTML, it discovers resources like images, styles and scripts and starts downloading them to render the full version of the page. The order in which the assets are downloaded is determined by the browser itself, taking into account resource type, position in the document, etc. Browsers are usually pretty good at determining download priorities, but they may not always be optimal.

That’s where Priority Hints come into play. Through the fetchpriority attribute, priority hints allow you to tell the browser the relative priority of a resource, like in the carousel example below, where you may want to prioritise the visible or above the fold image:

<div class="carousel">
  <img class="slide-1" fetchpriority="high" ... />
  <img class="slide-2" fetchpriority="low" ... />
  <img class="slide-3" fetchpriority="low" ... />

You can also prioritise iframes, scripts, links and fetch requests, the latter using Request.priority.

Unfortunately, this is only supported in Chrome to this day, but it’s a progressive enhancement that won’t hurt unsupported browsers.

There is a great article in web.dev where they discuss fetchpriority along with other resource hints (like preload or async/defer) to optimise resource fetching. Check it out if you want to know more!

Release time!

There were a couple of significant releases this month:

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!

Let’s Chat