Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
The HTML5 shi(m|v) fixes styling HTML5 elements in old IE, but things break again when an unappended element's content is set by innerHTML, like so:
var s = document.createElement("div");
s.innerHTML = "<section>Sad section cannot be styled. :(</section>";
document.body.appendChild(s);
Proposed resolution
To fix this, pass your HTML5 through innerShiv and append the returned document fragment, instead of using innerHTML directly:
var s = document.createElement("div");
s.appendChild(innerShiv("<section>Happy section loves CSS. (:</section>"));
document.body.appendChild(s);
...more info here:
innerShiv makes HTML5shim work on innerHTML & jQuery.
Remaining tasks
#865536: drupal_add_js() is missing the 'browsers' option
#1077878: Add HTML5shiv to core
User interface changes
???
API changes
???
Comments
Comment #1
klonos...this depends on #1077878: Add HTML5shiv to core that is now postponed on #865536: drupal_add_js() is missing the 'browsers' option. So... postponed as well.
Comment #2
klonos...hmm, yeah.
Comment #3
seutje CreditAttribution: seutje commentedsoup scribe!
Comment #4
cosmicdreams CreditAttribution: cosmicdreams commentedI tried to find a non Google+ link for this but couldn't. Here's the relevant excerpt from Addy Osmani's Google+ post entitled jQuery 1.7 sneak preview: https://plus.google.com/115133653231679625609/posts/9PcwuFgrSTs
tl:dr version: Progress has been made getting the innershiv into jQuery.
Improved Support For HTML5 With jQuery
jQuery 1.7 won't come with it's own built-in HTML5 shivs (you'll still have to load in a shiv of choice into the document head), but it will address two important issues previous releases have suffered:
1) In jQuery 1.6.4 and below, HTML5 elements were not supported with innerHTML but this is rectified with the newest release. HTML5 elements now added with any methods using innerHTML under the hood are added to a successfully shim'd document or document fragment as one would expect.
2) HTML5 elements being cloned (when an element is cloneNode'd) will now use an alternative approach to cloning which supports cloning HTML5 elements cross browser.
// here's an example of a html5 shiv that would be loaded in the head of your document
// you can of course alternative between the solutions used for this
( "abbr article aside audio canvas details figcaption figure footer header hgroup " +
"mark meter nav output progress section subline summary time video"
).replace(/\w+/g, function(n) {
document.createElement(n);
});
// let's append some HTML5 elements which will be inserted internally via innerHTML. This
// should now work fine with all browsers, assuming a HTML5 shim/shiv is being used
$("#el").append("HTML5 elements");
// selection of HTML5 elements we added above
var article = $("article"),
aside = $("aside");
// simple tests to ensure that the HTML5 elements are valid and can be styled via jQuery
console.log( article.css("fontSize"), "15px", 'HTML5 elements can be styled');
console.log( aside.length, 1, 'HTML5 elements don't collapse their children')
Comment #5
klonosThanx for the update Chris! It seems logical to close this once/if jQuery 1.7 (or latest) makes it in core then(?).
PS: ...btw I've updated the issue summary in #1077878: Add HTML5shiv to core. You might wanna take a look at it and chime in.
Comment #6
cosmicdreams CreditAttribution: cosmicdreams commentedIt may be too early, but the jQuery team has jQuery 1.7 beta 1 available for testing.
Perhaps it is not too early to be building unit tests that will test to see if jQuery 1.7 will provide us the functionality we need. Should these unit tests be done with qUnit?
Here's the link to the reference material: http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/
This appears to be the main issue we are concerned with here: http://bugs.jquery.com/ticket/6485
Comment #7
seutje CreditAttribution: seutje commentedyou don't trust jQuery's own tests? -> https://github.com/jquery/jquery/blob/master/test/unit/manipulation.js#L467
Comment #8
cosmicdreams CreditAttribution: cosmicdreams commentedI do trust jQuery's own unit tests. In addition to those tests we should test are use of their tools so that future alterations can benefit from our integration testing.
Comment #9
seutje CreditAttribution: seutje commentedwhether or not we should test functionality which is already covered by the tests performed by the included library is a separate discussion altogether.
Comment #10
cosmicdreams CreditAttribution: cosmicdreams commented@seutje, agreed. Do you understand that I'm not talking about testing functionality that is already covered by the tested performed by the included library?
I'm talking about our testing our use of jQuery not jQuery itself.
Comment #11
cosmicdreams CreditAttribution: cosmicdreams commentedJust wanted to note here that jQuery 1.7 is out : http://blog.jquery.com/2011/11/03/jquery-1-7-released/
There's even an issue to integrate it : #1328900: Update to jQuery 1.7
Comment #12
cosmicdreams CreditAttribution: cosmicdreams commentedIs it fair to mark this issue as a duplicate of #1328900: Update to jQuery 1.7 ?
Comment #13
klonos...I guess it is if 1.7 includes all HTML5shiv functionality. Still, we shouldn't close this until after #1328900: Update to jQuery 1.7 is actually fixed.
Comment #14
JacineI think this is now officially a wont fix, since we will not be needing the "InnerShiv" script.
The jQuery issue has been tagged HTM5, so we are tracking it and since 1.7 has been officially released with this functionality, that's the obvious solution to this problem and we should focus our attention over there.