Send different CSS to phone and desktop?

[Nermal]

Hi,

I've produced a site with both "desktop" and "phone" CSS and have used the following HTML to select the appropriate file:

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

Bad value only screen and (max-device-width: 767px) for attribute media on element link: Deprecated media feature max-device-width.

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

 

[2457244]

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.

@-ms-viewport {
  width: device-width;
}

Of course you still have to set your viewport in the head section of the HTML document.

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

 

[Nermal]

What if you use the more often used Media Queries like; max-width and min-width instead?

I covered that in my original post:

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;

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).

 

[NutsNGum]

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.

@-ms-viewport {
  width: device-width;
}

Of course you still have to set your viewport in the head section of the HTML document.

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

This is wacky, I've never heard of anyone doing this.

Have you had any issues with browser support?

 

[2457244]

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

 

[olup]

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

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.

 

[2457244]

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.

 

[iPaintCode]

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.