[go: nahoru, domu]

Skip to content
This repository has been archived by the owner on Oct 21, 2022. It is now read-only.

Don't rely on invalid media attributes to download? #304

Closed
yoavweiss opened this issue Jun 24, 2019 · 10 comments
Closed

Don't rely on invalid media attributes to download? #304

yoavweiss opened this issue Jun 24, 2019 · 10 comments

Comments

@yoavweiss
Copy link

loadCSS is using invlid media attribute values and relies on the fact that browsers currently load them. But loading those resources doesn't make much sense, so we'd love Chrome to stop doing that.

However, that'd create compat concerns with libraries that are relying on that behavior. If loadCSS could stop being one of those libraries, that'd be awesome! :)

@tomayac
Copy link
tomayac commented Jun 24, 2019

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

@scottjehl
Copy link
Member

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
Copy link
tomayac commented Jun 24, 2019

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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

<link rel="stylesheet" media="foo" href="styles.css" >

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
Copy link
Member

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
Copy link
tomayac commented Jun 24, 2019

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
Copy link
tomayac commented Jun 24, 2019

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
Copy link
emilio commented Jun 25, 2019

@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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants