The Disabled-Enabled Linked Stylesheet Experiment

Script placement: End of head tag
Stylesheet inclusion: A disabled link tag is included towards the end of the head element
Execution: Immediate
Expected results: An unused stylesheet link causes no blocking behavior (and, depending on browser, may not load at all). But what happens when we remove the disabled property while the document is still loading? It should theoretically be blocking, but probably won’t be.
Observed results: Tested in late 2022: The disabled-then-enabled linked styles load in a completely non-blocking manner in Chrome (106) and Firefox (10). In Safari (16.1) and MSIE (11), they are blocking. (These results are identical to head-async-test-no-timeout.)

The styles are referenced in the <head> as a <link disabled rel=stylesheet /> element. But immediately following this link tag is a script tag that removes the disabled property from the link. the linked stylesheet should take slightly over 5 seconds to load.

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.

There may be a 5-second delay when enabling styles due to differences in how browsers handle a stylesheet that was loaded into the current page already but with headers that disable caching (which I do for testing purposes).

return to test suite · tests by alan hogan