Note

This page is a mirror of my new english blog Research Kitchen. All contents on the front page are pulled from the kitchen's XML Feed and transformed via XSLT. So all permalinks and commentviews will take you away from this site.

Quick Links

Sitetopics

Articles

From the old minzweb archives.

Filtering CSS

February 22, 2005

Again this is a post that was inspired by ongoing discussions with students of the IWA HWG CSS workshop. Some of it has been widely covered over the web , but I thought I'd summarize a bit what I found most useful and provide a small link collection.

When it comes to CSS hack's and filters I am the kind of developer that really tries to avoid them. If there is something to be done against minor glitches I tend to use CSS filters and manage the used hacks in several different files that are served to the browsers in question. Most of the main concerns l have with Internet Explorer versions 6, 5.5, 5.0 on Windows (i. e. 1px offset with absolute positioning, initial font size issue with the 5.x branch and the broken box-model.) and Internet Explorer on Mac (for example the miraculous margin-right: 15px added to absolute positioned elements).

So my main strategy is to link to main Stylesheets within my (X)HTML files. A main.css containing the complete hack-free styles (organized probably in the form of further linked style sheets) and a filter.css that contains links to browser specific styles and adjustments.

<link rel="stylesheets" type="text/css" href="main.css" />
<link rel="stylesheets" type="text/css" href="filters.css" />

A schematic illustration showing the file structure described in the next paragraph

Let's have a closer look at the filter.css. It's main purpose is to serve different Styles to Internet Explorers on Windows and Mac.

@import url('ie-win.css'); /*hiding from IE5 Mac*/
    
/*\*//*/
  @import "ie-mac.css";
/**/

Using single-quotes within the url parentheses of the first declaration hides the imported sheet ie-win.css from Internet Explorer on a Mac. The second rule, the so-called IE/5mac Band Pass Filter is only understood by Internet Explorer 5.x on Mac and therefore a perfect way to fix CSS flaws of this browser and only for this browser.

But wait, the Windows IE styles can still be accessed by all other browsers. That is absolutely right. So let us have a closer look at the ie-win.css. It takes benefit of the "Star HTML Selector Bug". This special selector is only recognized by all versions of Internet Explorer greater or equal to 5.0 no matter what Operating System. But as the stylesheet itself is hidden from IE/Mac, only the Windows versions of Internet Explorer will apply these rules. This is how it looks:

* html body {
   color: #0001A6;
}

This would set the color of body to blue in Internet Explorer on Windows. If there is a need to adjust furthermore and serve additional styles to IE5.x only (possible scenario: IE6 in standards mode, addressing the broken box-model for IE5.x only), we can use the Mid-Pass Filter to import another stylesheet. The advantage of the Mid-Pass Filter, it is only recognized by Internet Explorer version 5.x :

@media tty {
 i{content:"\";/*" "*/}} @import 'ie5x-win.css'; /*";}
}/* */

Let's look inside the ie5x-win.css, cause there is one important thing to mention:

* html body {
   color: #2EA740 !important;
}

This rule sets the body color to green in Internet Explorer 5.x on Windows. Why the !important statement here? Well, although the stylesheet for IE5 is imported after the styles for IE6 are written down and specificity of both selectors is the same, the cascading rules tell us that imported styles are treated as if they'd appear at the very beginning of the stylesheet:

Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

So the !important statement assures that the IE5 styles won't be overriden by any IE6 styles using the same selector match and specificity.

Check out the testfiles:

Little sidenote

I tried to seperate the styles for IE5 and IE6 on Windows using both the High Pass Filter and the Mid Pass Filter and serving different stylesheets to them in the first place:

@import "null?\"\{";
@import "ie6-win.css";
@import "null?\"\}";
  
@media tty {
 i{content:"\";/*" "*/}} @import 'ie5x-win.css'; /*";}
}/* */

Unfortunately this didn't work. In this case Internet Explorer 5.5 didn't apply the ie5x-win styles. By reversing the order of the import calls all browsers applied the correct styles, but IE6 only did so when in quirks mode.

So this method leaves at least one browser that is probably not applying the filter under all circumstances which for me equals to useless, no matter how tempting this method is, cause it is the most distinguished one, and you could spare the !important statement for IE5/Win.

Conclusion

I really do not like using CSS hacks, but sometimes you just can't avoid them, at least not if you code for IE. But the above mentioned method is sufficient to me, allows handling of the different hacks in different files, doesn't litter your main stylesheets and is completely valid.

More recent entries

MacOSX on Windows XP: Revisited

January 24, 2005

My recent experiences with MacOSX under Pear PC. Now running faster and with sharing network abilities. My essential browser cam!
→ Continue reading MacOSX on Windows XP: Revisited

View comments (1 so far)