HTML5 section tag detection using javascript

[sammari]

Hi all,
I am working on a hack to detect if a browser is able to deal with HTML5 new tag. I wrote this code:

Code: Select all

var element=document.createElement('section');
      document.body.appendChild(element);
      if (typeof element !='undefined'&& element instanceof HTMLElement && element.hasChildNodes()){
 
         $("#result6").html('OK');
         }
         else
         {
         $("#result6").html('KO');

but it returns a wrong result with browser like chrome. The problem is that the element.hasChildNodes() retruns false. In the HTML5 specification they said that section tag must have at least 1 child node.

Does any one have an idea how to detect their support in a browser?

Thank you all

[zcorpan]

In the HTML5 specification they said that section tag must have at least 1 child node.

??? Where does it say this?

Does any one have an idea how to detect their support in a browser?

You can check if it closes <p> and you can check if default style is display:block, and that it's not an instance of HTMLUnknownElement. But why do you want to check for its support?

[JAB Creations]

I'm not entirely sure of this though after testing in Firefox 6.0, IE8 and IE10 Preview 3 I have a strong suspicion that this is likely a reliable manner to detect (X)HTML element support...

Code: Select all

<section id="testsection" style="height: 100px; width: 400px; outline: #ff0 solid 1px;">section</section>

<div><a href="javascript:alert(document.getElementById('testsection').namespaceURI);">result?</a></div>

If it's not supported it will return "undefined" (without the quotes) otherwise it returns "http://www.w3.org/1999/xhtml" for my site which is served as XHTML 1.1 / application/xhtml+xml. I'm not sure what it would return for HTML 4/5.

So if you're looking for a boolean condition you may want to try...

Code: Select all

if (document.getElementById('testsection').namespaceURI!=undefined) {alert(document.getElementById('testsection').nodeName+' seems to be supported by your browser.');}
else {alert(document.getElementById('testsection').nodeName+' does NOT seem to be supported by your browser.');}

Hope this helps.

[JAB Creations]

I did a quick follow-up test with randomized element names, they return the XHTML namespaceURI for invalid XHTML 1 / HTML 5 elements. The visual formatting seems off for invalid elements...

Z, do you have any clarification to add to this? I thought I was on to something. Browsers shouldn't proclaim they support something when they don't.

[sammari]

First thank you all for your answers.

@Zcorpan look here http://www.w3.org/TR/html5/content-mode ... ow-content. I want to check for it because i have to code a hack to detect HTML5 support in mobile and desktop browsers for my first project in engeneering university.

Second, i just use what they said in the darft of HTML5. My goal is to use JavaScript to detect if a browser support a HTML5 tag withtout using it , like http://www.html5test.com but i am novice (still in first year in university so i didn't really understand what he is doing). What i found is that browser say they support something but in reality they don't. The html5test code isn't super clear for me and they are some mistacks on it.

If any one know something about how to detect a HTML5 tag support or a tutorial on it he can help me (thank you in advance).

Note: I read diveintohtml5 so i know how to detect something like <input> type support. I know also about modernizr but they don't detect all HTML5 new tags speacillay those like <section> <footer> or some new values for previous HTML tag like the new doctype

[zcorpan]

I did a quick follow-up test with randomized element names, they return the XHTML namespaceURI for invalid XHTML 1 / HTML 5 elements. The visual formatting seems off for invalid elements...

Z, do you have any clarification to add to this? I thought I was on to something. Browsers shouldn't proclaim they support something when they don't.

namespaceURI should return the XHTML namespace for unknown elements. It doesn't mean they are supported.

[zcorpan]

sammari, you shouldn't need to check for support for <section>. That's why modernizr doesn't check for it. All you need to do is have

Code: Select all

section { display:block }

in your style sheet (for browsers that don't support it yet) and have

Code: Select all

<script>document.createElement('section');</script>

in the <head> (to make styling of the element work in old IE). Then you can use <section> as normal.

[sammari]

@zcorpan
We can made test for it. If Modernizr didn't make it that doesn't mean that it is not possible. Modernizr tests only few Features. Did you see http://www.html5test.com?! they test section and the other tags.

For all, thank you. I finally discover how we can test these tags. This is the code:

Code: Select all

var elements = 'section nav article aside hgroup header footer'.split(' ');
      for (var i=0;i<elements.length;i++)
         {
            var div = document.createElement( 'div' );
            div.innerHTML = '<'+elements[i]+'>test</'+elements[i]+'>';

            if (!( div.childNodes.length - 1 ))
               {
                  alert("Your browser supports "+elements[i]);
                  
                  
               }
            else {alert("your browser does not support "+elements[i]);}

         }

it tried it with a lot of browsers (Safari,IE8,7 and 9,Chrome13 and FireFox 5) It gives a good result.
I am waiting for your remarks

[zcorpan]

@zcorpan
We can made test for it. If Modernizr didn't make it that doesn't mean that it is not possible.

I didn't say it wasn't possible. I even suggested several ways in which you can check support. I just said it shouldn't be necessary in order to use.

I finally discover how we can test these tags. This is the code:

Code: Select all

var elements = 'section nav article aside hgroup header footer'.split(' ');
      for (var i=0;i<elements.length;i++)
         {
            var div = document.createElement( 'div' );
            div.innerHTML = '<'+elements[i]+'>test</'+elements[i]+'>';

            if (!( div.childNodes.length - 1 ))
               {
                  alert("Your browser supports "+elements[i]);
                  
                  
               }
            else {alert("your browser does not support "+elements[i]);}

         }

it tried it with a lot of browsers (Safari,IE8,7 and 9,Chrome13 and FireFox 5) It gives a good result.
I am waiting for your remarks

This would claim support where there isn't support. If you test element "foobarbaz" with the above, it would say supported in all but old IE, I think.

I still don't know why you want to check support for these elements. Are you writing an html5test.com killer? Or are you just trying to use these elements? Or something else?