CSS Cross browser compatibility.

October 4, 2012

Since starting my new graduate job (HTML dev) a problem which I encounter on a regular basis is cross-browser compatibility involving styling issues.

It’s relatively easy to make things look the same in Firefox, Chrome, Safari and even IE9. But that bastard of a browser IE7 really likes to be awkward.

At work our clients range from international blue chips to small independents and it is often essential that we cater right down to IE7. Throughout this article I plan to talk about the ways in which I approach and solved these cross-browser issues.

Firstly there is Modernizr. For those of you who do not use this tool I would look into doing so NOW. Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It does an absolute shed load of stuff but I’m only concentrating on why it’s useful for x-browser developing. It supports loads of browsers right down to IE6. However one thing we need to remember is Modernizr won’t work at all if JS is disabled. More on that later.

So if a user fires up their trusty PC and IE7 (with JS enable) what Modernizr will do is add a load of classes to the html tag telling me what this browser can or cannot do. The class I am looking for is .ie7 which has been added after Modernizr detected that browser.

With this as my html class tag I use this to write conditional CSS for ie7. For example:-

.box{

margin:10px;

}

I have the previous code which renders perfectly on all browsers except IE7 where it needs a little more margin for whatever reason. With Modernizr i just add:-

.ie7 .box{

margin:10px;

}

This picks up the html class and the applies the extra margin to .box in IE7 only. Simple really but very, very effective. Modernizr-1 IE7-0

However as I mentioned before Modernizr will not work at all with JS disabled. Now you might be thinking who they hell has JS disabled? But it is another request of larger scale businesses and organisations at work. And the more you think about it, the more you think they should cater for everyone.

There are two real options. I either use separate stylesheets for IE7 etc or I add conditional classes to the html class as above but without using JS.

First of all I am going to look at adding a separate IE7 stylesheet. I add my condition statement inside the <head> of the document like the following:-

!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="ie7.css">

<![endif]

If the browser is IE7 it will read the <link> tag. If not it will simply ignore it. There are loads of conditional statements, which can all be found here. I then simply create a stylesheet named ie7.css and add all my conditional CSS statements in there.

The other way is to add a bit of code to the top of your HTML doc as discussed by Paul Irish here.

!doctype html

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

<!--[if IE 7]>    <html lang="en"> <![endif]-->

<!--[if IE 8]>    <html lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]

As you can see this method is adding classes to the html tag just as Modernizr did. I then just take the class and use it on my conditional CSS statements. This way I can add all my CSS to the same stylesheet, which in my opinion is the neatest and most productive way.

.lt-ie8 .box{

margin:10px;

}

So there are a few questions that need to be asked when you start on a project that will need to be compatible with different browsers. Will I need to think about users who have JS disabled? Will I have so much CSS that I would like my stylesheets to be separate? Will I just have one stylesheet and add conditional statements as I go along? It’s your choice but at least whichever way you do it IE(7) isn’t really a problem.

Ta for reading!

Was it Worth it?