I’m working on RWD and I’ve come across this mobile first technique
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="enhanced.css" media="screen and (min-width: 40.5em)">
The first style is included on all pages and the second style is only included when the media query is met. However I’m using the HTML5 boilerplate and I want to always have the css helpers at the end of the css, the easiest way I can think of would be to do this
Now the styles are separate and I can include helpers at the end of each style (higher resolutions also have one less request ), this works for me all right without any hiccups when changing between the styles. My question is, is it possible some OS/browsers could calculate ems slightly different? (which could cause the styles to overlap or create a gap)
You are probably better off just setting pixels rather than ems in there. Then you have a better idea of what you are getting, because the pixel to em conversion is very unreliable. Also, if you just use this:
<link rel="stylesheet" href="css/base.css" media="screen and (max-width: 40.4375em)">
<link rel="stylesheet" href="css/enhanced.css" media="screen and (min-width: 40.5em)">
some older browsers (including IE8) will get no styles at all, because they don’t understand media queries.
Hmm, I’m not convinced. I’ve experimented with both and still find px is better. I at least think it would be dangerous to try to target smaller devices with em measurements.
Anyhow, I personally perfer to put my media rules in the main style sheet anyway, rather than have separate style sheets. But that’s on smallish sites, I guess.
Think about this: portrait from landscape. In this case, your users have to wait for additional resources to be downloaded, two or more stylesheets.
Anyway, that’s how HTML5 BP is doing it, one big stylesheet, precisely for performance. You have also HTML5 MBP, if you want to start mobile first with them: http://html5boilerplate.com/mobile
If the additional stylesheet rules found in the media queries account for more than 10-15% of the base CSS, then I’d say you’re doing something wrong. That’s why there’s no need for “externalized” media queries.
Finally, if you find yourself calculating such small dimension differences, 647 versus 648, again, you’re doing something wrong, and your use of em is no longer valid. The differences in style should occur from at least 7-8 ems up or more.
Speaking of which, definitely yes, OS/browsers would calculate em differently. They’d calculate everything differently, a reason why precise calculations always fail on the large scale.
Sounds like you are doubling up rules then, which is inefficient, IMHO. A stylesheet is usually less of a download than a very small image. I double either of your style sheets above with max or min widths around 40ems would apply to mobiles anyway. (E.g. iPhone max-width 480px.)
I’ve seen this before but I’m a little confused about the benefit, because the normal boilerplate claims to be mobile-first?
[QUOTE=itmitică;5151543]If the additional stylesheet rules found in the media queries account for more than 10-15% of the base CSS, then I’d say you’re doing something wrong. That’s why there’s no need for “externalized” media queries.[/QUOTE]
imo the benefit for mobiles that have limited bandwidth/slower connection is worthwhile.
The original idea is that the second style sheet builds upon the first one. So mobiles will only download the first style sheet, and desktops with have better connections will download a second one with the rules for higher resolutions. However if I split them like how I want, you’re right.
It’s better not to guess. The smart phones I’m aware of won’t download anything wider that 480px. It’s better to specify that than guess how many px you may be dealing with.
If your first style sheet is for all devices, it’s better to remove the media=“” bit altogether, as it’s just getting in the way (blocking out mobiles and IE8 and under). It’s perfectly reasonable to serve up a basic style sheet for all devices, but in that case, it shouldn’t have any media rule on it.
/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}
When devices report smaller px, but have higher ppi, MQs come in handy:
/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}
), this works for me all right without any hiccups when changing between the styles. My question is, is it possible some OS/browsers could calculate ems slightly different? (which could cause the styles to overlap or create a gap)
They do go beyond 480px. ^