Skip to content

Instantly share code, notes, and snippets.

@stereobooster
Created November 19, 2011 21:55
Show Gist options
  • Save stereobooster/1379417 to your computer and use it in GitHub Desktop.
Save stereobooster/1379417 to your computer and use it in GitHub Desktop.
Modernizr
// This test is ascynchronous. Watch out.
(function(){
var datauri = new Image,
ctx = document.createElement("canvas").getContext("2d");
datauri.onerror = function() {
Modernizr.addTest('apng', function () { return false; });
};
datauri.onload = function() {
ctx.drawImage(datauri, 0, 0);
var apng_supported = ctx.getImageData(0, 0, 1, 1).data[3] === 0;
Modernizr.addTest('apng', function () { return apng_supported; });
};
datauri.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==";
// frame 1 (skipped on apng-supporting browsers): [0, 0, 0, 255]
// frame 2: [0, 0, 0, 0]
})();
Modernizr.addTest('backgroundclip', function(){
var div = document.createElement('div');
if ('backgroundClip' in div.style){
div.style.backgroundClip = 'text';
return div.style.backgroundClip == 'text'
}
'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
if (val+'BackgroundClip' in div.style) {
div.style[val+'BackgroundClip'] = 'text';
return div.style[val+'BackgroundClip'] == 'text'
}
});
return false;
});
// Works only with Modernizr 1.8pre+
Modernizr.addTest('cssscrollbar', function() {
// Tested Element
var test = document.createElement('div'),
// Fake body
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}()),
property = 'scrollbar{width:0px;}';
// Force scrollbar
test.id = '__sb';
test.style.overflow = 'scroll';
test.style.width = '40px';
// Apply scrollbar style for all vendors
test.innerHTML = '&shy;<style>#'+Modernizr._prefixes.join(property+' #__sb::').split('#').slice(1).join('#')+property+'</style>';
root.appendChild(test);
// If css scrollbar is supported, than the scrollWidth should not be impacted
var ret = test.scrollWidth == 40;
// Cleaning
document.body.removeChild(test);
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
Modernizr.addTest('dataset', function() {
var n = document.createElement("div");
n.setAttribute("data-a-b", "c");
return !!(n.dataset && n.dataset.aB == "c");
}
Modernizr.addTest('fontsmoothing', function(){
// IE has screen.fontSmoothingEnabled - sweet!
if (screen.fontSmoothingEnabled !== undefined) {
return screen.fontSmoothingEnabled;
} else {
try {
// Create a 35x35 Canvas block.
var canvasNode = document.createElement('canvas'), ctx, j, i,
imageData, alpha;
canvasNode.width = '35';
canvasNode.height = '35';
// We must put this node into the body, otherwise
// Safari Windows does not report correctly.
canvasNode.style.display = 'none';
document.body.appendChild(canvasNode);
ctx = canvasNode.getContext('2d');
// draw a black letter 'O', 32px Arial.
ctx.textBaseline = 'top';
ctx.font = '32px Arial';
ctx.fillStyle = 'black';
ctx.strokeStyle = 'black';
ctx.fillText('O', 0, 0);
// start at (8,1) and search the canvas from left to right,
// top to bottom to see if we can find a non-black pixel. If
// so we return true.
for (j = 8; j <= 32; j++) {
for (i = 1; i <= 32; i++) {
imageData = ctx.getImageData(i, j, 1, 1).data;
alpha = imageData[3];
if (alpha != 255 && alpha != 0) {
return true; // font-smoothing must be on.
}
}
}
// didn't find any non-black pixels - return false.
return false;
}
catch (ex) {
// Something went wrong (for example, Opera cannot use the
// canvas fillText() method. Return null (unknown).
return null;
}
}
}
Modernizr.addTest('ie8compat',function(){
return !window.addEventListener && document.documentMode && document.documentMode == 7;
});
// feature test for position fixed.
Modernizr.addTest('positionfixed', function () {
var test = document.createElement('div'),
control = test.cloneNode(false),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
var oldCssText = root.style.cssText;
root.style.cssText = 'padding:0;margin:0';
test.style.cssText = 'position:fixed;top:42px';
root.appendChild(test);
root.appendChild(control);
var ret = test.offsetTop !== control.offsetTop;
root.removeChild(test);
root.removeChild(control);
root.style.cssText = oldCssText;
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
(function() {
var displayTests = ["table", "table-caption", "table-cell",
"table-column", "table-column-group", "table-footer-group",
"table-header-group", "table-row", "table-row-group"];
var rules = document.createElement("div").style;
for (var c=0; c<displayTests.length; c++) {
var testValue = displayTests[c];
Modernizr.addTest("display" + testValue, function() {
try {
rules.display = testValue;
return rules.display == testValue;
} catch (e) {
return false;
}
})
}
}());
//test if IE userdata supported
Modernizr.addTest('userdata', function(){
return !!(document.createElement('div')).addBehavior;
});
// Apple decided to not give control of <audio> & <video> volume...
Modernizr.addTest('volumecontrol', function() {
// Tested Element
var test = document.createElement('audio');
test.volume = 0.5;
return Modernizr.audio && test.volume === 0.5;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment