Don't rely on invalid media attributes to download?

[yoavweiss]

Don't rely on invalid media attributes to download?

[tomayac]

Looking at the code (briefly-ish), it seems like setting media to "print" would work.

[scottjehl]

I think this change seems fine - loadCSS can function the same way using a valid non-matching query like print, which may be what I would use. That said, a lot of sites use loadCSS (or more generally, the media toggle approach) and I'm not sure how likely it is that they'll update. In those cases, you might cause a bunch of sites to break and lose their css layout. What's a good tool for checking that?

[tomayac]

That ("print" working) is good news per se. 😃

Unconventional idea: what if we hardcoded Chrome’s loading algorithm to consider "only x" still load-worthy?

[scottjehl]

Could I ask, what's the issue leading up to this change? I could see this saving a few requests on some sites, but is it more than that?

[yoavweiss]

Unconventional idea: what if we hardcoded Chrome’s loading algorithm to consider "only x" still load-worthy?

I doubt that would fly. I'm also not sure that loadCSS is the only user-space library doing this.

[scottjehl]

I am sure it isn't. This pattern alone is pretty common, without a JS lib:

<link rel="stylesheet" media="foo" href="styles.css" onload="this.media='all'">

The drawbacks with that are now pretty far in the past, with link[onload] working more broadly.

The onload handlers might be worth searching for, since they might vary less than media usage. There are probably a bunch that set to this.media=screen onload too, though.

[scottjehl]

Noted in the other thread, AMP uses a different value for this pattern, also an invalid mq. https://github.com/ampproject/amphtml/blob/878909e3fa568ff2dceea4589579b76e6b624930/src/font-stylesheet-timeout.js#L89-L92

[tomayac]

Noted in the other thread, AMP uses a different value for this pattern, also an invalid mq. https://github.com/ampproject/amphtml/blob/878909e3fa568ff2dceea4589579b76e6b624930/src/font-stylesheet-timeout.js#L89-L92

Tracked in ampproject/amphtml#22984.

[tomayac]

Could I ask, what's the issue leading up to this change? I could see this saving a few requests on some sites, but is it more than that?

This came up in the context of CSS loading strategies for dark mode (non-publicized staging link, please don’t share).

[emilio]

@tomayac fwiw, that post contains an error in the "Finding out if dark mode is supported" section. (prefers-color-scheme) is supposed not to match if there's no preference for light or dark, so the right way to test whether it's supported is not window.matchMedia('(prefers-color-scheme)').matches but window.matchMedia('(prefers-color-scheme)').matches || window.matchMedia('(prefers-color-scheme: no-preference)').matches (or something like that). See w3c/csswg-drafts#3857 for more fun stuff related to that.