15+ techniques and tools for cross browser CSS coding

by Jean. 113 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

  • http://stella-projects.com Andreas

    Nice! Very useful! Thank you.

  • http://levelx.me levelx

    Nice Techniques. Thanks for sharing….

  • http://cpcdisseny.net/ Xavier

    Great tips!! Thanks for sharing!!

  • http://www.ezyblogger.com/ Roseli A. Bakar

    These are awesome tips.

    Thanks

  • http://www.wprecipes.com Jean-Baptiste Jung

    Thanks guys, glad you enjoyed the article! Don’t forget to take 30 seconds to Digg the article to help me promoting Cats Who Code.

  • http://sidmad.com Akin

    i use eric meyer’s css reset. thanks for the tips ;)

  • http://www.creativeink.co.za Francois Brill

    Nice Article, will digg and RT!

  • http://sandman6665.com sandman6665

    Thanks for your effort collecting and sharing these valuable info and tools..

  • Elizabeth

    Nice! Thanks so much!

  • http://ekbdesigns.com Elizabeth K. Barone

    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.

  • http://www.wprecipes.com Jean-Baptiste Jung

    @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.

  • http://www.majic3.com sam

    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 :)

  • http://www.jankoatwarpspeed.com/ Janko

    Nice tips. IETester is also interesting tool to check your design in all versions of IE, from 5.5 to 8

  • Pingback: popurls.com // popular today

  • Pingback: 15+ techniques and tools for cross browser CSS coding « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  • http://creative-fuzon.com Usman Bashir

    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.

  • http://www.seoinsider.co.uk Steven Lambert

    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.

  • http://www.wprecipes.com Jean-Baptiste Jung

    @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? ;)

  • http://oncemade.com Rodrigo

    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.

  • Pingback: cross browser CSS coding « Design • iMenn

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Rodrigo: Thanks for the interesting link!

  • http://creative-fuzon.com Usman Bashir

    @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

  • http://www.cozmoslabs.com Cristian Antohe

    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.

  • http://www.easigo.co.uk Crash accident

    Really the techniques and tools that you showed above are superb. All will make my css task easy.
    Your blog really help me more always. Thanks a lot..

  • http://www.sweetpixels.co.uk web developer sussex

    One of the best articles on browser compatibility I have read in a long while. Have bookmarked and sure I will be coming back to use some of the advice in future designs! Thanks again.

  • Pingback: All Teched up « Caintech.co.uk

  • http://www.edgarleijs.nl/index.php Edgar Leijs

    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

  • http://www.claudiocugia.com claudio

    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.

  • http://www.mStudiosTALK.com Marlyse Comte

    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.

  • Pingback: David Rios (dfrios) 's status on Monday, 13-Jul-09 20:16:13 UTC - Identi.ca

  • http://www.firmasec.com firma

    thank you for nice techniques and tools.

    of course rss readers +1.

  • Pingback: Internet Brain » 15+ techniques and tools for cross browser CSS coding

  • Pingback: How to create cross-browser CSS designs | The How To Do Things Blog

  • Pingback: [CSS] 15+ techniques and tools for cross browser CSS coding – クロスブラウザコーディングをする上での、15のCSS Tips - mBlog

  • http://www.abu-farhan.com Abu Farhan

    Thanks for share this nice article. I just know about multiple IE

  • http://www.yakuru.com Lloyd Vincent

    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.

  • Pingback: links for 2009-07-13 « Mandarine

  • http://www.yakuru.com Lloyd Vincent

    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/

  • http://www.thecssninja.com Ryan

    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.

  • Pingback: ZioNews » 15+ techniques and tools for cross browser CSS coding

  • Radu

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

  • Pingback: Digg buries IE6 - DesignersTalk

  • http://designawardsgallery.com/ Best CSS Gallery

    Great list of good tools

  • Pingback: 29 fresh links to retweet « Adrian Zyzik’s Weblog

  • Pingback: links for 2009-07-14 « Breyten’s Dev Blog

  • http://www.workathomeasy.blogspot.com/ Masud Rana

    Nice tips. carry on please.

  • Pingback: lifestream for 2009-07-13 - silverberry.org

  • Jason

    IE Tester is great for multiple versions of IE. I also tried the IE6 Crash out, it works! mwahaha!

  • http://www.ithemes.net ithemesdotnet

    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!

  • http://www.tense.pl/agencja_reklamowa_poznan.html Agencja reklamowa Poznan

    Thank you very much for this tips. I’m only waiting when IE will be finally compatibility with web standards…

  • http://www.wprecipes.com Jean-Baptiste Jung

    @ithemesdotnet: Glad to read that you find something cool that will help you to create more awesomes WP themes :)

  • Pingback: Paul Voth » Blog Archive » Blödes Wetter, gute Links

  • http://www.hornetwebsolutions.com Mike Horn

    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/

  • Pingback: Técnicas para asegurar la compatibilidad crossbrowser | Chica Blogger

  • http://www.spyware-review.net Bob Walker

    Great techniques shared here. I didn’t know about the browser check tool until now.

  • http://www.peter-rozek.de Peter

    Useful Article, i posted by twitter for the germans webdesigners. http://twitter.com/webinterface/status/2646453760

  • http://www.freewpblogthemes.com Free wordpress themes

    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

  • http://www.nikithecreator.com Niki

    Excellent post..

  • http://www.0window.com/blog/ Catrin W

    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.

  • http://- G

    hi JBJ, thanks for the tips. those are very usefull for the newbie like me!

    regard,
    G

  • Pingback: 15 techniques et outils pour du css cross-browser | taggle.org

  • Pingback: Weekly Fave’s | Eiencafe.com --> New way to graphic

  • http://www.stockrants.com/forum McTwist

    thanks for those CSS coding techiques after all i am a web designer so for me it is really a col post & your blog also!

  • http://www.nutnbutshootinggames.com/ Michlle

    this css coding list is really a great thing for the web developing

  • http://www.sinus-gigaset-forum.de Chris

    I didn’t know about IE6 CSS Fixer before. This one helps a lot. Thanks

  • http://www.serradinho.com George Serradinho

    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.

  • Pingback: tripwire magazine | tripwire magazine

  • http://nunov.com/ jono_nuno

    thank you for Techniques, i love this blog :-bd

  • Pingback: More CSS than you can shake a stick at… « Dev42 and Friends

  • http://www.making8.com Adam J. Humphreys

    Thanks for this awesome article really appreciate it.

  • http://www.webhostright.com/ John

    Thanks for the information, some very useful tools in that collection.

  • Pingback: Top Articles On The Web Design Billboard In July | Showcases | instantShift

  • http://ansblog.com Nitendra

    Hi thanks for this excellent article. Great help to webmasters like me.

  • Pingback: Top Articles On The Web Design Billboard In July | KolayOnline

  • Pingback: Top Articles On The Web Design Billboard In July « 3dsmax tutorials

  • Hirvesh

    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

  • http://www.mercuryminds.com mercuryminds

    Great article & useful for webmasters.

  • http://paulirish.com Paul Irish

    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

  • Pingback: fantastic CSS Resource Roundup :: CSS :: WEBDESIGN FAN

  • David Hucklesby

    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…

  • Pingback: Top Articles On The Web Design Billboard In July « test

  • Renato

    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.

  • Pingback: Top Articles On The Web Design Billboard In July | X Design Blog

  • Pingback: Free Resources to Help You Become a CSS Expert Designer, | guidesigner.net

  • Pingback: 250+ Resources to Help You Become a CSS Expert | X Design Blog

  • Pingback: 250+ Resources to Help You Become a CSS Expert | huibit05.com

  • http://www.savings-secrets.com Arthur

    Cool stuff! Thanks for sharing.

  • http://www.skywhisper.co.cc Fauzi

    This really a cool stuff! Thanks for sharing =)

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

  • http://www.leonardstudios.com david

    Nice! How did you figure all of that out? Or how would anyone figure out those hacks? They would have to reverse engineer the program.

  • http://vatsthakur.info Vats Thakur

    Really nice,thanks.

  • Pingback: 20+ Sumber yang akan membuat anda menjadi CSS Master « Webdesigner Resource

  • Pingback: Browser Kompatibilitäts-Check: Tools für alle Betriebssysteme | HiRes Squad

  • Pingback: 15+ techniques and tools for cross browser CSS coding Scripts Rss

  • Lloyd

    Really nice article… thanx!

  • Pingback: Master CSS across browsers « luvx3.org

  • http://Ghosts-IT.com Radz Nguyen

    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.

  • http://www.dineshr.com Dinesh

    Excellent stuff. Thanks!

  • http://www.slesolutions.com Udesh Jayakody

    Xenocode Browsers-Browser Sandbox moved
    http://spoon.net/browsers/

  • http://DJH.ir DaRiOuShJh

    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 …

  • http://2612.co.uk Ollie Wells

    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.

  • Pingback: 185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets | tripwire magazine

  • Pingback: CSS Cheat Sheets etc « Social Media Greece

  • http://www.iworkmedia.com John

    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)

  • Pingback: The Importance of Cross Browser Compatibity: Tips and Resources - Noupe

  • Pingback: The Importance of Cross Browser Compatibility: Tips and Resources | e-szablony.eu - Tutoriale, Kursy

  • http://www.mudancass.com John

    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!

  • Ariel

    Additional Info.. guys for IE8 Behavior just try it

    margin-top: -24px\9; /*IE8only*/

  • http://www.135design.com 135design

    this one is for Firefox only:

    @-moz-document url-prefix(){
    p { }
    }

  • muthu

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

    this Google chrome target code is not working

  • http://riseitsolutions.com/index.php mukesh

    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()

  • http://metromagz.com Aryo Cosmo

    Hello,

    It’s very nice article and i was tested with:

    But it’s not worked it’s showed at the top of the layout.

  • Krzysztof Gołoś

    usefull