Indicate that style sheets can conditionally block scripts on the media attribute value

[domfarolino]

Right now Chrome Canary + Safari don't block the initial rendering of a page on the loading/process of style sheets originating from <link> elements whose media attr does not match current UA environment, while Firefox blocks initial rendering of a page on ALL style sheets loaded via <link> elements regardless of media attribute value. After bringing this up in #whatwg and #content (Mozilla IRC) it seems that the exact behavior isn't exactly specified or is at least hand-wavy. An example demonstrating this can be found @ https://shocking-territory.glitch.me/.

• Open a new tab
• View the network pane in the DevTools
• Load https://shocking-territory.glitch.me/
• (Each link element that loads CSS has a different media attribute, and each file will load a second after the previous one)
• Observe that FF (at least Nightly) takes much longer to render the page initially than Chrome + Safari because it is blocked all all (slow as heck) style sheet loading.

Seems that Anne, Tab, and Boris feel that it is not necessary to actually block rendering on stylesheets where the link's media attr does not match the UA's environment, and Boris mentioned that https://html.spec.whatwg.org/multipage/semantics.html#interactions-of-styling-and-scripting (3rd para) could probably be changed to reflect this behavior in some way. If it is determined the spec should be changed to support this I wouldn't mind helping out and learning :)

/cc @annevk @bzbarsky

Edit:

Bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1386840

[bzbarsky]

So what I said is this: https://html.spec.whatwg.org/multipage/semantics.html#interactions-of-styling-and-scripting third paragraph requires browsers to block on media-not-matching sheets (because those are enabled), unless the UA takes advantage of the "A user agent may give up on a style sheet at any time" weasel-wording.

If the spec intends UAs to not block on sheets that have non-matching media, it should say so explicitly.

[annevk]

That sounds reasonable. So a good start would be to turn that third paragraph into a list of conditions for clarity. And then add a conditional that uses https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#matches-the-environment on the value of the media attribute.