inject element with styles without support for IE
I was trying to understand the Modernizr method that injects styles into
an element, but I couldn't understand the / After page load injecting a
fake body doesn't work so check if body exists.
Their method looks like:
injectElementWithStyles = function( rule, callback, nodes, testnames ) {
var style, ret, node, docOverflow,
div = document.createElement('div'),
// After page load injecting a fake body doesn't work so check if body
exists
body = document.body,
// IE6 and 7 won't return offsetWidth or offsetHeight unless it's in
the body element, so we fake it.
fakeBody = body || document.createElement('body');
if ( parseInt(nodes, 10) ) {
// In order not to give false positives we create a node for each test
// This also allows the method to scale for unspecified uses
while ( nodes-- ) {
node = document.createElement('div');
node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
div.appendChild(node);
}
}
// <style> elements in IE6-9 are considered 'NoScope' elements and
therefore will be removed
// when injected with innerHTML. To get around this you need to prepend
the 'NoScope' element
// with a 'scoped' element, in our case the soft-hyphen entity as it won't
mess with our measurements.
// msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx
// Documents served as xml will throw if using ­ so use xml friendly
encoded version. See issue #277
style = ['­','<style id="s', mod, '">', rule, '</style>'].join('');
div.id = mod;
// IE6 will false positive on some tests due to the style element inside
the test div somehow interfering offsetHeight, so insert it into body or
fakebody.
// Opera will act all quirky when injecting elements in documentElement
when page is served as xml, needs fakebody too. #270
(body ? div : fakeBody).innerHTML += style;
fakeBody.appendChild(div);
if ( !body ) {
//avoid crashing IE8, if background image is used
fakeBody.style.background = '';
//Safari 5.13/5.1.4 OSX stops loading if ::-webkit-scrollbar is used
and scrollbars are visible
fakeBody.style.overflow = 'hidden';
docOverflow = docElement.style.overflow;
docElement.style.overflow = 'hidden';
docElement.appendChild(fakeBody);
}
ret = callback(div, rule);
// If this is done after page load we don't want to remove the body so
check if body exists
if ( !body ) {
fakeBody.parentNode.removeChild(fakeBody);
docElement.style.overflow = docOverflow;
} else {
div.parentNode.removeChild(div);
}
return !!ret;
}
And I do get some of the parts where they say that older versions of IE do
not support some stuff and they add support for that and for Opera acting
quirky when injecting the styles.
I would just like to drop all support for old IE (I only need IE9 and up)
and remove some of the code from there, but I really cannot get the
comment I said at the beginning I don't, it doesn't make sense, is it just
for IE6 and 7 or is it for all browsers, because if it is just for those
versions of IE than a lot of code can go away.
Could someone explain briefly what is that comment about ?
No comments:
Post a Comment