SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Separate styles with media queries

    I'm working on RWD and I've come across this mobile first technique

    Code:
    <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

    Code:
    <link rel="stylesheet" href="base.css">
    
    <link rel="stylesheet" href="enhanced.css" media="screen  and (min-width: 40.5em)">
    
    <link rel="stylesheet" href="helpers.css">
    This would add another request though, so what I came up with was this

    Code:
    <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)">
    647 (pixels) / 16 = 40.4375
    648 (pixels) / 16 = 40.5

    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)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <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.

  3. #3
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    I did think about that, I was using ems because of this article.

    Quote Originally Posted by ralph.m View Post
    some older browsers (including IE8) will get no styles at all, because they don't understand media queries.
    I'm handling this with a conditional statement, I just didn't bother to put it in example .

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Noctuary View Post
    I did think about that, I was using ems because of this article.
    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.

  5. #5
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    They are split for performance, mobiles only have to download the first one rather than a bigger style sheet with a lot of unused rules.

  6. #6
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Ralph is correct.

    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Noctuary View Post
    They are split for performance, mobiles only have to download the first one rather than a bigger style sheet with a lot of unused rules.
    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.)

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    (E.g. iPhone max-width 480px.)
    Depends which one: http://www.iphoneresolution.com/

    iPhone 4 also has higher ppi: http://www.apple.com/iphone/features...a-display.html

  9. #9
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    You have also HTML5 MBP, if you want to start mobile first with them: http://html5boilerplate.com/mobile
    I've seen this before but I'm a little confused about the benefit, because the normal boilerplate claims to be mobile-first?

    Quote Originally Posted by html5boilerplate
    The HTML5 Boilerplate favours a "mobile first" approach to design and development; some placeholder Media Queries are included to help you on your way.
    Quote Originally Posted by itmitică View Post
    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.
    imo the benefit for mobiles that have limited bandwidth/slower connection is worthwhile.

    Quote Originally Posted by ralph.m View Post
    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.)
    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.

  10. #10
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.)
    With a base of 16px, wouldn't 40ems be around 600+ pixels?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Noctuary View Post
    The original idea is that the second style sheet builds upon the first one. So mobiles will only download the first style sheet ... With a base of 16px, wouldn't 40ems be around 600+ pixels?
    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.

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Noctuary View Post
    I've seen this before but I'm a little confused about the benefit, because the normal boilerplate claims to be mobile-first?
    Both allow you the freedom to tackle a responsive design.

    The mobile one is specifically designed with mobile in mind. If it's mobile first, then it's MBP.

    The "normal" one also has a mobile first approach, but it's less specific about the mobile world.


    Quote Originally Posted by Noctuary View Post
    imo the benefit for mobiles that have limited bandwidth/slower connection is worthwhile.
    If the ones you're using the BP from seem to think different, I'm afraid you're in minority here.

  13. #13
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    I believe apple created density-independent pixels so iPhone 4 wouldn't break mobile sites? so the iPhone 4 still uses 320pxs in browsers.

  14. #14
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Noctuary View Post
    I believe apple created density-independent pixels so iPhone 4 wouldn't break mobile sites? so the iPhone 4 still uses 320pxs in browsers.
    It reports, it's not "using".

    That's why I said MBP accounts better for mobile:
    Code:
    /* 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 */
    }

  15. #15
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The smart phones I'm aware of won't download anything wider that 480px.
    There are smartphones and smartphone. They do go beyond 480px. ^

  16. #16
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Alright, I'll stick to one style sheet and check out MBP :P.

    Thanks for the help.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by itmitică View Post
    There are smartphones and smartphone. They do go beyond 480px. ^
    Their display does, of course, but I mean they ignore styles that specify screens wider than 480px.

  18. #18
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Their display does, of course, but I mean they ignore styles that specify screens wider than 480px.
    When devices report smaller px, but have higher ppi, MQs come in handy:
    Code:
    /* 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 */
    }

  19. #19
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Noctuary View Post
    Alright, I'll stick to one style sheet and check out MBP :P.

    Thanks for the help.
    You're welcome.

  20. #20
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    @Noctuary

    I forgot to mention.
    You would find this attractive too, I think: http://stuffandnonsense.co.uk/projects/320andup/

    It's based on H5BP.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •