Downside to using media queries in the head to serve responsive stylesheets?

[MikeD]

I’ve been looking around for answers to this but haven’t found anything definitive yet. I curious about the positives and negatives of media queries in the head element to serve size specific stylesheet. I know that additional calls back to the server can result in less than ideal performance. But what about serving a bloated stylesheet with rules for every size device when it usually only requires a subset of those rules. I suspect that the number of calls and the size of the stylesheet will play a role in performance but does anyone know or know where I can find some data to support a decision for one way over another?

The way I’ve been thinking of approaching it is this. In most cases there would be 3 stylesheets listed in the header. One default that includes all the global styles that apply regardless on browser size like basic typography, colors and such thinking mobile first served via the standard link. Then use media queries to serve up a tablet and a desktop stylesheet separately after that.

Thoughts?

[Paulie_D]

Every stylesheet you link is another http request and for some that is important and if http requests are important to you then a single sheet is the way to go…if not then there is nothing wrong with multiples.

I disagree with your number of 3 though…I think it’s probably more like 4 or 5.

Is a single large (I don’t think bloated is appropriate) stylesheet better / faster than multiples. Why not try it both ways and see what happens.

We use a testing site for these sorts of things: http://www.webpagetest.org/

[MikeD]

Here’s why I landed on three. The default sheet would include the layout for phones since much of the layout (at least for my projects) would be full width the number layout styles would be reasonable. Then accomodate the 600 to 1024 mobile context with it’s own more complex layout styles and finally the 1024 and up desktop with it’s own.

In my experience, the greatest number of style changes has been within the tablet context with all the sizes, orientation and display resolutions. It hasn’t made much sense for my work to break things out into more size specific sheets then this. Not to say I won’t if the project creates significant reason to do so.

[Author]

Posts