Resolution dependent CSS

[csdude55]

Let's say that I'm setting up CSS dependent upon screen width, like so:

<link rel='stylesheet' media='only screen and (min-width: 801px)' href='css/high.css'>
<link rel='stylesheet' media='only screen and (min-width: 701px) and (max-width: 800px)' href='css/medium.css'>
<link rel='stylesheet' media='only screen and (min-width: 481px) and (max-width: 700px)' href='css/low.css'>
<link rel='stylesheet' media='only screen and (max-width: 480)' href='css/mobile.css'>

I understand that < IE9 doesn't support this, which is about 6% of my IE traffic. Not huge, by any means, but still, it exists.

So how do I create a failsafe in case the users resolution doesn't match anything specified, or if their browser doesn't support the condition?

[lucy24]

Why don't you throw in a generic "link rel='stylesheet'" that doesn't specify media? It seems safe to assume that your MSIE < 9 users will not be on mobiles, and will have a width of > 800px, so treat that as your default.

In any case, isn't the combined "max-width" and "min-width" overkill? Put the rules in the right order and only one should get loaded anyway. The more complicated you get, the more room there is for Unintended Consequences.

[csdude55]

Why don't you throw in a generic "link rel='stylesheet'" that doesn't specify media? It seems safe to assume that your MSIE < 9 users will not be on mobiles, and will have a width of > 800px, so treat that as your default.

In any case, isn't the combined "max-width" and "min-width" overkill? Put the rules in the right order and only one should get loaded anyway. The more complicated you get, the more room there is for Unintended Consequences.

I'm assuming you mean to do something like this:

<link rel='stylesheet' media='only screen and (max-width: 480px)' href='css/mobile.css'>
<link rel='stylesheet' media='only screen and (max-width: 700px)' href='css/low.css'>
<link rel='stylesheet' media='only screen and (max-width: 800px)' href='css/medium.css'>
<link rel='stylesheet' href='css/high.css'>

Wouldn't having a generic CSS at the end overrule the other ones? Example, if I have #whatever { width: 700px } in low.css, and then #whatever { width: 975px } in high.css, wouldn't everyone be assigned the width of 975px regardless of their resolution?

Or if I put it first, wouldn't the server still open it and assign all of the values, then overwrite them when it hits the next stylesheet that matches? That wouldn't be tragic, it would just be marginally slower, I think.

[whitespace]

You could use (IE-only) conditional comments to target <IE9

Do the link/stylesheets with media queries get ignored by <IE9 or included unconditionally?

[csdude55]

I appreciate all of the help! Now I have a follow-up question on this, though.

Is it better to link to several conditional stylesheets, like:

<link rel='stylesheet' media='only screen and (max-width: 480px)' href='css/mobile.css'> 
<link rel='stylesheet' media='only screen and (max-width: 700px)' href='css/low.css'> 
<link rel='stylesheet' media='only screen and (max-width: 800px)' href='css/medium.css'> 
<link rel='stylesheet' href='css/high.css'> 

Or to use @media inside of a single stylesheet, like:

.container { width: 975px }

@media (max-width:800px) {
 .container { width: 775px }
}

@media (max-width:700px) {
 .container { width: 675px }
}

@media (max-width:480px) {
 .container { width: 375px }
}

Is one faster than the other, or better in any other practical way? And am I correct that, in the second, < IE9 would simply ignore the @media rules and just default to the first .container?

[not2easy]

This example is the way I handle it. Since only a few elements change at different widths, I see it is a simpler way to make the rules available and keep track of changes. Either way would work, it would depend on your preferences. Unless the css for different widths were quite large files with several adjustments, why make separate requests when probably 98% is identical?

<IE9 should not be affected by having the other settings included.

[csdude55]

In yours, do you keep the "only screen and"? If so, is it in quotes or not?

// This
@media (max-width:480px) {
 .container { width: 375px }
}

// or this
@media only screen and (max-width:480px) {
 .container { width: 375px }
}

// or this
@media 'only screen and (max-width:480px)' {
 .container { width: 375px }
}

?

[not2easy]

I use syntax similar to your first example here. If you have already specified the media and limiter in the reference link then it is a condition sent with the file. Either way works. Since I like to keep the css as light/small as possible, I try to leave out whatever is default or overkill. But that's just my preference.