Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Lucas Krause
19,924 PointsIs it correct that <link rel="stylesheet" href="..." media="..."> is always downloaded?
Iām not quite sure whether it is correct when Guil says the following about applying media queries this way:
<link rel="stylesheet" href="narrow.css" media="screen and (max-width:320px)">
Another drawback is that style sheets with media queries attached this way,
will still download even if the media queries return false.
They just won't apply to anything.
The good thing about the method we used earlier is that when media queries
are in one CSS file, they're only loaded by the
browser when their conditions are true.
Am I wrong does he really mix up the ways and their advantages and disadvantages?
1 Answer
Andrew McCormick
17,730 PointsI think he's technically right. Using the link tag will force the browser to download and load the stylesheet, though it will not apply to anything until the condition is met. Whereas when using @media , the browser doesn't even look at the nested elements of the media queries until the condition is met. Notice he didn't say that using @media isn't downloaded, he just said it's not evaluated. Many people think that when applying the query to the link tag prevents the browser from making the round trip if the conditions isn't met, however that's not true. The way this works is being constantly worked on an improved in browsers. According to what you are doing, the difference is somewhat negligible, unless you have 20 media queries and therefore would have to force the browser make 20 round trips, would not be good.
Lucas Krause
19,924 PointsLucas Krause
19,924 PointsThanks for your response.
I thought when he said "loading" he actually meant "downloading" instead of "evaluated" but that wouldn't make any sense since the file containing the
@mediarule has already been downloaded :DSo the only advantage of using
@mediainstead of<link>is that only one HTTP request is used for all media-queried styles. But the downloaded size is always the same (regardless of the requests' overhead), isn't it?An advantage of
<link>is that it's not blocking the rendering process until the linked stylesheet is fully downloaded (at least in WebKit) (Your first link is awesome :)). But if all stylesheets are cached there is actually no difference, isn't it?Andrew McCormick
17,730 PointsAndrew McCormick
17,730 PointsI'm not going to say with 100% certainty, but correct that both sheets are downloaded. The issue really comes with
<link>is that each link item costs the browser a round trip. So if you have one stylesheet with 10 media queries in it, that's only 1 trip to download that file. Whereas if you do the same with<link>it would be 10 round trips and your performance would take a hit.Lucas Krause
19,924 PointsLucas Krause
19,924 PointsWell, I understand :) But the feature of a non-blocking stylesheet seems also very attractive to me since when using
@mediathe rendering process is paused until the stylesheet is fully downloaded (which is of cause larger than the one that would be used when using multiple stylesheets and<link>s since it contains all those media queries otherwise distributed to the other files).Anyway the argument of less HTTP requests seems more important to me but probably it's case-related. I think I'm going to prefer
@mediaover<link>in each case because I'm too lazy to spot performance bottlenecks :DTank you a lot.