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

Related Posts

No related posts.