Never hack your CSS files again
Wouldn’t it be great if you could just code for Standards compliant browser, and then only add a few rules in a separate file to tweak browser specific rendering quirks and call it a day? Well… that’s the way I’ve been doing it for a few years now.
Why
Every time I show my technique to other developers, they have a “this is so freaking awesome, how come I never thought about it myself?!” type reaction. So I thought I’d share with you. Plus, my technique has the following advantages:
- It keeps CSS clean for Standards compliant browsers
- It serves any extra browser specific CSS you define, so you can fine tune your design for each browser, without any code redundancy
- The parsing of CSS happens on the server so there’s no need for hacks
- It takes less than a minute to setup
The Basic Idea
You start with your base CSS files for Standards compliant browsers in your HTML header, for instance:
<link href="/_css/content.css" rel="style-sheet" type="text/css" media="all" />
Then, next line, you import another browser specific CSS file, for instance:
<link href="/_css/add_ie6.css" rel="style-sheet" type="text/css" media="screen" />
This second file usually contain only about 3 to 20 lines of code average. If it doesn’t, you might be doing something wrong… Since it’s imported after the main CSS, anything in there will override what’s in the main CSS file. For instance, I have an add_firefox.css for this site that looks like:
#content ol label {
display: -moz-inline-box;
}
.email a {
background-position: 0 0;
}
.entry .file_uri a {
padding-top: .1em;
background-position: 0 0;
}
This is a pretty good example of what I use this technique for… The -moz-inline-box is mozzila specific way to implement the inline-block box model. You could leave it in your main CSS file and it would be ignored by other browsers, I just personally like to put it in there so that the CSS will validate in other browsers. The other rules though are just tiny image position adjustments to make up for the slightly different implementation of the baseline in all the main browsers. As you can see, minor browser specific adjustments (some might even call nitpicking…) which would be cumbersome to achieve any other way.
I also use this technique as a replacement for conditional comments. They both achieve the same thing, but I don’t have to worry about adding code to my header, I just drop an extra file in my css directory and it’s done. It’s just faster and more convenient for me.
How it works
In a nutshell, you upload a PHP script to your server, and copy/paste 2 lines of code in your HTML files. The PHP script does 3 things: it detects what browser is used to view your site, it checks your (predefined) CSS folder to see if there is a corresponding CSS file specific to that browser, and if there is, it outputs the appropriate line of code in the HTML header to import it. The different override files you can add to your CSS folder out of the box are:
- add_ie7.css
- add_ie6.css
- add_ie5.css
- add_firefox.css
- add_opera.css
- add_safari.css
- add_omniweb.css
- add_iphone.css
Implementation
Here’s where you can get the CSS override PHP script and info on how to install it.
Comments on this article
Hi!
Thanks alot for this! It works great! Very easy to implement!
Martin, on 2007.06.26
This is a great way to handle things, I’ve been using it myself for a while. The day it dawned on me I was pretty damn excited too because it really does ease development.
Of course, for those who can’t use PHP for this sort of thing there are JavaScript methods for determining browser type and loading the css.
If you only have to deal with IE then IE conditional comments work well also: http://www.quirksmode.org/css/condcom.html
John, on 2007.10.20
This is not a new way of going about, but it’s ok I guess. 90% of all quirks are in ie, so I will stick to conditional statements though.
Henrik Kjelsberg, on 2007.11.07
@henrik: yeah and right. stick to clean code and conditional comments … most of the time you are done with that and receive everything you need.
better forget all about specific browser hacks based on invalid css, they will break anytime and mess up your style sheets.
well… thnks anyways especially for the TM-bundles!
dennis, on 2008.05.19
Just for clarification, this technique actually allows you to keep your code cleaner and has absolutely nothing to do with “browser specific hacks” or “invalid CSS.”
I invite you to read this article slower… ;)
Yann, on 2008.06.09
Yann,
Thanks for this and the Textmate bundles. to the naysayers here I say: The idea isn’t to include additional style-sheets full of hacks. It is merely a very simple way of fine-tuning your CSS for a more consistent presentation across all browsers. They all have quirks and this allows for easy modification to each of them.
Thanks again. You are awesome!
Tage, on 2009.05.03
Hey mate, great script, i really need this one and i much prefer this approach than the ie statements, way better as you can essentialy make your site “visible” to any browser. Thanks again.
alx, on 2009.06.14
great website design with useful content, but i think you mean “technique” instead of “technic”
bowman, on 2009.10.20
@bowman: the dictionary says they’re both OK so I assumed “technic” was the US version and I went with it. But after looking it up, it seems “technique” is the standard version, so I’ll change it. Thanks for catching that!
English is not my native language… that’s my excuse! ;)
Yann, on 2009.10.21
Great script! Is it possible to add Camino support? Currently Camino is showing the add_firefox.css.
Thanks so much!
Jeff, on 2009.11.05
Is Camino still not supported? It would be great if it could be.
Ian, on 2010.04.28
+1 on camino support
James, on 2010.09.28
Many thanks for this, hugely appreciated!
Geoff Kendall, on 2011.09.05