Published by admin on 14 Aug 2008
The Importance of Browser Compatibility
For many web designers, style and layout are all important. For many other professional designers, those two parts do not make a whole.
Try this simple test. If you have several browsers installed, let’s say IE and Firefox, you’ll find that opening up some websites in either browser brings about some very surprising results. (In fact, I don’t think it was that long ago that opening up eBay in Firefox resulted in some pretty horrific disfigurement. Fortunately, that cross-browser problem has since been rectified.)
Still, there are many many websites where the designer has not taken those few extra minutes to ensure their beloved CSS is cross-browser compatible. Oh, it looks terrific in IE … but how does it function in Firefox, Opera or Safari? Did you even check???
Figures courtesy of thecounter.com show that the most widely used browers are 1) MSIE 7.x 2) MSIE 6.x 3) Firefox and 4) Safari, with Opera right behind the Mac OS. This shows that although IE remains the major player it no longer has a stranglehold on the market, and more and more users are switching to Firefox. Figures also show that Mac users are on the rise, so web designers have to keep Safari firmly in mind when developing new websites.
The problem, although less prominent with the latest browser versions, is that some browsers will interpret your CSS in different ways. This is no longer an obstacle with browser-specific CSS hacks, which force browsers to interpret your CSS the way you want it to perform.
As Sitepoint says: “The way CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and a second CSS rule that overrides the first command to the other browsers. If you have two CSS rules with identical selectors, the second CSS rule will almost always take precedence.”
So before you sign off on your latest design, why not check that your CSS is browser compatible.
For more information about browser specific hacks, check out Sitepoint’s great introduction at http://www.sitepoint.com/article/browser-specific-css-hacks.
Mike