What are best practices for the default stylesheet when using CSS @media queries?

Question

I've just discovered CSS @media queries and I think they're great! However, I know that not all browsers support them (namely all but the most recent versions of I.E.).

What should I do then, in my default stylesheet? Should I target a normal-sized screen? Should I go route of lowest-common-denominator and load the mobile stylesheet? Or should I make the design completely fluid?

What is generally a good plan when making the default stylesheet for browsers that don't support @media queries?

Answer 1

It depends on whether you go with de 'mobile first' approach or 'desktop first'.

The desktop first should not cause any trouble with desktop browsers not supporting @media, because they will just ignore the mobile stylesheet rules, like they should. The only problem is mobile browsers that don't support media queries. They will render the page like seen on desktop. But most smartphones support media queries, except pre-win7 phones. The question is if you want to support those phones. You stylesheet should look something like this.

body {
  width: 960px;
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  /* override desktop rules to accommodate small screens*/
  body{
    width: auto;
    margin: 0;
}

The other approach is mobile first. You create a base stylesheet for mobile, and then use mediaqueries to spice thinks up for desktop users. You can put the desktop rules in a separate file, and use media queries and conditional comments to load it in modern desktop browsers and IE. But here the problem is IE mobile also supports conditional comments, so no pre-win7 phone support. Your html should look something like:

<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->

Making your design fluid will help a lot. The aim is that no matter what screen size, your site will always look good. Just resize your window to try it out. Fluid designs can't make your sidebar move to the bottom if the screen is to narrow. For this you need mediaqueries.

Good luck