Chapter 11 | type, referrerpolicy, imagesrcset, and imagesizes
In this chapter we will be wrapping up the
link element by looking at the following attributes:
We have encountered the
type attribute when we discussed some of the other attributes already but, I thought I would expand a little on its use. This attribute, when used on the
link element, provides a hint to the browser indicating the type of resource that is being linked to. For example:
It is important to note that the type specified, should be a valid MIME type string
For external resources, browsers can also use the
type attribute to avoid fetching resources they do not support.
You may have read about the potential security and privacy implications of using
target="_blank" and the ways of resolving or avoiding the problem alltogether. Well, the
referrerpolicy attribute brings the control of
link elements with fine grained control over what is, and is not, sent to the destination.
The possible policies at the time of writing are as follow: “
strict-origin-when-cross-origin”, or “
unsafe-url”. Refer 🙃 to the official documentation for the most up-to-date information.
Let’s look at two examples:
Assuming that the page that contains these elements are being served from
https://example.com/app.html the following will be sent to the target destination:
- As the name suggests, no referrer information(Referrer Header) will be sent to the destination at all
- Will send a referrer with the value
https://example.com/, but only if the destination is also HTTPS.
as attribute specifies the potential destination(i.e. resource type) for the preloaded resource. This attribute must be specified when preloading resources. You can also use this attribute with
modulepreload but, the value must be of a script-like type. Script-like type? 🤔
Yup. As defined in the Fetch standard documentation around destination types, there are a couple of possible values that are script-like in nature: “
sharedworker”, or “
As mentioned when we discussed the
stylesheet value of the
rel attribute, there is a pretty common pattern used to lazy load CSS by specifying an invalid initial value for stylesheets you do not need to load immediately.
rel and trigger a load, parse and execute:
Turns out there is a standard attribute that can be used for this exact purpose! 🤯
link elements and remove the
disabled attribute, triggering a fetch, and apply of the stylesheet 🎉
In conclusion, we look at the
imagesizes attributes. These attributes are used in conjunction with
preload and the
as attribute of type
image. One of the aspects of HTML we will look at when we get to the
picture elements is the concept of responsive images. These two attributes work in tandem with these elements allowing you to preload the appropriate image sources based on your defined
sizes. For example:
Later in the
body of your HTML you will then have the following:
Resize the output window below to see the different varations of the image load.
The combination of the two can be particularly useful for loading assets that are crucial to the user experience. Using this merely for decorative images is probably not the best use case.
That’s a wrap 🎁 Next up, the
meta element. Until then, keep making the web awesome! o/\o