Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resource Hints and media queries (on <link>) #11

Closed
igrigorik opened this issue Jul 13, 2014 · 3 comments
Closed

Resource Hints and media queries (on <link>) #11

igrigorik opened this issue Jul 13, 2014 · 3 comments
Labels
enhancement

Comments

@igrigorik
Copy link
Owner

Should MQ's be evaluated on resource hints? What are the edge cases? E.g...

<link rel="preload" href="desktop.js" media="max-width:40em">
<link rel="prefetch" href="logo-2x.png" media="min-device-pixel-ratio: 2">
<link rel="prerender" href="next.html" media="screen">

/cc @yoavweiss
@hexalys
Copy link

hexalys commented Jul 22, 2014

The edge cases I know of, occur when you alter the viewport with Javascript upon device conditions.

For example, when someone browses a responsive designed web page on Android in Desktop Mode, I do a rescale of the viewport to present the user with a tablet width instead of the default device-width (accordingly to his spoofed user agent request). Noting that such adjustment can only be done using JS.

The second edge case, is the IEMobile Device Adaptation behavior or the snapped mode IE Desktop behavior requiring @-ms-viewport { device-width; } prior to having defined the final device-width. i.e. The stylesheet (inline or external) must be run first.

I don't know what the preloader(s) do in regards to <link> elements, but @yoavweiss suggested issues with @viewport and the preloader not taking them into account...

ATM, it seems the pre-loader would be requesting media dependent resources not matching the final viewport.

@yoavweiss
Copy link
Contributor

I think that the media attribute should be evaluated for resource hints. The main use case I can think of is to preload/prefetch dynamically loaded JS & CSS of third party resources, iframes or followup pages.

Seems like support for that is already in the HTML spec, so I don't think there's a need for normative text around that, even though a note would probably be good.

Regarding @viewport, we'd need to teach the preloader to take that into account (also for external CSS deprioritization, as well as for responsive images), and authors would have to use it inline, and at the <head>'s top.

@igrigorik
Copy link
Owner Author

@yoavweiss sanity check.. how does that look?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@igrigorik @yoavweiss @hexalys