The Disabled Linked Stylesheet Experiment

Script placement: n/a – no script used to load CSS
Stylesheet inclusion: A disabled link tag is included towards the end of the head element
Execution: n/a
Expected results: Naively, one would expect an unused stylesheet link to cause no blocking behavior, and possibly not even any requests.
Observed results: Tested in late 2022: The disabled, linked styles load in a completely non-blocking manner in Chrome (106) and Firefox (10). In Safari (16.1), they aren't requested at all. In MSIE (11), they completely block page render and script execution (despite being correctly disabled and never applying to the page, but of course MSIE11 is a dead browser so it no longer matters).

This page does not use JavaScript to load any styles; in contrast to most of the test suite, we never want the linked stylesheet to load at all. The styles are referenced in the <head> as a <link disabled rel=stylesheet /> element. If requested, the linked stylesheet should take slightly over 5 seconds to load.

Because the stylesheet is disabled, the CSS loading indicator below is worthless (unless the browser incorrectly applies the disabled stylesheet, which none do).

CSS loading indicator:

Not yet loaded — or loaded, but not applied (due to disabled property).

JavaScript detection of CSS loading state:

Unitialized

A script embedded in this paragraph was executed (but not necessarily rendered) seconds after this small HTML page downloaded. (Technically, after it began downloading, but it is such a small file that it is essentially, usually instantaneous.) Values close to 0 indicate that the stylesheet was not requested in a blocking manner; values over 5s indicate that it was.

Apply disabled styles?

Do you notice a 5-second delay even though the stylesheet was preloaded (in e.g. Chrome 106)? That is because I set headers on the stylesheet that disable caching, purely for testing purposes.

return to test suite · tests by alan hogan