For a quick overview of browser compatability, Webmonkey has one of the best things going with the Browser compatability chart.
Generally, you have to look at what you're trying to accomplish and cut it off at the point of diminishing returns:
HTML 3 is pretty well covered by most browsers: this is up to tables, frames (usually), and basic JavaScript (1.0).
Netscape 4 and IE 4 use widely divergent DOMs for CSS and DHTML. There are some useful tricks such as:
This code is from HTML::Mason, but you can run the checks just as easily in JavaScript using Navigator.appName.indexOf('microsoft') to catch IE vs. NS.
%
% if ($browser =~ /microsoft/) {
%
var doc = window.document.all;
var style = '.style';
var px = 'px';
%
% } else {
%
var doc = window.document.layers;
var style = '';
var px = '';
var origWidth = innerWidth;
var origHeight = innerHeight;
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight) {
location.reload();
}
}
onresize = reDo;
%
% }
%
The onresize function is necessary in Netscape because resizing the browser breaks the CSS attributes unless you reload.
At its heart, the primary difference between Netscape and almost any other browser out there is that Netscape is completely unable to handle the dynamic alteration of certain attributes -- colour, characters, height, width... you can move things around in Netscape 4.0 but not a whole lot more.
If you keep this in mind you can develop strategies for delivering a dynamic experience for those able to view it. In an ideal world, you can use a tool such as HTML::Mason to deliver completely different Web sites based on little more than browser-type and version. Mason won me over when I was able to write a Lynx component (for disabled and old-skool users) in under an hour for my company's Web site. | 