Menu
For a site I currently use style.css and a bunch of other stylesheets, 960.css, etc., loaded like this:
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="only screen and (max-width: 960px)" href="css/960.css">
....
Now I am concerned about speed. I know I could combine the files into one big file, but that would mean downloading also irrelevant data.
So basically, my question is: What is a better approach, minimizing the amount of requests, or minimizing the amount of data passed to one user?
615
Conclusion. It doesn't matter if you use one big or multiple media-queries in your code assuming your values are mostly the same. It shouldn't matter if your values are different for each(!) of your hundreds of media-queries but could affect performance (found no way to track this down).
Depending on how you layout your site you may need to use more or less queries, as you only need a query for each seperate layout/design of the site. A good choice for basic use would be Smartphone, Tablet, Standard Screen, HD Screen or 4.
Media queries allow you to not only vary viewport dimensions based on screen size, but they can also help you set different style properties for different devices, including color schemes, font styles, motion settings and animations, borders and spacing, and almost any other CSS property you can think of.
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
On a reasonable speed link the latency and overhead involved in the extra request will probably outweigh the gains by not downloading a small amount of (hopefully minified and gzipped) text data that is none-the-less not required for that user to display the page at that resolution. See Ilya Grigorik's excellent post on latency for more details on how this is proving to be the primary performance constraint for many users.
The latency cost of the extra data will be especially true for users on mobile devices (which will power save their radios when not in use), and even more so on mobile 2G or 3G connections which have a relatively high cost in establishing connections (4G apparently substantially improves on this).
The key, as with all these things, is to test and measure - but I would almost certainly expect that bundling the styles would prove faster for your users. Don't forget each valid stylesheet (where the media query evaluates to true) will block the rendering of the page.
It is also worth noting that Ilya (who works for Google so should know) cites that WebKit will still download stylesheets media queries that return false, albeit with a low priority and in a non-blocking manner.
if the media query evaluates to false then the stylesheet is marked as NonBlocking and is given a very low download priority
and
The only caveat, as Scott indicates, is that the browser will download all enabled stylesheets, even though the screen on your device may not ever exceed the [cited] width
Looking briefly at the webkit source it does seem like this still happens, presumably to allow instant response to screen rotation or window resizing.
// Load stylesheets that are not needed for the rendering immediately with low priority.
223 ResourceLoadPriority priority = isActive ? ResourceLoadPriorityUnresolved : ResourceLoadPriorityVeryLow;
224 CachedResourceRequest request(ResourceRequest(document().completeURL(url)), charset, priority);
225 request.setInitiator(this);
226 m_cachedSheet = document().cachedResourceLoader()->requestCSSStyleSheet(request);
For questions like this I can highly recommend High Performance Browser Networking which you can read online for free.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
