Cross Browser Compatibility by Warren Baker
There are literally hundreds of web browsers in use around the world. All of
them implement the W3C document standards a little differently. Web designers
must wrestle with these differences to make a web site work. This article
discusses the effect those different implementations has on design.
What is Cross Browser Compatibility?
If a web page is completely cross-browser compatible, it will look more or less
the same in all of the existing web browsers. The most commonly used browsers
are Internet Explorer, Netscape Navigator, Firefox and Opera.
Each one of these browser implements HTML, JavaScript and Cascading Style
Sheets (CSS) a little differently. Some difference only create cosmetic
difference others can break the webpage. The situation gets worse because each
browser is free to implement "enhancements" to the W3C standard version of each
of these formats.
Then to compound matters even more the underlying operating systems also
creates difference in how the computer displays graphical elements and text
differently. When you add the fact that people are also using multiple versions
of each of the browsers, no wonder web designers get headaches.
So what is a web designer to do?
Obviously, 100% compatibility with all potential browsers is impossible. But it
is possible to design your web page so it will work in the most popularly used
browsers.
To accomplish that, a web designer must write squeaky-clean code that conforms
to the W3C standards to get consistent results across all browser platforms.
The whole idea behind the standards is that if each browser adheres to the same
set of rules, you will get more or less consistent results in all of the
existing browsers.
Conforming can be a real challenge. It will limit some of the neater effects
available in specific browsers. There are online code validators available. You
can validate HTML code at http://validator.w3.org
, the validator can also validate your CSS and links. The service is free.
The validator checks your code based on the DOCTYPE you specify on the webpage.
The DOCTYPE tells the browser which version of HTML or CSS the web page is
using.
HTML Editors
There are some compatibility issues associated with anything other than hand
coding for HTML (and for that matter, even with hand coding.)
Best Choice - The best choice for compatibility is Dreamweaver but you cannot
use layers. Layers must be converted to tables to be used.
Worst Choice - The worst choice is FrontPage. FrontPage is loaded with problems
because it uses Microsoft and therefore internet explored specific code. Items
that will not work in other browsers include:
* Marquees - you can use a JavaScript scroller to create a similar effect that
will work in the most common browsers. * bgsound tag - this is IE specific. *
Page Transitions - this is IE specific. * Front Page generated Style sheets -
this is IE specific and can have unexpected results or crash other browsers. *
Front Page generated DHTML - it is better to use JavaScript to create the
effects you want since it is more likely to be cross browser compatible. *
Hover Buttons - this is IE specific and has been know to crash browsers
including older versions of IE. You can use JavaScript, flash or CSS to get
similar effects.
Other HTML Editors - the rest of the HTML editors will fall somewhere between
Dreamweaver and FrontPage in cross browser compatibility. You just have to test
the code your HTML editor generates.
CSS Style Sheets
Not all of your style sheets will work correctly in all of the browsers.
However, style sheets rarely crash a web browser, but sometimes the pages will
be downright ugly if not completely unreadable. One of the major CSS problems
is absolute positioning since most browsers do not support it and it will cause
different block to overlap others and create a jumbled mess.
Flash
Flash is great for adding style to a webpage and Macromedia provides flash
plug-ins for all of the major web browsers. But don'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't install the
plug-in so they won't be able to access a flash site. Also, search engines
spyders can't follow the links on a flash site and won't index it.
Graphic Links
While these are attractive, they have the same problems as flash with browsers
for the blind and hand-held devices. Always use the alt tag with graphics.
Bottom Line - even code that is validated may not work correctly in all the
major browsers. The best way a web designer can create cross browser
compatibility is to test all of their web pages in the most popular browsers to
see what happens. Personally, I find that a combination of style sheets and
tables works best to ensure my pages look good in all of the browsers.
About the Author
Warren Baker is an Internet business consultant for WebDesigners123.
WebDesigners123 connects the Freelance
Web Designer with Webmasters who need their services.
|
