Responsive and non-responsive stylesheet

Question

I would like for my html code to use two style-sheets. Those who are on a browser that does support CSS3 media queries should use my responsive css. However those on an old browser that do not support CSS3 media queries should get a static style-sheet.

This is the link to my responsive stylesheet so far:

<link rel="stylesheet"  type="text/css" charset="utf-8" href="includes/layout.css" />

In this link I would like to add something like this:

media="<insert code that returns true if browser does support media queries>"

Answer 1

If a browser doesn't support responsive stylesheets they will simply ignore any of the styles inside of the media query. For this reason, you can simply include them together in the same stylesheet. If you are doing this for optimization purposes I would consider using server side scripting to parse the user-agent string and then append the stylesheets necessary. You could also use the Internet Explorer conditionals to add the stylesheets using the <!-- [if lt IE9] --> conditional.

There is also a polyfill for unsupported broswers called Respond.js. It will parse the media queries and add the styles as-needed in older browsers at the various sizes.

Answer 2

I'm not sure if this would fit your requirements, but you could use Modernizr's javascript functions to test for media query support and then load a stylesheet. Something like:

var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.rel  = 'stylesheet';
link.type = 'text/css';

if(Modernizr.mq('only all')){
    // load responsive.css
    link.href = 'http://website.com/css/responsive.css';
} else {
    // load non-responsive.css
    link.href = 'http://website.com/css/non-responsive.css';
}
head.appendChild(link);