Katherine Lynch.org

Zen is a terrific project out of Drupal.org, written by the extremely talented John Albin.  There are a lot of things that are highly configurable about implementing a Zen subtheme.

An important part of any theme is its cross-browser compatibility.  For most browsers, this isn't a problem, but a need for this type of compliance makes it so that conditional stylesheets are almost always needed for Internet Explorer; the more versions, the more stylesheets (often enough, anyway).

When you create and implement a Zen subtheme, a quick trip through your live page's source will likely show the following:

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/zen/zen/ie.css?C" />
<![endif]-->

This is no big deal generally, but it can be bothersome if you want to start calling your own IE stylesheets.  If you want to add some version-specific IE stylesheets, simply add the following to your subtheme's .info file (see the comments--which are unnecessary in your own .info file--for when each line appears):

; Anything below IE9
conditional-stylesheets[if lt IE 9][all][] = ie7-and-8.css
; IE7 browsers only
conditional-stylesheets[if IE 7][all][] = ie7-only.css
; IE6 browsers and below.  This will also be affected by ie7-and-8.css according to this syntax.
conditional-stylesheets[if lt IE 7][all][] = ie6.css

The second set of brackets is for media queries, so you can specify further there too, I just put "all" in for this example.

After you add this to your .info file AND rebuild your theme registry, you should view something like this in source:

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/zen/zen/ie.css?9" />
<![endif]-->
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" media="text/css" href="/sites/all/themes/MY_THEME/ie7-and-8.css?9" />
<![endif]-->
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" media="text/css" href="/sites/all/themes/MY_THEME/ie7-only.css?9" />
<![endif]-->
<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" media="text/css" href="/sites/all/themes/MY_THEME/ie6.css?9" />
<![endif]-->

Please note, YOU MUST PUT THE ACTUAL CSS FILE INTO YOUR THEME'S MAIN DIRECTORY IN ORDER FOR THIS TO WORK.  If you just put the conditional stylesheet reference into your directory and try to make this show up before you actually start adding to your CSS file, the conditions won't show up in the header.  They will show up once you add the file.  You'd be surprised how many times I've witnessed someone get hung up on this particular aspect.

Now this is well and good, but you'll see that Zen's ie.css is still being conditionally called here.  Again, not really a problem as it's only used for good, but if you want to override/remove this, go into your subtheme's .info file again and change this line:

; conditional-stylesheets[if IE][all][] = ie.css

to this:

conditional-stylesheets[if IE][all][] = ie.css

That is to say, uncomment it.

If you want to override the file, place your own ie.css file into your subtheme's main directory, filled with all of your own IE-fixy goodness.  If you'd prefer not to call this stylesheet from the Zen theme directory, after uncommenting that line, do not put a file called ie.css into your subtheme's directory.  Once again, if a stylesheet does not exist in your subtheme's directory, the theme engine is not going to waste time setting up a condition for it, so if it's gone from your directory, it's gone from your overhead.

As April 2011, IE6 makes up 2.5% of the browser market, and if you're still working with it, I'll assume it's part of your company's baseline for some weird reason, or you're some kind of programming masochist.  IE7 makes up less than 5%, but is still often programmed for in larger institutions, as small parts of big numbers are still pretty big numbers.  Being able to discard the need to program for IE6 already means a lot less overhead, but IE7 still introduces a host of problems, as does IE8.  IE9 promises to implement a lot more CSS3 and adhere to a lot of web standards, but even right now, requires special stylings.  Keep this in mind when writing your Zen subthemes!

So, mobile stylesheets are not the Holy Grail of mobile web development that they once were, but they do still come in handy.  Rather than attempting to recognize the technology or the OS specifically, it's easier now to go by device width.  I used this technology in order to have a "switch to mobile version" toggle in the footer of the full browser version of a site, but only on mobile devices:

<link rel="stylesheet" href="handheld.css" type="text/css" />
<meta name="viewport" content="width=device-width" type="text/css" />
<link rel="stylesheet" href="override-handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 481px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 1024px)" href="override-handheld.css" type="text/css" />

Let me expand this a little.  In "handheld.css," we have the following:

#footer-switch{
    display: block;
}

This allows the toggle switch in the footer of the full browser version to be displayed.  In "override-handheld.css," we have, not surprisingly:

#footer-switch{
    display: none;
}

This is, obviously, meant to hide the toggle.  Please note, this CSS will actually remove the toggle entirely from the browser, not just visually, but for all hardware including screenreaders, as if it doesn't exist.  This is our goal though, as we only want to call "override-handheld.css" when this particular navigational element should not exist.  

So, in the first line, we call the "show" CSS.  We do this as a "just in case," should all of our conditionals fail for an edge-case mobile user, the switch is available.

This little line - 

<meta name="viewport" content="width=device-width" />

is used to help ID the device width, and is mostly needed to make Android 2.2 and beyond play nicely with mobile stylesheets.  Without this, Android devices running 2.2 and above will simply ignore these media queries. 

Now, these last three -

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 481px)" href="handheld.css" type="text/css" />
<link rel="stylesheet" media="all and (min-device-width: 1024px)" href="override-handheld.css" type="text/css" />

work for all other mobile devices.  Most devices will be served by the first line, as many handhelds still have a width of 480px or less.  The second line is for (again) many newer Androids, some Blackberries, and of course, tablet devices (*cough iPad cough*).  The last line of CSS is only called for desktop devices, and this hides the mobile toggle switch.  Win!

And speaking of iPads, if your mobile optimized site needs some love especially for the iPad or tablet devices, you can use this same technique in your mobile site's CSS.  Just throw this into the header -

<link rel="stylesheet" media="all and (min-device-width: 481px)" href="tablet.css"> 

and put your tablet-optimized CSS into the appropriate file.  Yay, many conditions!