Send different CSS to phone and desktop?

Discussion in 'Web Design and Development' started by Nermal, Nov 18, 2015.

  1. Nermal Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    New Zealand
    #1
    Hi,

    I've produced a site with both "desktop" and "phone" CSS and have used the following HTML to select the appropriate file:
    Code:
    <link media="only screen and (max-device-width: 767px)" href="/Css/phone.css" type="text/css" rel="stylesheet" />
    <link media="screen and (min-device-width: 768px)" href="/Css/desktop.css" type="text/css" rel="stylesheet" />
    
    This is based on the example given in the Safari Web Content Guide and it works perfectly; it uses desktop.css on desktops and tablets, and phone.css on iPhones and Android phones.

    The only problem is that it doesn't validate.
    It goes on to suggest using max-width instead of max-device-width. The problem with using max-width is that it causes a desktop browser to switch to phone.css when the window is resized below 768px wide. I do not want this; my phone.css is specifically designed with "taps" in mind and does not present a good experience when using a mouse.

    Does anyone know whether there is a valid way of specifying "only do this on a phone", or am I stuck with using the deprecated device-width feature?

    Thanks :)
     
  2. 2457244 macrumors regular

    Joined:
    Jul 20, 2015
    #2
    What if you use the more often used Media Queries like; max-width and min-width instead?

    I think max-device-width ( viewport ) is also kinda buggy on Windows/Nokia phones I do seem to remembers something about that.
    When you device-width you also have to do something like this inside the external CSS file.
    HTML:
    @-ms-viewport {
      width: device-width;
    }
    
    Of course you still have to set your viewport in the head section of the HTML document.
    HTML:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    ---
    Little off topic.

    To be honest I have stopped a long time ago trying to server different stylesheets for different elements or platforms. I often try to use a single css minified file at the bottom of the page, just append it outside the HTML tag.
    This probably ins't valid either but Google PageSpeed Insights loves it. It prevents CSS from blocking the HTML rendering. I have decreased my page loads with 0.200ms by doing so. OF course it's nothing and you won't rank any higher by doing so but I just kinda like it.

    [​IMG]
     
  3. Nermal thread starter Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    New Zealand
    #3
    I covered that in my original post:
    Windows Phone support is not a concern for this site. I can look at moving things around for faster speed, but at the moment I'm just trying to get everything working (admittedly it already works now, but valid HTML would be nice).
     
  4. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #4
    This is wacky, I've never heard of anyone doing this.

    Have you had any issues with browser support?
     
  5. 2457244 macrumors regular

    Joined:
    Jul 20, 2015
    #5
    Me too.. Believe me, I was very skeptical about this and to be honest I still don't like doing it either because normally I'm very strict.

    But when I was trying to optimize some sites for Google's PageSpeed Insight a while ago I always got sticked around 96/100 points and thought how in the world would you ever score 100/100 points. Stupid Google, don't make those tools because it's addictive to score best.
    https://developers.google.com/speed/pagespeed/insights/

    So I started to read the feedback in close details and Google advises you of doing this. They want you to load all your HTML + JS before CSS. Well there shouldn't be any blocking elements for the browser.
    At first I thought, they must be mistaken here or they totally lost their minds so I searched a little bit online about this subject and on StackOverflow there are a few people who love it and other hate it.

    You don't gain any rank by doing so it only improves your site loading by a very tiny little bit. It's about 0.200ms improvements or so.. It's barely noticeable for the human eye and impossible when caching is enabled but still it's kinda nerdy and cool if you can tweak every little corner of your site.

    I've gave it some tests with different browsers because I couldn't believe browsers like IE would play nice with this but for some strange reason they simply do. IE9 and up they all read the stylesheet even when it's outside of the HTML tag.

    As of now I always have 100/100 score in the Google Speedtest - show it to your clients and they'll give you a Tim Cook kinda bonus. haha.. ;)

    [​IMG]
     
  6. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #6
    Do you inline some of your CSS, the portion that is supposed to get loaded first in the document, in the head too?

    http://webpagetest.org is a great resource to check a website's performance as well. You can test them on networks and different devices around the globe and get visual feedback for that too.
     
  7. 2457244 macrumors regular

    Joined:
    Jul 20, 2015
    #7
    Yep, in the head section I use the <style> ... </style> tag to wrap some of the browser/page defaults. Mostly it's Normalize.css stuff and a tiny grid system of the page.
     
  8. iPaintCode, Nov 23, 2015
    Last edited: Nov 25, 2015

    iPaintCode macrumors regular

    iPaintCode

    Joined:
    Jun 24, 2012
    Location:
    Metro Detroit
    #8
    Media queries are a solid solution but you can also use feature detection to determine what CSS declaration blocks are used between desktop and mobile. Leveraging media queries is a good solution but sometimes feature detection is just as potent. If you know the feature set or want to use something like Modernizr you can avoid the media query frenzy. Normalize.css is exactly what it says, it normalizes the browsers user agent default styling so every browser starts with a normalized slate. For example, leveraging the good parts and normalizing the none standard parts. Not every browsers user agent stylesheet will look the same with an unstyled HTML doc.
     

Share This Page