- Canvas†
- rgba()
- hsla()
- border-image:
- border-radius:
- box-shadow:
- Multiple backgrounds
- opacity:
- CSS Animations
- CSS Columns†
- CSS Gradients
- CSS Reflections
- CSS Transforms
- CSS Transitions
var Modernizr = (function(){
var tests = {
canvas: true,
rgba: true,
hsla: true,
multiplebgs: true,
borderimage: true,
borderradius: true,
boxshadow: true,
opacity: true,
cssanimations: true,
csscolumns: true,
cssgradients: true,
cssreflections: true,
csstransforms: true,
csstransitions: true
};
var passed = {};
var groups = {
canvas: ["canvas"],
rgba: ["rgba"],
hsla: ["hsla"],
multiplebgs: ["multiplebgs"],
borderimage: ["borderimage"],
borderradius: ["borderradius"],
boxshadow: ["boxshadow"],
opacity: ["opacity"],
cssanimations: ["cssanimations"],
csscolumns: ["csscolumns"],
cssgradients: ["cssgradients"],
cssreflections: ["cssreflections"],
csstransforms: ["csstransforms"],
csstransitions: ["csstransitions"]
};
var enablehtml5 = true;
var enableNoClasses = true;
var m = document.createElement("modernizr");
var detectFeature = function(feat){
var supported = false, prop, i, tmp;
switch (feat) {
case "canvas":
supported = !!document.createElement("canvas").getContext;
break;
case "rgba":
m.style.cssText = "background-color: rgba(150,255,150, .5)";
supported = !!(m.style.backgroundColor.indexOf("rgba") !== -1);
break;
case "hsla":
m.style.cssText = "background-color: hsla(120,40%,100%, .5)";
supported = !!(m.style.backgroundColor.indexOf("rgba") !== -1);
break;
case "multiplebgs":
m.style.cssText = "background: url(m.png), url(a.png), #f99 url(m.png);";
tmp = m.style.background;
i = 0;
while (tmp.indexOf("url(") !== -1) {
i++;
tmp = tmp.substring(0, tmp.indexOf("url(")) + tmp.substring(tmp.indexOf("url(") + 4)
}
supported = !!(i === 3);
tmp = i = null;
break;
case "borderimage":
prop = ["borderImage", "webkitBorderImage", "MozBorderImage", "mozBorderImage", "oBorderImage", "msBorderImage"];
m.style.cssText = "border-image: url(m.png) 1 1 stretch; -webkit-border-image: url(m.png) 1 1 stretch; -moz-border-image: url(m.png) 1 1 stretch; -o-border-image: url(m.png) 1 1 stretch; -ms-border-image: url(m.png) 1 1 stretch;";
for (i in prop) {
if (m.style[prop[i]] !== undefined) {
supported = true;
break
}
}
break;
case "borderradius":
prop = ["borderTopRightRadius", "webkitBorderTopRightRadius", "MozBorderTopRightRadius", "mozBorderTopRightRadius", "oBorderTopRightRadius", "msBorderTopRightRadius"];
m.style.cssText = "border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -ms-border-top-right-radius: 10px;";
for (i in prop) {
if (m.style[prop[i]] !== undefined && prop[i].indexOf("orderTopRight") !== -1) {
supported = true;
break
}
}
break;
case "boxshadow":
prop = ["boxShadow", "webkitBoxShadow", "MozBoxShadow", "mozBoxShadow", "oBoxShadow", "msBoxShadow"];
m.style.cssText = "box-shadow: #000 1px 1px 3px; -webkit-box-shadow: #000 1px 1px 3px; -moz-box-shadow: #000 1px 1px 3px; -obox-shadow: #000 1px 1px 3px; -ms-box-shadow: #000 1px 1px 3px;";
for (i in prop) {
if (m.style[prop[i]] !== undefined) {
supported = true;
break
}
}
break;
case "opacity":
m.style.cssText = "opacity: .5;";
supported = !!(m.style.opacity.indexOf("0.5") !== -1);
break;
case "cssanimations":
prop = ["animationName", "webkitAnimationName", "MozAnimationName", "mozAnimationName", "oAnimationName", "msAnimationName"];
m.style.cssText = "animation: 'animate' 2s ease 2; -webkit-animation: 'animate' 2s ease 2; -moz-animation: 'animate' 2s ease 2; -o-animation: 'animate' 2s ease 2; -ms-animation: 'animate' 2s ease 2; position:relative;";
for (i in prop) {
if (m.style[prop[i]] !== undefined) {
supported = true;
break
}
}
break;
case "csscolumns":
prop = ["columnCount", "webkitColumnCount", "MozColumnCount", "mozColumnCount", "oColumnCount", "msColumnCount"];
m.style.cssText = "column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -ms-column-count: 3;";
for (i in prop) {
if (m.style[prop[i]] !== undefined) {
supported = true;
break
}
}
break;
case "cssgradients":
m.style.cssText = "background-image: gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -webkit-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -moz-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -o-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -ms-gradient(linear, left top, right bottom, from(#9f9), to(white));";
supported = !!(m.style.backgroundImage.indexOf("gradient") !== -1);
break;
case "cssreflections":
prop = ["boxReflect", "webkitBoxReflect", "MozBoxReflect", "mozBoxReflect", "oBoxReflect", "msBoxReflect"];
m.style.cssText = "box-reflect: right 1px; -webkit-box-reflect: right 1px; -moz-box-reflect: right 1px; -o-box-reflect: right 1px; -ms-box-reflect: right 1px;";
for (i in prop) {
if (m.style[prop[i]] !== undefined) {
supported = true;
break
}
}
break;
case "csstransforms":
prop = ["transformProperty", "webkitTransform", "MozTransform", "mozTransform", "oTransform", "msTransform"];
m.style.cssText = "transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg);";
for (i in prop) {
if (m.style[prop[i]] !== undefined) {
supported = true;
break
}
}
break;
case "csstransitions":
prop = ["transitionProperty", "webkitTransitionProperty", "MozTransitionProperty", "mozTransitionProperty", "oTransitionProperty", "msTransitionProperty"];
m.style.cssText = "transition: all .5s linear; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; -ms-transition: all .5s linear;";
for (i in prop) {
if (m.style[prop[i]] !== undefined) {
supported = true;
break
}
}
break;
default:
supported = false
}
m.style.cssText = "";
tmp = i = prop = null;
return supported
};
function init(){
if (enablehtml5 &&
!(! /*@cc_on!@*/
0)) {
var e = "abbr article aside audio bb canvas datagrid datalist details dialog figure footer header mark menu meter nav output progress section time video".split(" "), i = e.length;
var n;
while (i--) {
n = document.createElement(e[i])
}
n = null
}
for (var feat in tests) {
if (tests[feat]) {
passed[feat] = detectFeature(feat)
}
}
var passedgroup, len;
var classes = [];
for (var group in groups) {
passedgroup = true;
for (i = 0, len = groups[group].length; i < len; i++) {
feat = groups[group][i];
if (!passed[feat]) {
passedgroup = false;
if (!enableNoClasses) {
break
}
}
}
if (passedgroup) {
classes.push(group)
}
else {
if (enableNoClasses) {
classes.push("no-" + group)
}
}
}
passed._enablehtml5 = enablehtml5;
passed._enableNoClasses = enableNoClasses;
document.getElementsByTagName("body")[0].className += " " + classes.join(" ");
classes = null;
return passed
}
return init()
})();