Welcome to WebmasterWorld Guest from 34.238.194.166

Forum Moderators: not2easy

Message Too Old, No Replies

Resolution dependent CSS

     
3:59 am on Feb 6, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1137
votes: 115


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?
4:51 am on Feb 6, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15753
votes: 826


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.
8:02 am on Feb 6, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1137
votes: 115


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.
10:46 am on Feb 10, 2016 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 11, 2015
posts: 328
votes: 24


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

Do the link/stylesheets with media queries get ignored by <IE9 or included unconditionally?
3:46 am on Feb 22, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1137
votes: 115


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?
4:20 am on Feb 22, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


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.
2:05 am on Feb 23, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1137
votes: 115


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 }
}


?
3:51 am on Feb 23, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


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.