/*
Preliminary tested successfully in
IE7, Win
IE8, Win
IE9, Win
Chrome 7, Win
Chrome 15, Win
Opera 11.52, Win
Safari 5, Win
FireFox 6, Win
FireFox 3.6, Win
ISSUE: Gives false negative in Safari 3.1, Win. Following code fixes that issue:
var rules = ['#modernizr:before{content:"modernizr-before"}','#modernizr:after{content:"modernizr-after"}'],
head = document.getElementsByTagName('head')[0],
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);
I thinks Safari wants the <style> block to be in the head - and that Modernizr inserts it into the body.
*/
// :before pseudo selector test.
// By @laustdeleuran
// Please see http://reference.sitepoint.com/css/pseudoelement-before for inconsistencies
Modernizr.addTest('before', function () {
return Modernizr.testStyles('#modernizr {visibility:hidden;} #modernizr:before{content:"modernizr-before"}', function(elem) {
return elem.offsetHeight > 0;
});
});
// :after pseudo selector test.
// By @laustdeleuran
// Please see http://reference.sitepoint.com/css/pseudoelement-after for inconsistencies
Modernizr.addTest('after', function () {
return Modernizr.testStyles('#modernizr {visibility:hidden;} #modernizr:after{content:"modernizr-after"}', function(elem) {
return elem.offsetHeight > 0;
});
});
// Output result
document.getElementById("before-results").innerHTML = Modernizr.before ? "Yes! I support the :before pseudo element." : "No - so sorry, but I have no clue what the :before pseudo element is.";
document.getElementById("before-results").style.color = Modernizr.before ? "green" : "red";
document.getElementById("after-results").innerHTML = Modernizr.after ? "Yes! I support the :after pseudo element." : "No - so sorry, but I have no clue...
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.