detect if generated content is supported by the browser

gencontentSupported.js

/*
Adapted from
https://github.com/KrofDrakula/Modernizr/commit/cdb322bdbdc7b62b4f0fcece08372e6194342f7d
*/
var gencontentSupported = function() {	
  var doc = document,
      d = doc.createElement('div'),
      p = doc.createElement('p'),
      b = doc.body,
      w,
      rand = ('' + Math.random()).split('.')[1];
      supported = false,
      getWidth = function(el) {
        if(el.offsetWidth) {
          return el.offsetWidth;
        }
        return parseInt(doc.defaultView.getComputedStyle(el, '').getPropertyValue('width'), 10);
      };
  
  p.id = 'gc'+rand;
  d.innerHTML = '<style type="text/css">#gc'+rand+'.h'+rand+':before{content:"XXX"}#gc'+rand+'{position:absolute}</style>';
  
  b.appendChild(d);
  b.appendChild(p);
  
  w = getWidth(p);
  
  // is size different?
  p.className = 'h'+rand;
  if(w !== getWidth(p)) {
    supported = true;
  }
  
  b.removeChild(d);
  b.removeChild(p);

  return supported;
};