Test page ignores priorities

[tomayac]

Found this via @dgieselaar's https://medium.com/zoover-engineering/optimizing-css-by-removing-unused-media-queries-80b5508c6de9.

One thing to point out is that non-matching media query links are simply downloaded with lowest priority and thus should not interfere with mission-critical resources (last column):

[dgieselaar]

@tomayac is there any reason why the browser will still download those sheets if it can tell that they are not important?

[tomayac]

@tomayac is there any reason why the browser will still download those sheets if it can tell that they are not important?

@dgieselaar Well, the user could always decide to resize their window (width, height, aspect ratio), to print the document, etc., and even things that at first sight seem static (like the resolution) can change when a user with a multi-screen setup moves a window from say a Retina laptop screen to a bigger desktop monitor, or the user can unplug their mouse, and so on…

Truly static things that can't change (a TV device can't suddenly turn into something else) are actually being deprecated in Media Queries Level 4 (see the yellow note box); and the recommendation is to rather target media features instead (see the text under the red issue box).

Even invalid values still need to be considered, according to the ignore rules in the spec.

So long story short, browsers try to be as smart as possible by applying priorities, and Lowest is a reasonable value for the cases in @scottjehl's test.

[dgieselaar]

Thanks! Very insightful.

…

On Thu, Nov 8, 2018, 17:17 Thomas Steiner ***@***.***> wrote: @tomayac <https://github.com/tomayac> is there any reason why the browser will still download those sheets if it can tell that they are not important? @dgieselaar <https://github.com/dgieselaar> Well, the user could always decide to resize their window (width ***@***.***/width>, height ***@***.***/height>, aspect ratio ***@***.***/aspect-ratio>), to print <https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types> the document, *etc.*, and even things that at first sight *seem* static (like the resolution ***@***.***/resolution>) can change when a user with a multi-screen setup moves a window from say a *Retina* laptop screen to a bigger desktop monitor, or the user can unplug their mouse ***@***.***/any-pointer>, and so on… Truly static things that can't change (a TV device can't suddenly turn into something else) are actually being *deprecated* in *Media Queries Level 4* (see the yellow note box <https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types>); and the recommendation is to rather target media features <https://drafts.csswg.org/mediaqueries/#media-feature> instead (see the text under the red issue box <https://drafts.csswg.org/mediaqueries/#media-types>). Even invalid values still need to be considered, according to the ignore rules <https://www.w3.org/TR/CSS2/conform.html#ignore> in the spec. So long story short, browsers try to be as smart as possible by applying priorities, and Lowest is a reasonable value for the cases in @scottjehl <https://github.com/scottjehl>'s test <http://scottjehl.github.io/CSS-Download-Tests/>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#11 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAVh3PnP-FegpkhYeITaRLwozvPUtPpcks5utFktgaJpZM4YTTwA> .

[tomayac]

I figured maybe more people might find my answer useful and have turned it into a blog post.

[ozcoder]

They are still counted as render blocking, right?
I was thinking of putting a NOSCRIPT tag around our print.css, and using JavaScript on page load (async) to add the print stylesheet in, so at least it wouldn't be render blocking for normal JavaScript enabled browsers.

[tomayac]

They are still counted as render blocking, right?

@ozcoder Actually no, check the frames below. At simulated Slow 3G (to more easily see the effect), the page renders at ~4.5s, when the two first stylesheets have finished loading:

The render-blocking ones are bootstrap.css and only-all.css, that is, the ones loaded with Highest priority. Everything else is loaded with Lowest priority and not render-blocking.