Check HTML version with Java script

[Mark Agius]

Hi.

Now HTML5 is comming out, is there any way to check with script what type of HTML version the browser is using.

Eg.

<SCRIPT language="JavaScript">
<!--

var htmlVersion = ???????????

if(htmlVersion>=5){
  this.docunent.write("This is HTML 5 or later.<BR>\n");
// or
  this.document.location = "Html5page.htm";

} else {
  this.docunent.write("This is HTML 4 or or elarler.<BR>\n");
// or
  this.document.location = "Html4page.htm";

}
// -->
</SCRIPT>

[Mark Agius]

I've written the following.
Hope it works but not 100% sure yet.
Let me know if it works or not with your PC and browser.

It returns the first number after the browser code name in the user-agent string if found.
Eg.
Browser code name = 'Mozilla'
User-agent = 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; ...
Then returns 5.0

But is this the HTML version or the Mozilla version or are they the same?

<SCRIPT language="JavaScript">
<!--
var htmlVersion = getHtmlVer();
 
this.document.write("<br>htmlVersion = "+htmlVersion+"<br>")
 
if(htmlVersion>=5){
  this.document.write("This is HTML 5 or a later version.<BR>\n");
} else {
  this.document.write("This is HTML 4 or or an elarler version.<BR>\n");
}
 
function getHtmlVer(){
  var CName  = navigator.appCodeName;
  var UAgent = navigator.userAgent;
  var HtmlVer= 0.0;
  // Remove start of string in UAgent upto CName or end of string if not found.
  UAgent = UAgent.substring((UAgent+CName).toLowerCase().indexOf(CName.toLowerCase()));
  // Remove CName from start of string. (Eg. '/5.0 (Windows; U...)
  UAgent = UAgent.substring(CName.length);
  // Remove any spaves or '/' from start of string.
  while(UAgent.substring(0,1)==" " || UAgent.substring(0,1)=="/"){
    UAgent = UAgent.substring(1);
  }
  // Remove the end of the string from first characrer that is not a number or point etc.
  var pointer = 0;
  while("0123456789.+-".indexOf((UAgent+"?").substring(pointer,pointer+1))>=0){
    pointer = pointer+1;
  }
  UAgent = UAgent.substring(0,pointer);
 
  if(!isNaN(UAgent)){
    if(UAgent>0){
    HtmlVer=UAgent;
    }
  }
  return HtmlVer;
}
// -->
</SCRIPT>

This code returns the following values on my Windows XP, PC:
Internet Explorer 7 = 4.0
Netscape 4.6 = 4.6
Netscape 7.1 = 5.0
Netscape 9.0 = 5.0
Firefox 3.0 = 5.0
Apple Safari 3.2 = 5.0
Google Chrome 1.0 = 5.0
32bit Web Browser 9.05 = 4.0
WebWindow 0.00.0027 = 4.0
NeoPlanet 5.2 = 4.0
Opera 9.62 = 0.0(Opera), 4.0(IE), 5.0(NS (Firefox))
AOL 9.0 = 4.0
Visual Explorer 1.2 = 4.0

[HanneSThEGreaT]

Honestly, I don't think that there's a real, absolute need for this at this stage anyways

This may also be handy :
http://en.wikipedia.org/wiki/Compari...ngines_(HTML_5)

As far as I know, again, even IE8 is a bit "iffy" on it..

[PeejAvery]

I believe you have some errors, not in your code, but in thought process.

HTML version isn't a control or element that would contain version information. The only way to determine it is to compare it with validation. You cannot do this through code, but through an (X)HTML validator.

But, the better question is...Why would you ever need to check this???

[Mark Agius]

This post was started in 2009, but as Internet Explorer 9 beta was out this year
here is a way to check the HTML type with IE.

<!--[if gte IE9]>
  <SCRIPT LANGUAGE="JavaScript">
  // IE 9 or later support HTML 5.
  this.document.location = "Html5page.htm";
  </SCRIPT>
<![endif]>

<!--[if lt IE9]>
  <SCRIPT LANGUAGE="JavaScript">
  this.document.location = "Html4page.htm";
  </SCRIPT>
<![endif]>

<!--[if !IE]><!-->
  <SCRIPT LANGUAGE="JavaScript">
  // Not IE, so load pre HTML 5 page.
  this.document.location = "Html4page.htm";
  </SCRIPT>
<!--<![endif]-->

[PeejAvery]

If its not IE...then you should be loading HTML5. All other mainstream browsers already support it.

[Mark Agius]

Sorry they don't all support it.
If you are using Netscape 3.0 then it won't!
Most new versions do, which was what I was trying to check.
Although some say they use HTML5 don't fully support it or don't handle some parts properly.

[PeejAvery]

Why would you ever code for Netscape 3??? It's 16 years old!!! Netscape 9 was the last to ever be developed and it was declared end of life March 1st 2008.

Don't code for Netscape in today's world!!!

All of today's mainstream browsers already support HTML5. The only one behind is IE itself!

[Mark Agius]

Netscape was sold to AOL who then ended the program.
(AOL's browser is still built on Internet Explorer)
Some of the ex-Netscape employers then started SeaMonkey which is built on Netscape.
So you could say that after Netscape 9.x came SeaMonkey 1.0.
Many other other browsers are also built on and use Netscape code, but have altered it over time.
Some of the more known Netscape browsers are Opera which used IE code and later switched to Netscape,
Google Chrome, Apple Safari, K-Meleon, Maxthon browser.
The problem with some of these browsers is that as the different code has drifted apart,
the browsers have become less compatible with each other.
Also there is no browser that fully supports HTML5 as yet.
EG. Chrome and Opera don't support round images using official HTML5 code.

[PeejAvery]

Also there is no browser that fully supports HTML5 as yet.
EG. Chrome and Opera don't support round images using official HTML5 code.

Safari already is.

[Mark Agius]

Just checked with Safari 5.0.2 (7533.18.5).

As you can see from the following code, it fails when changing the inner border shape of an image from a standard square.
With Internet Explorer it's ok.

<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
<!--
HTML {
  COLOR:#000000;
  BACKGROUND:#BFBFFF;
  FONT-FAMILY:Arial;
  FONT-WEIGHT:normal;
  FONT-SIZE:12pt;
}
.avatar-frame2{border: 8px solid #7F7F00;}
.avatar-frame2,.avatar-frame2 img{
	width: 250px;
	height: 250px;
	-webkit-border-radius: 230px; /* Saf3+, Chrome */
	border-radius: 230px; /* Opera 10.5, IE 9 */
	/*-moz-border-radius: 230px;  Disabled for FF1+ */
	}
-->
</STYLE>
</HEAD>
<BODY BgCOLOR="#BFBFFF">
The image below should be a <B>round</B> image, 250 by 250 pixels.<BR>
The green border should go round the whole image.<BR>
The image shape will also change when the pointer is over it.<BR>
<FONT COLOR="#7F0000">With Safari it loses the border in the rounded corners.</FONT><BR>
OK with AOL, IE, WW etc. with normal image,<BR>
but can fail sometimes with an animated gif. (usually ok)<BR>

<IMG SRC="http://www.codeguru.com/forum/image.php?u=75449&amp;dateline=1055666616" ID="ImageName1" CLASS="avatar-frame2" onMouseOver="ImageName1.style.width='500px';ImageName1.style.borderRadius='0px 450px 50px 450px';" onMouseOut="ImageName1.style.width='250px';ImageName1.style.borderRadius='230px';"><BR>

<BR>
<BR>

<IMG SRC="http://www.codeguru.com/forum/image.php?u=35628&amp;dateline=1055666616" ID="ImageName2" CLASS="avatar-frame2" onMouseOver="ImageName2.style.width='500px';ImageName2.style.borderRadius='0px 450px 50px 450px';" onMouseOut="ImageName2.style.width='250px';ImageName2.style.borderRadius='230px';"><BR>

</BODY>
</HTML>

So still haven't found a browser 100% HTML5 compatible.

[PeejAvery]

That's CSS3 not HTML5. Also, your document isn't even valid HTML5 markup.

[Mark Agius]

So what is a HTML file with out any CSS, STYLE or CLASS tags?
Sounds like a text file with the wrong file extent.
I would love to see some HTML5 code that dosen't use CSS.

[PeejAvery]

Since CSS3 is not yet 100% adapted for full compatibility, it makes complete sense that not all browsers yet support it.

Either way, we are way off the original topic. If you want to discuss this further, PM me.