MozillaZine

Making Your Web Page Compatible with Mozilla

Wednesday September 4th, 2002

Nicolás Lichtmaier has written a guide that explains how to make standards-compliant web pages that work with Mozilla. The article concentrates on differences in the implementations of JavaScript and the DOM in Internet Explorer and Mozilla.


#1 Nice

by c960657

Wednesday September 4th, 2002 8:42 AM

Reply to this message

An IMO more elegant alternative to creating a findObject function and similar is to simply define the missing functions on the appropriate objects.

For example will the following code make IE4 support getElementById as specified by W3C:

if (!document.getElementById && document.all) { document.getElementById = new Function('id', 'return document.all[id]') }

This could just be contained in a Javascript file that is included on all yor pages.

Likewise you could make a function that you call as the first thing in each event handler that adds the missing functions to the event object. After this call you can access the event object as if it were standards compliant:

function standardizeEvent(event) { if (!event.stopPropagation) { event.stopPropagation = new Function('this.cancelBubble = true') } if (!event.preventDefault()) { event.preventDefault() = new Function('this.returnValue = true') } if (typeof event.layerX == 'undefined' && typeof event.offsetX == 'number') {

event.layerX = event.offsetX event.layerY = event.offsetY } if (!event.target && event.srcElement) { event.target = event.srcElement if (event.type == 'onmouseout') { event.relatedTarget = event.toElement } else if (event.type == 'onmouseover') { event.relatedTarget = event.fromElement } } }

I think this is much more elegant than doing something like var x = event.layerX ? event.layerX : event.offsetX in every event handler.

I also think that it is more elegant than e.g. the library DynAPI that tries to make a browser independant DHTML implementation but uses its own object model and naming conventions instead of those defined by W3C.

#2 ... with better indentation

by c960657

Wednesday September 4th, 2002 8:44 AM

Reply to this message

An IMO more elegant alternative to creating a findObject function and similar is to simply define the missing functions on the appropriate objects.

For example will the following code make IE4 support getElementById as specified by W3C:

if (!document.getElementById && document.all) {

____document.getElementById = new Function('id', 'return document.all[id]')

}

This could just be contained in a Javascript file that is included on all yor pages.

Likewise you could make a function that you call as the first thing in each event handler that adds the missing functions to the event object. After this call you can access the event object as if it were standards compliant:

function standardizeEvent(event) {

____if (!event.stopPropagation) {

________event.stopPropagation = new Function('this.cancelBubble = true')

____}

____if (!event.preventDefault()) {

________event.preventDefault() = new Function('this.returnValue = true')

____} ____if (typeof event.layerX == 'undefined' &&

________typeof event.offsetX == 'number') {

________event.layerX = event.offsetX

________event.layerY = event.offsetY

____}

____if (!event.target && event.srcElement) {

________event.target = event.srcElement

________if (event.type == 'onmouseout') {

____________event.relatedTarget = event.toElement

________} else if (event.type == 'onmouseover') {

____________event.relatedTarget = event.fromElement

________}

____}

}

I think this is much more elegant than doing something like

____var x = event.layerX ? event.layerX : event.offsetX

in every event handler.

I also think that it is more elegant than e.g. the library DynAPI that tries to make a browser independant DHTML implementation but uses its own object model and naming conventions instead of those defined by W3C.

#3 great tip

by egoine

Wednesday September 4th, 2002 10:39 AM

Reply to this message

Wow. thanks for the great tip. It would be very nice if someone could provide such a library. There really is no need for every web developper to redevelop this on it's own. Of course, I'm just a lazy bastard hoping somebody else does it ;)

#4 parent post intented as reply to c960657 tip.

by egoine

Wednesday September 4th, 2002 10:41 AM

Reply to this message

-

#9 Re: great tip

by c960657

Wednesday September 4th, 2002 2:36 PM

Reply to this message

I'm afraid I haven't got a library of my own (yet), just fragments here and there.

But it could be cool to make browsers support as much of the different DOM recommendations from W3C (all those listed on <http://www.w3.org/DOM/DOMTR> ) as possible, even though they don't support them natively.

Has anybody heard of such a project? If not, well, let's get started, then :-)

#11 Re: great tip

by superyooser

Wednesday September 4th, 2002 3:32 PM

Reply to this message

There are lots of cross-browser DHTML libraries and "DOM APIs" out there. Just do a Google search. I haven't actually used any, but they look pretty cool.

Check out Netscape's xbStyle API for JavaScript over on DevEdge: <http://devedge.netscape.c…/updating-expcol-xbstyle/>

There's also one on SourceForge called Jude: <http://judelib.sourceforge.net/>

#12 Re: Re: great tip

by c960657

Wednesday September 4th, 2002 4:12 PM

Reply to this message

>There are lots of cross-browser DHTML libraries and "DOM APIs" out there.

Yes - but are there any, that don't invent their own APIs?

The great thing about implementing W3C standards is that you can easily replace one library with another (if they both implement the API specified by W3C), if you are unsatisfied with one implementation. And some day when "all" browsers support the standards, you can just get rid of the Javascript compatibility code and your site will keep working, just much cleaner.

#15 Re: Re: Re: great tip

by egoine

Thursday September 5th, 2002 12:28 PM

Reply to this message

xbStyle seems to do it, at least for getElementById :)

See this article : <http://www.oreillynet.com…browser_style.html?page=2>

#5 application/x-trash~

by happydufus

Wednesday September 4th, 2002 11:02 AM

Reply to this message

Quite Ironic really, an article on how to ensure cross-browser compatibility has problems with MSIE.

(apparantly MSIE dosnt seem to like the mime-type of application/x-trash~ )

#6 Re: application/x-trash~

by nick <nick@reloco.com.ar>

Wednesday September 4th, 2002 11:09 AM

Reply to this message

Uh? Doesn't work in IE?

#7 Re: Re: application/x-trash~

by happydufus

Wednesday September 4th, 2002 12:12 PM

Reply to this message

Apparently not - MSIE tries to download the page as a file to the local hard-drive.

#10 Fixed!

by nick <nick@reloco.com.ar>

Wednesday September 4th, 2002 3:24 PM

Reply to this message

The "joe" backups were being included in the content-negotiation. =)

#8 not only IE

by niner

Wednesday September 4th, 2002 2:31 PM

Reply to this message

you can't even check the page using the W3C link at the bottom of the page because the W3C page validator doesn't like the xtrash too...

#13 I think of it the other way...

by schapel

Thursday September 5th, 2002 8:21 AM

Reply to this message

I think of making a web page that will work with a variety of browsers the opposite way -- the difficult part is not getting it to work in Mozilla, but getting it to work in IE, Opera, and older versions of Netscape.

If I wrote instructions for making a web page compatible with most browsers, I'd suggest the following:

1. Select the DTD you want to use -- transitional HTML, strict HTML, or XHTML. I couldn't recommend XHTML because it's not supported well in non-Gecko browsers. I'd instead recommend strict HTML because most browsers render transitional HTML in quirks mode, not according to W3C standards.

2. Get the web page to work in the latest release of Mozilla. Mozilla has lots of tools to help in this step, such as JavaScript strict mode and the Venkman JavaScript debugger. Some other features that would help are covered by bug 6211 <http://bugzilla.mozilla.org/show_bug.cgi?id=6211> (View page errors), bug 47108 <http://bugzilla.mozilla.org/show_bug.cgi?id=47108> (Hook up HTML quality indicator to status bar for notification of page errors), bug 79612 <http://bugzilla.mozilla.org/show_bug.cgi?id=79612> (Source file links in JavaScript console should jump to line number of problem), and bug 104383 <http://bugzilla.mozilla.org/show_bug.cgi?id=104383> (Ability to go to specific line number in View Source window).

3. Validate the HTML and CSS using the W3C validators.

4. Get it to work in the oldest version of IE and Opera you care to support. This is where the tips above really help minimize the changes to the JavaScript. Supporting IE 5 will allow your page to work for most visitors. Keep this step in mind when doing step 2 so you try not to use parts of CSS and the DOM that these browsers cannot handle. After doing this step, go back and repeat steps 3 and 4 to make sure it still works in Mozilla and validates.

I wouldn't bother supporting other browsers unless the web pages on the site are expected to get millions of hits. Instead, let the makers of the other browsers upgrade their browsers to support the parts of the HTML, CSS, JavaScript, and DOM standards you're using. Let your visitors upgrade their browsers to a newer version.

#14 Re: I think of it the other way...

by nick <nick@reloco.com.ar>

Thursday September 5th, 2002 12:10 PM

Reply to this message

Well.. your approach won't work. You are trying to make people think and work like you (and like me). It's false that you need to pass W3C validator to have a page working everywhere. And you won't go anywhere trying to make people to develope on Mozilla and then port to Explorer. Reality is the starting point of any evangelism effort. You can then gradually make people be closer and closer to standards.