|
WEB Builder Archives — September 1998
Compatibility without Compromise
 If you want to build the flashiest, most dynamic site possible and reach the largest possible audience, read on!
by Eric Krock
In the Web-wide war for eyeball hours, the fastest, flashiest site will have the edge. That means bringing your Web pages to life with JavaScript and Dynamic HTML. It also means facing the fact that Microsoft JScript and Netscape JavaScript are not fully compatible with each other. Navigator 4 and Internet Explorer 4 also have different Document Object Models (DOMs). Because it will be a long time before production versions of the Mozilla browser and Internet Explorer 5 are released and installed by the majority of Web users, developers will probably want to support Nav4 and IE4 until the Millenium Bug strikes and we're all drafted to become COBOL programmers.
Can you afford to write for just one browser or the other? No way. Would you pay for a television commercial that could be seen only on wide screen TVs? Of course not. If you build a Web site that only works for one browser or the other (or a particular platform) you automatically lock out a third or more of your potential customers. If you don't mind raising your per-impression development costs by half or cutting your advertising revenue and sales by a third, stop reading now. If you want to build the most dynamic site possible and reach the largest possible audience, read on!
How do you write for both? That's the number one question among Web builders today. The secret to site-building success is to write cross-browser JavaScript and Dynamic HTML which gives you the most dynamic pages for the latest browsers, yet gracefully degrades for users with older browsers. Compared to the lowest common denominator approach that many people follow for universal access, you'll gain a lot of functionality with very little compromise.
Dynamic HTML (DHTML) is a set of technologies for manipulating HTML elements. Netscape and Microsoft define DHTML differently, but both companies support:
Cascading Style Sheets, level 1 (CSS1) for formatting the elements;
Cascading Style Sheets Positioning (CSSP) for positioning, hiding, showing, and stacking elements in z-order;
A DOM for making the elements and their properties accessible from JavaScript;
An event model for intercepting and handling user events;
The ability to hide the browser's user interface and use the full screen as a DHTML canvas.
If you aren't familiar with these foundation technologies already, read through the free online tutorials and articles listed in the sidebar "Cross-Browser DHTML Resources." Cross-Browser DHTML (XBDHTML) is an informal subset of DHTML that I define as both fully functional on Navigator 4, Internet Explorer 4, and later versions of the browsers; and that degrades to load without errors in older browsers.
Success with CSS
Your first rule of thumb should be to use Cascading Style Sheets for static settings and JavaScript for dynamic or conditional settings. Both Nav4 and IE4 support CSS1 and CSSP markup. If you always want an element to have the same format or to appear in a particular location, you don't need to use JavaScript at all. You can just use static CSS1 and CSSP markup, and this will eliminate the need to deal with cross-browser DOM issues. For example, if you always want the element with identifier (ID attribute value) "foo" to be positioned 100 pixels from the left of the page and 50 pixels down from the top and display its text in red, you can use this CSS markup:
<HTML><HEAD>
<TITLE>Static CSS markup</TITLE>
<STYLE TYPE="text/css">
<!- /* use HTML comment to hide CSS markup from older browsers */
#foo { position:absolute;
left: 100px; top:50px;
color: red; }
--></STYLE>
</HEAD><BODY> <DIV ID="foo">
<P>some text</P></DIV>
</BODY></HTML>
Note that we use HTML comments to hide CSS markup from older browsers. This ensures that users of text-only browsers and non-CSS browsers like Nav3 won't see the CSS markup displayed on their page.
Back to top
|