I have a website that tries to make sensible use of media queries and avoid 'expensive' CSS for users of mobile devices. My eventual goal is to make it 'mobile-first' but for now, since it is based on Twitter Bootstrap it isn't.

I included some background images (Base64 encoded) and styles that would only apply to "full-size" browsers in a separate stylesheet loaded asynchronously via modernizr.load.

In Firefox (but not webkit browsers) it makes it so that if you navigate away from the homepage and then return, the content (specifically, all those extras) 'blinks' when it finishes loading...or maybe I should say reloading.

If, instead of using modernizr.load, I include that stylesheet via a link... in the head with a media query attribute will it prevent the data from being downloaded by non-matching browsers (mobile, based on screensize) that it is inapplicable to?

3 Answers 3


YOu are doing it correctly with the MediaQueries. You might want to use modernizer as fallback, and find a polyfill to add media query support to legacy browsers. One thing I would advise you on is not to break up your stylesheet into multiple files. (Mobile.css / 920.css / tablet.css). Its best just to have one big css file, and then the css media rules at the bottom. Look at twitter-responsive.css to get an idea of what i mean.

Also look at BootStrapCDN.com They combine bootstrap.css / bootstrap-responsive.css into one single download. This speeds things up. You should use BootrapCDN.com to serve twitter bootstrap. NetDNA is super fast, and reliable. It will save you some bandwidth fees too.

Then add your own Custom.css after bootstrap which includes your own customizations that override bootstrap.css. Here include all your customizations for responsive layouts.

  • github.com/scottjehl/Respond - Media Queries for browsers that dont support them yet.
    – Frank
    Commented Nov 13, 2012 at 9:21
  • Thanks, I started out by combining the stylesheets into one but with Base64 Encoded images it was big. I'm trying a middle-of the road approach (my CSS is at this point is merely based on Bootstrap so using a pre-packaged CDN won't help--although I do use NetDNA for the .js). There are a few things which recur sitewide (like my font-icons) so I am using consistent URLs with long-expiration headers as suggested in HTML5 Boilerplate.
    – adam-asdf
    Commented Nov 13, 2012 at 10:51

Apparently, modern browsers handle this like the behavior I had expected when I asked the question nearly 8 years ago.

I was doing some reading on web.dev about CSS performance and came across this article on eliminating render blocking resources and right at the end where it explains techniques for reducing render blocking resources it mentions splitting your stylesheets up into multiple separate external files with appropriate media query attributes on the link element.

To quote the relevant part of that article:

Another approach to eliminating render-blocking styles is to split up those styles into different files, organized by media query. Then add a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device (see Render-Blocking CSS).


Reset your browser then check properties. clear cache and cookies.

  • I did all that before posting the question. When testing I used an emulator so it may not have been totally accurate but the emulator downloaded every file, regardless of conditional comments so I abandoned that approach.
    – adam-asdf
    Commented Apr 4, 2013 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.