Anne van Kesteren

Firefox and HTML5 sectioning elements

In HTML5 Shiv John Resig talks about the Internet Explorer HTML parser workaround from Sjoerd Visscher: document.createElement(element-name). Invoking this allows you to use elements with name element-name in your document in Internet Explorer. That’s a very cool discovery (and already useful for canvas for instance), but until the Mozilla guys fix bug 311366 using the section, header, footer, et cetera elements from HTML5 in Firefox will be impossible.

Comments

  1. It’s a great discovery. Sadly, it doesn’t help us register unknown <input> types. document.createElement("<input type=date>") has no effect on CSS.

    Posted by Dean Edwards at

  2. Given that HTML 5 is one vocabulary with two serializations, the following statement is a false one:

    until the Mozilla guys fix bug 311366 using the section, header, footer, et cetera elements from HTML5 in Firefox will be impossible.

    My weblog is a valid counter example.

    Posted by Sam Ruby at

  3. @Dean: yes, that nice technique doesn't help with all the cool new input types in HTML 5, but in those cases, progressive enhancement may be useful (I think IE defaults to text boxes if it doesn't understand that type) -- if so, then in the above example, for IE only, a custom date picker or whatever can be provided, whereas modern browsers do it for you...

    Or maybe we can ask the IE team to do something for us developers ;)

    Posted by Anup Shah at

  4. until the Mozilla guys fix bug 311366 using the section, header, footer, et cetera elements from HTML5 in Firefox will be impossible.

    My weblog is a valid counter example.

    A more accurate statement would have been: "until the Mozilla guys fix bug 311366 using the section, header, footer, et cetera elements from HTML5 in Firefox will be impossible in the text/html serialization."

    Posted by jgraham at

  5. Sam, your weblog uses XHTML5. I was talking about HTML5 (not HTML 5, which is the language). I agree with you in advance that I could have articulated that more.

    Posted by Anne van Kesteren at

  6. Here's a brief proof-of-concept for styling <input type="date"> in IE:

    <style type="text/css"> input { behavior: url('input.htc') } </style>

    And in the HTC:

    <public:component>
    <script type="text/javascript">
    if ((/type=date/i).test(this.outerHTML))
    {
     this.style.backgroundColor = 'red';
    }
    </script>
    </public:component>

    Of course we'll need to expand on this with some intelligent CSS parsing much like peterned's Whatever:hover script that adds A:hover support to MSIE, but it should be quite doable and work for numerous types of HTML5 input!

    Posted by Angus Turnbull at

  7. @Anne, @Sam,
    there is not much consequense in the the use of HTML 5 versus HTML5 (or html5).

    The HTML 5 draft uses HTML5, when it (eventually) should have used HTML 5. For instance it says The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up using HTML5 elements […]

    It would be nice establishing some consequent vocabulary, though …

    Posted by Leif Halvard Silli at