Skip to content

Instantly share code, notes, and snippets.

@kinglozzer
Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kinglozzer/c5b6797389257e154c23 to your computer and use it in GitHub Desktop.
Save kinglozzer/c5b6797389257e154c23 to your computer and use it in GitHub Desktop.
JavaScript 3d transform CSS feature detection
// Adds the class 'csstransforms3d' if the browser supports 3d transforms
// Stripped down version of Modernizr's detection: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/transforms3d.js
// Assumes the script is always being run in the <head> - will create a body element. Should work outside the head, but is untested
(function(document) {
var docElem = document.documentElement,
div = document.createElement('div'),
body = document.createElement('body');
ret = false,
properties = 'p# p#Property WebkitP# MozP# OP# msP#'.replace(/[#]/g, 'erspective').split(' ');
for(var i = properties.length - 1; i >= 0; i--){
ret = ret ? ret : div.style[properties[i]] != undefined;
};
// webkit may have 3d transforms disabled for chrome, despite recongising the syntax, so we actually have to check it's working
if(ret && 'webkitPerspective' in docElem.style) {
body.innerHTML += '<style>@media (transform-3d),(-webkit-transform-3d){*{height:3px}}</style>';
body.appendChild(div);
docElem.appendChild(body);
ret = div.offsetHeight === 3;
docElem.removeChild(body);
}
if(ret) {
docElem.className += ' csstransforms3d';
}
})(document);
(function(a){var b=a.documentElement,c=a.createElement("div");a=a.createElement("body");ret=!1;properties="p# p#Property WebkitP# MozP# OP# msP#".replace(/[#]/g,"erspective").split(" ");for(var d=properties.length-1;0<=d;d--)ret=ret?ret:void 0!=c.style[properties[d]];ret&&"webkitPerspective"in b.style&&(a.innerHTML+="<style>@media (transform-3d),(-webkit-transform-3d){*{height:3px}}</style>",a.appendChild(c),b.appendChild(a),ret=3===c.offsetHeight,b.removeChild(a));ret&&(b.className+=" csstransforms3d")})(document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment