:before and :after feature detection
Created by @laustdeleuran
Core method inspired by @westonruter.
by laustdeleuran
HTML
<script src="http://dev.ljd.dk/resources/modernizr.custom.43851.js"></script>
<div id="before-results"></div>
<div id="after-results"></div>
<ul id="credits" style="margin-top:1em; font-size:80%;">
<li>By <a href="http://ljd.dk">Laust Deleuran</a> - <a href="http://twitter.com/laustdeleuran">@laustdeleuran</a></li>
<li>Core method inspired by <a href="http://jsfiddle.net/westonruter/eAVp2/">Weston Ruter</a></li>
</ul>
JavaScript
// :before pseudo selector test.
// By @laustdeleuran
// Please see http://reference.sitepoint.com/css/pseudoelement-before for inconsistencies
Modernizr.addTest('before', function () {
var hasBefore,
rules = ['#modernizr-before{visibility:hidden;}'],
head = document.getElementsByTagName('head')[0] || (function () {
return document.documentElement.appendChild(document.createElement('head'));
}()),
root = document.body || (function () {
return document.documentElement.appendChild(document.createElement('body'));
}()),
before = document.createElement('div'),
style = document.createElement('style');
style.type = "text/css";
if(style.styleSheet){ style.styleSheet.cssText = rules.join(''); }
else {style.appendChild(document.createTextNode(rules.join(''))); }
head.appendChild(style);
before.id = "modernizr-before";
root.appendChild(before);
alert(before.offsetHeight);
hasBefore = before.offsetHeight > 0,
head.removeChild(style);
root.removeChild(before);
return hasBefore;
});
// :after pseudo selector test.
// By @laustdeleuran
// Please see http://reference.sitepoint.com/css/pseudoelement-after for inconsistencies
Modernizr.addTest('after', function () {
var hasAfter,
rules = ['#modernizr-after{visibility:hidden;}','#modernizr-after:after{content:"modernizr-after"}'],
head = document.getElementsByTagName('head')[0] || (function () {
return document.documentElement.appendChild(document.createElement('head'));
}()),
root = document.body || (function () {
return document.documentElement.appendChild(document.createElement('body'));
}()),
after= document.createElement('div'),
style = document.createElement('style');
style.type = "text/css";
if(style.styleSheet){ style.styleSheet.cssText = rules.join(''); }
else...