Understanding how browsers work

Question

Recently I been doing some Web UI work, and it is frustrating to deal with all the compatibility issues, and the unexpected browser (FF, IE, Safari) behaviors.

• Event bubbling
• creating and destroying elements
• dynamically adding elements with behaviors (that did not initially execute)
• interacting with modals
• z-index

I seek to understand how and why browsers work the way they do, and how they are built. Also any pointers or links about best practices. Thanks

Answer 1

YUI theater has a bunch of great content. Watch the Crockford videos for more on Javascript / DOM issues.

YUI Theater

Answer 2

Here's some informative links about how browsers work, and some information/guides about CSS and cross-browser compatibility:

• How Web Browsers Work
• How Web Browsers Work (less technical)
• CSS and Browser Compatibility
• CSS Compatibility Guide

And some detailed information about the specific things you're interested in:

• Event Bubbling and Browser Information About It
• Adding Elements to the DOM; Adding and Removing Elements Dynamically
• Modals; Cross-browser Modals
• z-index

Answer 3

For CSS cross browser compatibility, a CSS Reset can help tame the madness a bit ("The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.").

As for inconsistencies with JavaScript bubbling, events, and behaviors, you could use a framework to help alleviate some of the pain. One of the goals of these frameworks is "write once, run anywhere [any browser]". JQuery is the most popular library at the moment. Google can help you find other frameworks.

Answer 4

Really, just use prototype or JQuery. The extra 12MB or so will drastically simply your development.

Answer 5

I have a (pretty long..) summery on the subject in how browsers work. You can also see the resources list for other references.