|
Cross Browser Compatibility
|
By Warren Baker
[Hits: 16741]
|
|
There are literally hundreds of web browsers in use around theworld. All of them implement the W3C document standards a littledifferently. Web designers must wrestle with these differencesto make a web site work. This article discusses the effect thosedifferent implementations has on design.
What is Cross Browser Compatibility?
If a web page is completely cross-browser compatible, it willlook more or less the same in all of the existing web browsers.The most commonly used browsers are Internet Explorer, NetscapeNavigator, Firefox and Opera.
Each one of these browser implements HTML, JavaScript andCascading Style Sheets (CSS) a little differently. Somedifference only create cosmetic difference others can break thewebpage. The situation gets worse because each browser is freeto implement "enhancements" to the W3C standard version of eachof these formats.
Then to compound matters even more the underlying operatingsystems also creates difference in how the computer displaysgraphical elements and text differently. When you add the factthat people are also using multiple versions of each of thebrowsers, no wonder web designers get headaches.
So what is a web designer to do?
Obviously, 100% compatibility with all potential browsers isimpossible. But it is possible to design your web page so itwill work in the most popularly used browsers.
To accomplish that, a web designer must write squeaky-clean codethat conforms to the W3C standards to get consistent resultsacross all browser platforms. The whole idea behind thestandards is that if each browser adheres to the same set ofrules, you will get more or less consistent results in all ofthe existing browsers.
Conforming can be a real challenge. It will limit some of theneater effects available in specific browsers. There are onlinecode validators available. You can validate HTML code athttp://validator.w3.org , the validator can also validate yourCSS and links. The service is free.
The validator checks your code based on the DOCTYPE you specifyon the webpage. The DOCTYPE tells the browser which version ofHTML or CSS the web page is using.
HTML Editors
There are some compatibility issues associated with anythingother than hand coding for HTML (and for that matter, even withhand coding.)
Best Choice - The best choice for compatibility is Dreamweaverbut you cannot use layers. Layers must be converted to tables tobe used.
Worst Choice - The worst choice is FrontPage. FrontPage isloaded with problems because it uses Microsoft and thereforeinternet explored specific code. Items that will not work inother browsers include:
* Marquees - you can use a JavaScript scroller to create asimilar effect that will work in the most common browsers. *bgsound tag - this is IE specific. * Page Transitions - this isIE specific. * Front Page generated Style sheets - this is IEspecific and can have unexpected results or crash otherbrowsers. * Front Page generated DHTML - it is better to useJavaScript to create the effects you want since it is morelikely to be cross browser compatible. * Hover Buttons - this isIE specific and has been know to crash browsers including olderversions of IE. You can use JavaScript, flash or CSS to getsimilar effects.
Other HTML Editors - the rest of the HTML editors will fallsomewhere between Dreamweaver and FrontPage in cross browsercompatibility. You just have to test the code your HTML editorgenerates.
CSS Style Sheets
Not all of your style sheets will work correctly in all of thebrowsers. However, style sheets rarely crash a web browser, butsometimes the pages will be downright ugly if not completelyunreadable. One of the major CSS problems is absolutepositioning since most browsers do not support it and it willcause different block to overlap others and create a jumbledmess.
Flash
Flash is great for adding style to a webpage and Macromediaprovides flash plug-ins for all of the major web browsers. Butdon't build the entire site with flash. Browser for the blind,most handheld devices do not support flash.
A small but significant number of users don't like it and don'tinstall the plug-in so they won't be able to access a flashsite. Also, search engines spyders can't follow the links on aflash site and won't index it.
Graphic Links
While these are attractive, they have the same problems as flashwith browsers for the blind and hand-held devices. Always usethe alt tag with graphics.
Bottom Line - even code that is validated may not work correctlyin all the major browsers. The best way a web designer cancreate cross browser compatibility is to test all of their webpages in the most popular browsers to see what happens.Personally, I find that a combination of style sheets and tablesworks best to ensure my pages look good in all of the browsers.
|
|
|
|
|
|
