What are some things I need to know to make web pages work across most browsers?

[m2244]

Hello,

I thought I would ask this question in the JS section since a good deal of my web pages use JS and jQuery.

I have been doing web development for about 3 years now (along with various other time consuming tasks). Anyway, I never really understood how to pass objects the proper way so that they would work on all browsers (mostly IE and FF). Right now I am having a problem when I try my pages on IE 8.

Can someone point me to some good resources for learning this stuff?

Things like this:

if (navigator.appName.indexOf("Microsoft") != -1 && vernum < 9) { return window[movieName] } else { return document[movieName] }

And things like this for passing XML documents:

  // note: this condition (window.ActiveXObject) first for VISTA -- other returns true and delivers non-working script before this is encountered - if order is reversed
  if (window.ActiveXObject) 
   { //IE 
		alert("getFile::\r(window.ActiveXObject)");
	  xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
	  if (xmlhttp) 
	  {
		alert("getFile::\r(xmlhttp)");
		 xmlhttp.onreadystatechange=postFileReady;
		 xmlhttp.open('GET', pURL, true);
		 xmlhttp.send();
	  }
   } 
   else if (window.XMLHttpRequest) 
   { // code for Mozilla, Safari, etc 
		alert("getFile::\r(window.XMLHttpRequest)");
		xmlhttp=new XMLHttpRequest();
		xmlhttp.onreadystatechange=postFileReady;
		xmlhttp.open("GET", pURL, true);
		xmlhttp.send(null);
   } 
   else
   {
	alert("file: " + pUrl + " failed to load.");
   }

[007julien]

See for example, the Peter-Paul-Koch's pages ? Particularly this to pages : Browser detect and perhaps at first Object detection.
Then the pages about events or compatibility are too interesting...

EDIT : jQuery could be too useful. Just study the source code !

[felgall]

Originally Posted by m2244

Can someone point me to some good resources for learning this stuff?

Things like this:

if (navigator.appName.indexOf("Microsoft") != -1 && vernum < 9) { return window[movieName] } else { return document[movieName] }

That code is completely wrong. It is testing for a value that can be set in almost any browser and then assuming it is a specific browser.

The correct code for that test would be:

if (window[movieName]) { return window[movieName] } else { return document[movieName] }

Even where there is no feature you can test for you should never use the useragent for testing which browser it is - Internet Explorer has conditional comments that allow you to test versions of IE without needing to look at the useragent. For example the following code for creating a named input field (where IE8 and earlier require a different version of the command):

var newIN;
/*@cc_on
  @if(@_jscript)
     @if (@_jscript_version < 9)
        newIN = document.createElement("<input name='"+nam+"'>");
     @else
        newIN = document.createElement("input");
        newIN.name = nam;
     @end
  @else */
     newIN = document.createElement("input");
     newIN.name = nam;
/* @end @*/

[rnd me]

that code has a lot of repetition and favors activeX over W3, which should never be the case.

all you need is one sniff: (and that's only to support IE6, which i say you can ignore)

		var xmlhttp=!self.XMLHttpRequest?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest;
		xmlhttp=new XMLHttpRequest();
		xmlhttp.onreadystatechange=postFileReady;
		xmlhttp.open("GET", pURL, true);
		xmlhttp.send(null);

i don't like using conditional comments because they vanish when code is minimized, uglified, or closure'd.


if you need to sniff out old IE (6,7,8), use the vertical tab test, which survives compression, and is widely used in ads, so you know it's bullet-proof.


This is false in all browsers except IE versions 4-8 :

isIE="\v"=="v";

edit:
one last thing, i prefer self over window for sniff tests because self works in Worker() scripts and server-side JS, whereas window only works in browser JS.
granted, most of the time you're looking for a browser-only object, but "self" is less to type than "window" anyway, and it's more portable, so why not?

[Old Pedant]

RndMe: Did you notice his comment about the reason he did the ActiveXObject test first?

  // note: this condition (window.ActiveXObject) first for VISTA -- other[wise] returns true 
  // and delivers non-working script before this is encountered - if order is reversed

One of my machines is still using Vista and I've never seen this but truth to tell I don't know that I've ever looked closely for it. I wonder...

[rnd me]

Originally Posted by Old Pedant

RndMe: Did you notice his comment about the reason he did the ActiveXObject test first?

yes, but the code shown had nothing to do with any OS. vista can use IE 7-9, so it's ok to use an XMLHttpRequest on vista. or xp or win7 for that matter...


in general, i would say to OP that browser conflicts are slowly disappearing. depending on the scope and budget of your web work, you may choose to ignore legacy devices and target only machines from the last 5 years.
this is not outlandish anymore, large companies like youtube and facebook have already dropped the exact kind of support show in youi ajax code, and jQuery is dropping it next on the version.

imho, now is the time to write once and run almost everywhere now, and everywhere everywhere (same code) in a few years.

i just realized the other day that most old browser are on winxp and vista boxes. almost all win xp and vista boxes use mechanical hard drives.
vista stopped being sold 4 years ago.
mechanical hard drives last 3-7 years, depending on use.
the old computer is not super fast, so it's used casually for email and internet.

i think when the old computer dies, it's going to be replaced not with another old computer, but with a tablet or chromebook or cheap laptop.

if these postulates stack up, IE8 should be gone within a couple years. How long can IT departments hold out? that's another matter, but the pressure is mounting from all sides for even a chrome frame patch, if not a code migration.