15+ techniques and tools for cross browser CSS coding

by Jean-Baptiste Jung. 112 Comments -

Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coder life easier, here is 15+ tools and techniques for crossbrowser CSS development.

Part 1 – Techniques

Of course, efficient crossbrowser CSS development starts with techniques and good practices. In the first part of the article, I’ll show you X techniques that will make your crossbrowser development easier.

Reset CSS

Due to the fact web browsers define different default styling for html elements, the first thing to do is to always include a CSS reset in your stylesheet. By using this code, you’re already eliminating lots of future headaches.

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

 

Internet Explorer conditionnal comments

Let’s face it: Internet Explorer, especially the dinosaur IE6, is the front-end developer nightmare. In order to minimize their errors, Microsoft implemented conditionnal comments in their browser, which allow you to link a stylesheet that will be interpreted by a browser alone.

<!--[if IE]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

You can also target only a certain version of IE:

<!--[if IE6]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

 

Internet Explorer hacks

While conditionnal comments are better, you can also target some versions of Internet Explorer using the following syntax:

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */	
}

This technique is not W3C compliant (this is why you should use conditionnal comments instead) but sometimes, it is a real time saver.

Targeting Opera only

Opera isn’t the popular browser, but that isn’t a reason not fix problem that may occur. The code below will only target Opera, allowing you to add CSS rules only for this browser.

@media all and (min-width: 0px){
    .classname {}
}

 

Targeting Safari only

Safari is one of the most standard-compliants browsers, so it is rare that you have to fix Safari-only problems. But it can happen sometimes. Here is a nice hack to write Safari-only CSS rules.

html:lang(en)>body  .classname {}

 

Targeting Google Chrome only

After Opera and Safari, here is finally the same kind of hack, to target only Google Chrome:

body:nth-of-type(1) p{
   color: #333333;
}

 

“Browser Detect” PHP Class

While Internet Explorer is most of the time the reason of crossbrowser compatibility problems, sometimes you may need to detect a wide range of browsers

If you’re working with the PHP language, the Browser Detect class is a very useful tool for detecting more than 20 different browsers.
Get the class

JQuery browser detection

Another great piece of code to detect the most common browsers (Safari, Firefox, Chrome, IE and Opera) is the browserdetect.js Jquery plugin.
Once you inclued JQuery and browserdetect.js in your html file, the script will automatically add a css class to the body tag.
For example, your body tag will look like this if the visitor browser is Firefox 3:

<body class="browserFirefox3">

Get the code

WordPress browser detection

A while ago, I’ve explained on my other blog WpRecipes how WordPress can detect the browser used by your visitors. The code below will automatically add a CSS class to the <body> element of each page of your blog. Simply paste it on the functions.php file of your theme.

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

 

IE6 crash

Sometimes (Who said always?) Internet fucking Explorer 6 gives us, developers, lots of headaches. Although this is definitely not the best method to make your clients happy, it can be really fun to implement on your own website.

You guessed it, the following line of code will make IE6 crash. Goodbye, dinosaur.

<style>*{position:relative}</style><table><input></table>

If you’re interested in more “IE6 killer” techniques, you should definitely have a look on here.

Part 2 – Tools

Techniques are the required knowledges for efficient cross browser development, but tools can make you save time, hasle, and in three words, make your life easier.
In this second part of this article, let’s have a look at the most usefull tools freely available over the Internet.

Xenocode Browsers


This tool is what I’ll definitely call a must-have. Xenocode Browsers allows you to launch a wide variety of Windows browsers (IE 6, 7 and 8, Firefox 2 and 3, Google Chrome and Opera) directly from the Internet. You only have to install a small plugin, and that’s all.
The only weak point of Xenocode Browsers is that the tool can only run on Windows machines (XP with SP2 and later). This is a sad news for mac users like me, but the tool is still very good.
Visit Xenocode Browsers

IE6 CSS Fixer


I know I already said it earlier, but Internet Explorer is the developer’s nightmare. An experimental tool has been created to transform a “normal” css stylsheet into a “IE” stylesheet.
For example, it apply new sizes for your boxes, according to the fact that IE have this well known box model bug.
Visit IE6 CSS Fixer

Browsershots


No one can have something like 3 OS and 25 browsers on his/her office. Personally, I remember when I used to ask my friend running another OS than mine “hey, do that site looks good on your computer?“. This is exactly Browsershots purpose: You select the OS, you select the browser, you wait a bit, and the site show you screenshots of your website under the selected OS and browsers.
While Browsershots is obviously an usefull version, there are a few bad points. The worst of it is the waiting time for being able to see your screenshots, depending on how many browsers you selected.
Note that Browsershots offers a paid version, that I haven’t tried for now, which promise slow waiting times.
Visit Browsershots

Browsrcamp : How your sites looks on a Mac

MultipleIES : Run multiples version of IE on your PC


MultipleIEs is a Windows-only program allowing you to install and run multiples versions of Internet Explorer (from version 3 to version 6) on your computer.
Althought sometimes some render difference between a “real” IE and multipleIE can occur, it is still an useful tool, if for some reason you can’t use Xenocode Browsers.
Download MultipleIE

ie4osx: IE on the Mac


A similar tool to multipleIE is also available for Mac users. Sadly, it runs on X11, it is slow and buggy. But if you don’t have access to a Windows machine, it is still an interesting program to have on your dock.
Download ie4osx

Comments (112) - Leave yours

  10. Elizabeth K. Barone said:

    Awesome resource, especially the cross-browser and -OS testing sites. Too many times have I finished a website only to find out it looks awful in IE6 or on a Mac (I’m a PC user). And now that the Google Chrome OS will be in the mix soon… Oy.

  11. Jean-Baptiste Jung said:

    @François: Thanks a lot! Digging is a way nice manner to say thank you :)
    @Elizabeth: Glad you found this useful! Most of the time websites looks horrible in IE6 without fixes because it’s an obsolete browser. I fixed CWC in IE a few days ago…It looked ugly in IE since I started it, lol.

  12. sam said:

    Nice piece. I prefer feature testing over browser testing; Scott Jelh fileament group Test User Js

    also the h3 tags here are kerned to an almost indecipherable degree

    Browsrcamp is a hot tip :)

  14. popurls.com // popular today said:

    [...] ######## ######### WPC09 – Worldwide Partner Conference – July 13-16,2009 ######## ######### 15+ techniques and tools for cross browser CSS coding ######## digg Crisis spurs people to work for free – good or bad? The Sound Of Silence – [...]

  16. Usman Bashir said:

    I am sorry but advising people to crash IE6 no matter how much pain it causes us is plain wrong.

    And this kind of behavior will hurt the website that implements rather than IE6.

    Other than that it’s a nice round up & for testing for multiple IE versions the best tool so far is IETester.

  17. Steven Lambert said:

    I really liked the IE6crash tip, I am on IE 8 but will definitely try it on a friend’s browser. BTW, I don’t think the web based browser emulators can match things like IEtab plugin on firefox. I prefer to install IE, Firefox and Safari on my PC, but multiple versions of browsers are always a problem.

  18. Jean-Baptiste Jung said:

    @janko: Glad to see you on here :) Never heard about IEtester, I’ll definitely check it out.

    @Usman Bashir & @Steven Lambert: I agree that the “Crash IE6″ tip is a bit controversial. But honestly, how can you trust a browser that will crash only with a so simple code? ;)

  19. Rodrigo said:

    The opera, chrome, and safari hacks unfortunately work on all modern browsers Firefox 3.5, opera 10, chrome, and Safari 4.

    The “.width:200px; /* IE7 */” hack works on both ie6 and 7.

    I think the best way to target an specific browser other than IE is to add a body class according to the browser agent like you mentioned. For IE, conditional comments is the way to go, I don’t believe modern browsers should pay for the extra download of IE specific hacks.

    You may like Andy Clarke’s proposal about using an universal IE6 file for every website.
    http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css

    Great Post.

  22. Usman Bashir said:

    @Jean Baptiste: You are right that we can’t trust IE6 at all but having the power to crash it does not means we should and acts like this can result in making the end user bitter towards our website never to return again.

    The best method of getting people to upgrade is to educate them one by one or through masses but not by shutting them down.

    Another option we should look in to is graceful degradation since we can’t completely drop support for it there are just too many people still using it.

    Even though all of us wish that IE6 had never been born. :D

  23. Cristian Antohe said:

    I used to write css hacks to fix IE6 and 7 but the body class is the best way to get around most of the cross browser problems. It’s better to be hack free and the code is also easier to read later on.

  26. All Teched up « Caintech.co.uk said:

    [...] How-To Smash We Choose the Moon: Pre-launch 45 Sets of Seamless Vector Patterns Creative Nerds 15+ techniques and tools for cross browser CSS coding 30 Light and Sleek Web Designs for Inspiration How Teenagers Consume Media: the report that shook [...]

  27. Edgar Leijs said:

    Important tool for testing: Expression Web Super Preview http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx

    Here you can test and compare IE6, 7 and 8 and soon also Firefox and more browsers

  28. claudio said:

    Thanks for the links. I do not like the IE6 crash however. Web designers should always try their best to get compatibility across different browsers. I am not in love with IE6 but there could be different ways to inform visitors that they are using an outdated browser.
    Claudio.

  29. Marlyse Comte said:

    Nice round-up! Yes, as has been mentioned, IETester works really well with really only a few drawbacks (last I used it it seemed that some Javascript didn’t work and some site with too many div’s shoveled into each other didn’t display right under the IE6 tab). It’s still under development, so if you can live with the beta quirks, it’s a great tool.

  36. Lloyd Vincent said:

    Very nice, but I have to reiterate what someone mentioned earlier, some of these hacks don’t work on the latest browsers. For example, the nth-of-type hack is getting read by Firefox 3.5.

  38. Lloyd Vincent said:

    Sorry for the double post, just dug up a css hack to target FF3. Maybe this can override the nth-of-type targeting?

    #selector, x:-moz-any-link, x:default { property: value; }

    Link: http://bradkellett.com/p/documenting-the-hacks-css-browser-targeting/

  39. Ryan said:

    Your Opera targeting tip is a bad idea, Firefox 3.5, safari 4, chrome and well most of the lastest release browsers all support CSS3 media queries. Using a technique like that to target any browser is doomed as it is an emerging draft technology so it is bound to be implemented by other browser vendors.

  41. Radu said:

    There’s another site for cross browser testing which is free for five minutes a session.
    http://www.crossbrowsertesting.com/

  49. ithemesdotnet said:

    Xenocode Browsers… Wow! This tool will be a time saver for me. I had been using Microsoft Virtual PC which takes a while to boot up and test with.

    Thanks cool cats!

  53. Mike Horn said:

    Great post, I would just add that Netrenderer is very useful for testing for IE, results are instantaneous and all versions from 5.5-8 are available. Oh and it’s free!

    http://ipinfo.info/netrenderer/

  57. Free wordpress themes said:

    Thanks for the great article.

    Addition to your list, there is a tool IE tester which is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5. Check it out.

    http://www.my-debugbar.com/wiki/IETester/HomePage

  59. Catrin W said:

    Great share Jung, thanks a lot. I really like the reset css part, which is very useful, and not to forgot the recommendations on cross browser testing in multiple browser versions.

  66. George Serradinho said:

    I think is very important to not only theme developers, but to all who have a site when making even the smallest change. I use browsershots a lot to see how my site would look like.

  76. Hirvesh said:

    Awesome article Jean! You might also want to check out the cross-browser compatibility tools:

    http://codefusionlab.blogspot.com/2009/08/18-handy-tools-to-check-cross-browser.html

  78. Paul Irish said:

    Repeating a few souls from above. The Opera, Safari, Chrome hacks here match on all Opera9, Saf4, Chrome2, FF3.5.

    You also didn’t mention but the :lang(en) requires the lang attribute on your html tag.

    You can view all these on this demo page:
    http://paulirish.com/demo/css-hacks

    I’ve also compiled the largest list of css hacks I know of here:
    http://paulirish.com/2009/browser-specific-css-hacks/

    Cheers

  80. David Hucklesby said:

    Why would you want to cause IE 6 to crash? That sounds as productive as scattering nails in front of your store because you don’t like cars parking there…

  82. Renato said:

    His techniques are not good, because I found many errors, you force the sites become equal in browsers, but its code is not optimized, much less validated in W3C.
    And besides all other options and there are many ways to do the html and css, they leave the site equal in most browsers, and are certified by the W3C.

    This site I’m doing work for company that is right in most browsers but the W3C has not yet validated by the lack of images altag (alt = “”) insuranceway.net. Because even the BroserShots has errors, and are not always as he shows, already tried it with the 13 browsers I have installed, the 13, 7 were equal to the image he created, the other 6 were right in my browser, but the browserShot showed broken.

    Excuse the typos, I am Brazilian and I do not know English very well.

  89. クロスブラウザのCSSコーディング法やツール (改) – Garnet Sky said:

    [...] Mac(Safari)のキャプチャを撮ってくれるのです。 Browsecamp 元コンテンツ 15+ techniques and tools for cross browser CSS coding 使える！と思ったものを抜粋して紹介しました。 This entry was written by [...]

  100. DaRiOuShJh said:

    yeah! the IE 6.0 was my worst nightmare in web designing and specially when using padding or margin attributes

    this brainless browser (IE6) always double my works in designing and coding graphic websites …

  101. Ollie Wells said:

    Very good article, although I did wince when I saw the hacks.

    Using hacks isn’t really the way one should learn to use CSS correctly to overcome cross browser rendering issues.

    A semantically correct website will render 90% correctly in ALL browsers. IE6 is one of the toughest as it uses an incorrect box model, and a few other flaws. IE7 is better, but still renders incorrectly.

    To overcome these issues, conditional formatting is the preferred technique.

    As a professional CSS coder, I would seriously question a stylesheet i had to edit that relied on hacks.

    Thats just me.

    Otherwise a top article.

  104. John said:

    Don’t forget IE Tester, just found it today and it’s really good…
    http://www.my-debugbar.com/wiki/IETester/HomePage
    You should add that to list, far better for IE testing than browser shots which I previously used (and even paid for)

  107. John said:

    Hi there, i didn’t know all this cross browser testers!I know one from Adobe. Adobe lab browser checker or something!
    But i think i could make something nice here take a look:
    http:www.mudancass.com
    The only problem is…is the html is not valid because of “google font directory”! Anyone can help with the validation using the google fonts?

    great post really!

  111. mukesh said:

    am trying to add wordpress php code to my home page but its showing an error please someone help me am a php newb….

    error
    Call to undefined function add_filter()

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!