IE6! IE7! Safari! Opera! FireFox! OH MY!!! Developing for today multiple browsers can be a nightmare. In this article I go over some tips and some general guidelines on how to make Cross Browser Development as easy as possible.
Overview
If we look at the market share of today's browsers for the last year we get something like this:
| IE |
Internet Explorer |
| Fx |
Firefox |
| Moz |
The Mozilla Suite (Gecko, Netscape) |
| S |
Safari |
| O |
Opera |
Browser Statistics Month by Month
| 2007 |
IE7 |
IE6 |
IE5 |
Fx |
Moz |
S |
O |
| December |
21.0% |
33.2% |
1.7% |
36.3% |
1.4% |
1.7% |
1.4% |
| November |
20.8% |
33.6% |
1.6% |
36.3% |
1.2% |
1.8% |
1.6% |
| October |
20.7% |
34.5% |
1.5% |
36.0% |
1.3% |
1.7% |
1.6% |
| September |
20.8% |
34.9% |
1.5% |
35.4% |
1.2% |
1.6% |
1.5% |
| August |
20.5% |
35.7% |
1.5% |
34.9% |
1.3% |
1.5% |
1.7% |
| July |
20.1% |
36.9% |
1.5% |
34.5% |
1.4% |
1.5% |
1.9% |
| June |
19.7% |
37.3% |
1.5% |
34.0% |
1.4% |
1.5% |
1.8% |
| May |
19.2% |
38.1% |
1.6% |
33.7% |
1.3% |
1.5% |
1.7% |
| April |
19.1% |
38.4% |
1.7% |
32.9% |
1.3% |
1.5% |
1.6% |
| March |
18.0% |
38.7% |
2.0% |
31.8% |
1.3% |
1.6% |
1.6% |
| February |
16.4% |
39.8% |
2.5% |
31.2% |
1.4% |
1.7% |
1.5% |
| January |
13.3% |
42.3% |
3.0% |
31.0% |
1.5% |
1.7% |
1.5% |
| |
|
|
|
|
|
|
|
A couple of things that we can conclude from this chart:
-
IE 6 is still the number one browser(avg over 12 months)
-
We can ignore Opera and Mozilla as there market share is either decreasing or staying at the low end
-
IE7 is gaining ground
-
FireFox is getting hugely popular
-
While Safari is not that large of a market share Mac users are begining to embrace it AND a windows version was just released.
So how does one begin development when there are so many browsers out there?
Here are some tips some rules and some hacks that can make you life easier:
1. Download the Latest Version of Firefox, Safari and Upgrade to IE7.
On your development system you should have the latest FireFox, Safari(for Mac users) and IE7. IE7 is going to get the most complaints from developers but it is essential that you upgrade because IE7 is gaining ground and IE6 is slowly dying(yay!!). Having these three browsers(plus I will show a way to get IE6 on your machine too, more on that later) will make sure that you see is what over 90% or more of the internet will also see.
2. Download Microsoft Virtual PC for IE6 Development
Like I said before, you can work with both IE7 and IE6 on the same system its just that you have to run IE6 on a virtual PC. Luckily for us Microsoft offers a free version of virtual PC that represent Windows Xp with IE6 running on it. Downloading and installing that will allow you to have IE7 on your main environment and IE6 via virtual PC!! Click on the link below to get Virtual PC. Click on the screen shot to see IE6 and IE7 working side by side:
Get Microsoft Virtual PC
3. Download Firebug(FireFox) and Web Developer(FireFox) and IE Developer Toolbar(IE6 and IE7)
Firebug is the most important add on because it allows you to adjust the css live then change your templates as you make changes. IE Developer Toolbar allows you to inspect elements in IE7 and IE6 but you can not make live edits. Still they will Greatly help you in solving CSS and alignment issues.
Get them Here:
Web Developer(FF)
FireBug(FF)
IE Developer Toolbar
4. Always Develop for FireFox/Safari First...
Firefox has the greatest amount of tools to develop with. Safari will render almost exactly like Firefox so developing for one should be compatible with the other. The second reason is that there are plenty of Hacks and workarounds for IE that are not available for FireFox.
5. ... Then Develop for IE6 and IE7
After you finish developing for FF you can now begin your IE6 and IE7 development. I suggest you start with IE7 then IE6. The reason being is that IE6 will run slowly in the Virtual PC so you only want to make final adjustments using...
6. Use Conditional statement for IE6 and IE7
After you completed your developement in FireFox and you bring up your page in IE6/7 you should notice some style differences. Using Conditional statements to load other CSS stylesheet for IE7/6 will keep your CSS valid and since conditional statements only work in IE, it will isolate IE. To do this add a second and third Stylesheet called IE7.css and IE6.css and load them after you main stylesheet.. In these style sheets you should overwrite any style that are not working in Firefox. Here is how the Stylesheet should be set up in your<head> tag
<
head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE7.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css" />
<![endif]-->
</head>
7. Only use hacks as a last resort ... and if you do use them separate them out
There comes a point where the clock is ticking and you need the website done yesterday. While I don't condone using hacks some times it is a necessity to get something to work in all browser. If you do use hacks follow these two rules
- Separate the hacks from the main styling
- Use cascading hacks and label them
For example you have a class called table width. In Firefox it looks good but in IE7 its too wide and in IE 6 its too short. Here is a diagram of how the hacks work.
Since you coded for FireFox you should not need to hack it.
If you want a style to only be seen by IE7 and IE6 place a # in front of the style
For IE6 only place a _ in front of the style.
So if your main styling code for a class tablewidth looks like his:
.tablewidth
{
color:black;
padding:0px 5px 3px 2px;
width:532px;
}
remove the problematic style and create a new section below the original:
.tablewidth
{
color:black;
padding:0px 5px 3px 2px;
}
/*Hacks for tablewidth class*/
.tablewidth
{
width:532px; /*Firefox/Safari will read this*/
#width:530px; /*IE7 and IE6 can only see this */
_width:520; /*Only IE6 can read this */
}
Coding the style sheets in this way will make you code much more readable and make you hacks easier to find and remove if you solve the problem or rework using conditional statements
I hope you find this article useful, please feel free to leave me comments and questions