Blob based 'link stylesheet' vs standard 'style' tag

Question

I wonder what is the benefit and difference when using styles as Blob links:

<link rel="stylesheet" href="blob:http://www.domain.com/hash-here"> 

over the standard tag:

<style>...</style>

I mean Blob creation like:

var blob = new Blob([css_here], {type: 'text/css'});
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
head.appendChild(link);

Thanks in advance.

Frosting

Answer 1

• Memory management

If you put stuff as style, and then remove - it's gone. However, if you put stuff as blob url and then remove - you still have the blob url stored in memory, and it should be released manually. See the notes here: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Notes

• Relative paths resolution

With style all relative urls inside are resolved transparently (e.g. @font-face { src: url('/assets/font.ttf'); }. But with blobs, those relative urls are treated as relative to the blob url itself (i.e. relative to blob:http://domain/some-hash). So the relative urls will effectively stop working in this case.

Abominable

Answer 2

Since Firefox doesn't yet support CSSStyleSheet and adoptedStyleSheets, your technique is very useful for creating self-contained web components prior to the ubiquity of Constructable Stylesheets. See the surrounding comments in this bug report.

Husha