Modularized Stylesheets and html>body
Now that IE is the antequated browser on the block, I believe that style instructions (hacks) necessary to make IE behave should be separated from your “official” stylesheet. In this article, I’ll discuss using modularized stylesheets and using the > element identifier to help produce clean, readable stylesheets.
Our friend @import.
So NN4 sucks. That’s a known. However, we still needed to support it. A shame really, because we could do so much more with a browser that understands at least CSS1. So it became standard practice to separate the style rules for NN4 and IE by means of:
sample.html
<link rel="stylesheet" type="text/css" href="style/blah.css" /> <style> <!-- @import url(style/kazowie.css); --> </style>
This kept NN4 from reading any of the style instructions in kazowie.css that it did understand (which would no doubt ruin the interface for NN4 users). Yeah yeah, old news.
Before we get into the new news, let me address a building block concept:
Modularize your style
Every page has a layout, a presentation scheme, and a set of typographical rules to establish the over all look and feel. Most pages also have a navigation of some sort. Every page in a (well themed) site should share these aspects, but individually, pages will likely have certain content that should get some special attention from the style department. But you don’t need to clutter your stylsheet/s with all these details.
So instead of thinking of giving a page a stylesheet, think about setting up the layout, building the presentation framework, and describing the typography, then think about “styling” your specific page.
So let’s create a sort of style heirarchy where a default.css uses the @import rule to pull together the full page style from a series of stylesheets, each assigned a task:
sample.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/NN4.css" />
<style>
<!--
@import url(style/default.css);
-->
</style>
...
default.css
@import url(style/layout.css); @import url(style/presentation.css); @import url(style/typography.css);
When you want to make proportion adjustments to the layout of your site, you know right where to look.
There are arguments against excessive @importing. For example, each @import is going to make another call to the server and hence, after all the http info sent to and fro, you’ve now consumed more bandwidth than you would have if all your CSS was in one file. Whatever. Make up your own mind on this. I like the cleanliness and flexibility.
Using this model, you could have a series of page-specific stylesheets that each begin with either @import url(/style/default.css) or with a series of @imports that pull in just the stylesheets needed to support this page. You might go so far as to “classify” your stylesheets into a sort of @import-based heirarchy like this:
sample_page.css
@import url(style/core.css); @import url(style/golden_list_presentation.css); …
core.css
/* Set global style rules */ @import url(style/layout.css); @import url(style/presentation.css); @import url(style/typography.css);
golden_list_presentation.css
/* inherits from list_presentation */
@import url(style/list_presentation.css);
/* override some style elements and set new ones
to customize the default list presentation rules */
li { color: yellow; }
…
But I digress. That seems a little overkill, even to me.
Let’s get back on track…
Using the html>body syntax to work around IE quirks
Just as NN4 doesn’t support @import, IE doesn’t support the > element identifier. So, sticking with a familiar paradigm, we’ll use the same lack-of-support technology to isolate IE quirks. This may seem a little backwards and in a way like we’re isolating the good browser rather than the bad, but bear with me as the effect is the same.
Since we’re in the heirarchy mood, let’s branch the layout stylesheet file as well.
layout.css
@import url(style/layout/IE.css);
@import url(style/layout/CSS2.css);
/* Universal settings */
div#container {
padding: 15px;
margin: 0 auto;
}
…
Here we’ll split the layout instructions into two stylesheets, one to set IE’s quirky dimensions, and a second to set the dimensions and such for up to date browsers. To prevent IE from reading this style, use the html>body element { ... } syntax:
IE.css
div#container {
width: 770px;
}
CSS2.css
html>body div#container {
width: 800px;
}
Maybe I’m just being a clean freak, but I sure do like the look of css files that are simple, and uncluttered with hacks.
Put all the code you’ll need to (properly) reimplement in one file
Another, probably simpler, method is to first import a stylesheet that contains all the instructions you’ll need to reimplement for modern browsers, then split the reimplementation into a set of modularized stylsheets.
sample.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/NN4.css" />
<style>
<!--
@import url(style/default.css);
-->
</style>
…
default.css
@import url(style/ie_hacks.css); @import url(style/layout.css); @import url(style/presentation.css); @import url(style/typography.css);
Now design your pages for a modern browser, then @import a separate file with the (unfortunately) necessary IE settings. Now all we have to fear is that IE starts supporting the > element identifier syntax but leaves the box model broken!
Cheers.
