Override conditional styles in Zen subthemes
Wed, 4 May, 2011
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
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!