So I've enthused about how CSS is the way to build your sites if you want to do things seriously. At some point during this zealous tirade cross browser inconsistencies were probabaly mentioned, so lets get into that a little more shall we.
Although CSS is a great tool, it is also still a relatively new one and just like developing sites the old fashioned way, the people behind the browsers once again do not always agree on their interpretation of the standards. So expect to find yourself banging your head against a brick wall once again.
There is no straight forward answer to this age old problem, but what I can do is pass on the way I've come to work. Maybe you'll like it and maybe you won't. So let's get stuck in.
Rules of thumb
- IE seems to have the most inconsistencies.
- Develop your site in one of the more CSS compliant browsers such as Mozilla-Firefox.
- Developing in Mozilla-Firefox will mean less hacking for Mac browsers such as Safari and MacIE.
- Re-work your CSS for IE.
Pretty vague I know, but stick with me on this. It's all about to become a little clearer.
Keeping it clean
So this is all well and good, you find a cross browser bug and apply one of any number of hacks to get the behaviour right. The problem is you soon end up with a stylesheet that is overflowing with hacks and commented sections and then sections that can't contain th helpful comments you need because this would break the hack-fix you are using.
Ideally what we want is one 'base' stylesheet that does things properly (or as close as) and then a number of other stylesheets that we can use to hold the browser fixes away from our nice clean CSS. Of course we want these additional stylesheets to be nice and clean and readable as well.
And in the time honoured tradition of perfect timing, as if by magic one appears.
Style filtering
The style filtering technique is something I first came across at Stop design and is just what we are looking for. If you want a full breakdown of the technique check out their article on the subject. For a brief overview and a few adaptations I've used read on.
The technique works by taking a main stylesheet and using that to import your clean 'base' CSS (base.css). This should then work nicely across your more compliant browsers. To fix behaviours for other browsers we then setup seperate stylesheets per browser where we keep rules to overwrite those of base.css. To apply these fixes we use browsers specific hacks to import these stylesheets only for the correct browsers.
@import url("base.css");
/* IE5/Mac Only Styles
Uses the IE5/Mac Band Pass Filter:
http://stopdesign.com/examples/ie5mac-bpf/
----------------------------------------------- */
/*\*//*/
@import "ie5mac.css";
/**/
/* IE5/Win Only Styles
Uses the Mid Pass Filter:
http://tantek.com/CSS/Examples/midpass.html
----------------------------------------------- */
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
This technique works brilliantly when it comes to seperating out styles for IE5.X on the PC and IE on the Mac. Unfortunately when it comes to IE6 on PC we can't do much. The comporomise I've come to is to create an IE specific stylesheet and import it as normal, but to use the '* html' hack whithin this. Ok so it breaks our keeping it clean rule, but it works and still allows us to keep browser specific rules seperate.
@import url("base.css");
@import url("ie.css");
/* IE5/Mac Only Styles
Uses the IE5/Mac Band Pass Filter:
http://stopdesign.com/examples/ie5mac-bpf/
----------------------------------------------- */
/*\*//*/
@import "ie5mac.css";
/**/
/* IE5/Win Only Styles
Uses the Mid Pass Filter:
http://tantek.com/CSS/Examples/midpass.html
----------------------------------------------- */
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
And that as they say is that. Using this method allows us to seperate cross browser buggyness, whilst keeping our stylesheets as clean as possible.
One handy tip is to add comments to your 'base.css' indicating where browser fixes have been applied.
The advantages
- Clean manageable stylesheets.
- Browser bug fixes managed seperately and can be easily removed should the browser fall out of scope.
- Ability to expand this technique to logicalyl seperate other styles, such as those dealing with image replacement or colours. A good example of which would be re-importing a seperate 'colours.css' for print specific styelsheets rather than duplicating the styles.
- Faster isolating of browser specific issues.
The disadvantages
- You will end up with more stylesheets, but it's really not such a problem.
- I've ony worked with this on the latest browser specs so if you are developing for anything older you might need to work something out.
Last updated 20 Oct 2004