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">
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
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
68 Comments
Nice! Very useful! Thank you.
Nice Techniques. Thanks for sharing….
Great tips!! Thanks for sharing!!
These are awesome tips.
Thanks
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.
i use eric meyer’s css reset. thanks for the tips
Nice Article, will digg and RT!
Thanks for your effort collecting and sharing these valuable info and tools..
Nice! Thanks so much!
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.
@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.
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
Nice tips. IETester is also interesting tool to check your design in all versions of IE, from 5.5 to 8
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.
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.
@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?
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.
@Rodrigo: Thanks for the interesting link!
@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.
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.
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..
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.
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
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.
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.
thank you for nice techniques and tools.
of course rss readers +1.
Thanks for share this nice article. I just know about multiple IE
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.
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/
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.
There’s another site for cross browser testing which is free for five minutes a session.
http://www.crossbrowsertesting.com/
Great list of good tools
Nice tips. carry on please.
IE Tester is great for multiple versions of IE. I also tried the IE6 Crash out, it works! mwahaha!
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!
Thank you very much for this tips. I’m only waiting when IE will be finally compatibility with web standards…
@ithemesdotnet: Glad to read that you find something cool that will help you to create more awesomes WP themes
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/
Great techniques shared here. I didn’t know about the browser check tool until now.
Useful Article, i posted by twitter for the germans webdesigners. http://twitter.com/webinterface/status/2646453760
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
Excellent post..
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.
hi JBJ, thanks for the tips. those are very usefull for the newbie like me!
regard,
G
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!
this css coding list is really a great thing for the web developing
I didn’t know about IE6 CSS Fixer before. This one helps a lot. Thanks
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.
thank you for Techniques, i love this blog :-bd
Thanks for this awesome article really appreciate it.
Thanks for the information, some very useful tools in that collection.
Hi thanks for this excellent article. Great help to webmasters like me.
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
Great article & useful for webmasters.
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
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…
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.
Cool stuff! Thanks for sharing.
This really a cool stuff! Thanks for sharing =)
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.
Really nice,thanks.
Really nice article… thanx!
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.
Excellent stuff. Thanks!
Xenocode Browsers-Browser Sandbox moved
http://spoon.net/browsers/
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 …
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.
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)
36 Trackbacks
[...] ######## ######### 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 – [...]
[...] 15+ techniques and tools for cross browser CSS codingcatswhocode.com [...]
[...] http://www.catswhocode.com/blog/15-techniques-and-tools-for-cross-browser-css-coding Tags: CSS, IE6 [...]
[...] 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 [...]
[...] 15+ techniques and tools for cross browser CSS coding: http://www.catswhocode.com/blog/15-techniques-and-tools-for-cross-browser-css-coding [...]
[...] 15+ techniques and tools for cross browser CSS coding 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. [...]
[...] This blog post discusses 15 techniques and tools that can help you create cross-browser CSS designs. [...]
[...] 15+ techniques and tools for cross browser CSS coding [...]
[...] 15+ techniques and tools for cross browser CSS coding (tags: webdev tools tutorial reference css) [...]
[...] Via CatsWhoCode [...]
[...] this yesterday : 15+ techniques and tools for cross browser CSS coding Which lead me to this : Run IE8/IE7/IE6, Firefox, Safari, Chrome, and Opera from the web [...]
[...] retwett, RT, tech, tutorial CSS 3 Cheat Sheet (PDF) CSS, Freebies Smashing Magazine PingWire 15+ techniques and tools for cross browser CSS coding 25 sitios para ver pelculas gratis online, en espaol y subtitul 45 Sets of Seamless Vector Patterns [...]
[...] 15+ techniques and tools for cross browser CSS coding (tags: css webdesign browser coding webdevelopment crossbrowser) [...]
[...] 15+ techniques and tools for cross browser CSS coding [...]
[...] wo wir schon beim Thema sind – hier gibt’s 15 tolle (und zwar echt tolle!) Tipps und Tools für alle die geschundenen Seelen, die für mehrere Browser CSS/HTML programmieren [...]
[...] sitio en distintas versiones de Internet Explorer, Mozilla Firefox, Google Chrome u Opera. Enlace: 15+ techniques and tools for cross browser CSS coding WikioTags: Hacks, IE Trackback [...]
[...] 15 techniques et outils pour faire du Css cross-browsers [...]
[...] 15+ techniques and tools for cross browser CSS coding Add Progressive Icons to Your Site Using :after pseudo-element 5 Fun and Practical Htaccess [...]
[...] 15+ techniques and tools for cross browser CSS coding [...]
[...] Cross-browser CSS? Here you go. [...]
[...] Official Link [...]
[...] Official Link [...]
[...] Official Link [...]
[...] 15+ techniques and tools for cross browser CSS coding [...]
[...] Official Link [...]
[...] Official Link [...]
[...] 15+ Techniques and Tools for Cross Browser CSS Coding – This article covers more than 15 tips for creating cross-browser compatible CSS code. [...]
[...] 15+ Techniques and Tools for Cross Browser CSS Coding – This article covers more than 15 tips for creating cross-browser compatible CSS code. [...]
[...] 15+ Techniques and Tools for Cross Browser CSS Coding – This article covers more than 15 tips for creating cross-browser compatible CSS code. [...]
[...] Mac(Safari)ã®ã‚ャプãƒãƒ£ã‚’æ’®ã£ã¦ãれるã®ã§ã™ã€‚ Browsecamp 元コンテンツ 15+ techniques and tools for cross browser CSS coding 使ãˆã‚‹ï¼ã¨æ€ã£ãŸã‚‚ã®ã‚’抜粋ã—ã¦ç´¹ä»‹ã—ã¾ã—ãŸã€‚ This entry was written by [...]
[...] 15+ Techniques and Tools for Cross Browser CSS Coding – This article covers more than 15 tips for creating cross-browser compatible CSS code. [...]
[...] Auf catswhocode.com werden Lösungen für die verschiedene Browser mit code-snippets bereitgestellt und weitere Test Tools vorgestellt. siehe hier [...]
[...] rest is here:Â 15+ techniques and tools for cross browser CSS coding By admin | category: Object | tags: coder-life, compatibility, events, foreseeable, [...]
[...] 15+ techniques and tools for cross browser CSS coding [...]
[...] 15+ techniques and tools for cross browser CSS coding [...]
[...] 15+ techniques and tools for cross browser CSS coding [...]