Question for you all. Has it been considered to add some or all of the attributes related to loading behavior to the link element when rel=stylesheet? This kinda ties into my question concerning last week concerning the disabled attribute. I made a video and this started some discussions on LinkedIn and this idea was floated. For example:

<link rel=stylesheets href="./css/lowprio.css" media="screen" loading=lazy>

or

<link rel=stylesheets href="./css/lowprio.css" media="screen" defer>

or

<link rel=stylesheets href="./css/lowprio.css" media="screen" fetchpriority="low">

Of course not all of these, but the one or one's that would make most sense for CSS.

Defer you can get with something like media="not all" onload="this.media = 'screen'" (but not great that it needs js).

It's not clear what loading=lazy would do?

Fetchpriority does exist and does affect the network fetch priority of stylesheets afaict

Nice!

tl;dr

Firefox

• makes a fetch request on load
• does not apply the CSS
• when the disabled flag is flipped
• applies the stylesheet and loads any assets referenced in the CSS

Chromium

• makes a fetch request on load
• does not apply the CSS
• when the disabled flag is flipped
• seems to make another fetch request for the CSS but most likely gets this from cache
• applies the stylesheet and loads any assets referenced in the CSS

Safari

• no fetch request on load
• when the disabled flag is flipped
• loads the CSS and any assets referenced in the CSS
• applies the stylesheet

I also noticed that fetchpriority is a hint and not an instruction so it is up to the browser to determine whether to actually lower the priority.

I also see that we do have blocking on link rel=stylesheet but, this is to intentionally instruct the browser to render block which, according the the docs on MDN, is mostly useful if the stylesheet was injected with JavaScript as stylesheets linked in the head of the document will already be render blocking by default.

So, perhaps what is "missing" for rel=stylesheet is a defer that is an instruction and not a hint.

We then have disabled, which is a HARD do-not-load until I say so :)

defer, which is an explicit instruction to the browser to load the stylesheet with a lower priority (lowest??)

fetchpriority - which is a hint that the browser can choose to ignore if it determines there to be little or no benefit to fetching the external resource with a lower priority that the other stylesheets.

Thoughts?