Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is this a typo in html5shiv?

Tags:

javascript

I just saw html5shiv and found this code:

function addStyleSheet(ownerDocument, cssText) {
    var p = ownerDocument.createElement('p'),
        parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;

    p.innerHTML = 'x<style>' + cssText + '</style>';
    return parent.insertBefore(p.lastChild, parent.firstChild);
  }

Where p.innerHTML = 'x<style>' + cssText + '</style>'; is used. Why x is used here?

like image 206
Navin Rauniyar Avatar asked Jul 23 '14 08:07

Navin Rauniyar


1 Answers

No, this is not a typo.

According to question about x aFarkas has made answer

This is because of a non standard concept of old IE. Similiar to the concept of "has layout" in CSS, they had the concept of scoped and nonscoped elements for rendering with innerHTML.

aFarkas points to two articles

  • http://allofetechnical.wordpress.com/2010/05/21/ies-innerhtml-method-with-script-and-style-tags/
  • http://www.thecssninja.com/javascript/noscope

The problem

When IE converts a string of HTML into a DOM structure, it treats SCRIPT and STYLE differently than any other tags. When it hits one, it checks to see if there are any nodes before it that are “visible.” (Visible very loosely means nodes that will be displayed when the structure is rendered.) If there aren’t any visible nodes before it hits SCRIPT or STYLE, it simply tosses those away and continues processing.

like image 53
Krzysztof Safjanowski Avatar answered Oct 06 '22 14:10

Krzysztof Safjanowski