A polyfill for document.head:

if(!document.head) {
  document.head = document.getElementsByTagName('head')[0];
}

myIframe.contentDocument.head.appendChild(script);

Don’t:

• Replace the target element with another
• Manipulate unrelated elements (e.g. body)
• Add extra elements
• Manipulate existing attributes
• Create more than one global variable
• Add leaky CSS

Unless… You really have to

Code like this:

if(!('open' in document.createElement('details')) {
  var details = document.getElementsByTagName('details');
  for(var i=details.length; i--;) {
    Details.init(details[i]);
  }
}

belongs to your polyfill, NOT the user’s code

• Attributes & properties might change
• New elements might get added
• CSS can be very different
• There might not be a DOM
• It might not be HTML

In cases like that… Don't break!

Our only tools:

• Mutation events
  • Deprecated :-(
• propertychange event
  • Microsoft proprietary :-(

Mutation events

They bubble, so we can use event delegation!

document.addEventListener('DOMAttrModified', function(e) {
    var node = e.target, attr = e.attrName;
    if(/^input$/i.test(node.nodeName) &&
      (attr === 'placeholder' || attr === 'value'))
        Placeholder.update(node);
  }, false);

• Accessors (getters and setters)
• onpropertychange for IE < 7
• Object#watch() for Firefox

Object.defineProperty(obj, 'placeholder', {
  get: function() { return obj.getAttribute('placeholder') },
  set: function(value) { Placeholder.update(obj, value); },
  enumerable: true,
  configurable: true
});

Support: IE8, FF4, Chrome, Safari 5, Opera 12

obj.__defineGetter__('placeholder', function() {
		return obj.getAttribute('placeholder') 
	});
obj.__defineSetter__('placeholder', function(value) {
		Placeholder.update(obj, value);
	});

Support: FF3.5, Chrome, Safari 4, Opera 10.10

Combine them: github.com/eligrey/Xccessors

IE < 9 thinks that attributes are properties, so:

the previous getter would result in infinite recursion

When enumerable: true IE8 throws an exception. Catch it with:

try { /* ... */ } catch(e) {
  if(e.number === -0x7FF5EC54) {
    /* ... */
  }
}

• Element.prototype is not evil in this case
• If you can’t, use DOMNodeInserted to cater for new elements

matchMedia

window.matchMedia || (window.matchMedia = (function(){
  var div = document.createElement('div');
  div.id = 'mq-test-1';
  div.style.cssText = 'position:absolute;top:-100em';
  return function(q){
    div.innerHTML = '<style media="'+q+'">#mq-test-1{ width:42px; }</style>';
    document.body.appendChild(div);
    var ret = div.offsetWidth == 42;
     document.body.removeChild(div);
    return { matches: ret, media: q };
   };
})());

Simplified version of https://github.com/paulirish/matchMedia.js

if(!('outerHTML' in document.createElement('_'))
Object.defineProperty(Element.prototype, 'outerHTML', {get: function(){
  if (doc.xmlVersion) {
    return (new XMLSerializer).serializeToString(node);
  } else {
    var x = document.createElement('_');
    x.appendChild(this.cloneNode(false));
    return x.innerHTML.replace('><', '>' + this.innerHTML + '<');
  }
}, enumerable: true});

Simplified version of https://gist.github.com/1044128 by Eli Grey

CSS polyfills

Everything is hard!

• Parsing
• Implementation
• Reacting to changes
• Unavoidable obtrusiveness