3D transform detection script
A boolean variable to indicate browser support for 3D CSS transforms.
May be eaisly modified to test for other CSS properties.
var hasTransform3d = (function () {
var d = document,
el = d.createElement('p'),
property = "transform",
has3d = "none";
if (window.getComputedStyle) {
d.body.insertBefore(el, null);
if (el.style[property] !== undefined){
el.style[property] = 'translate3d(1px, 1px, 1px)';
has3d = window.getComputedStyle(el).getPropertyValue(property);
}
d.body.removeChild(el);
}
return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}());
May be used to mark the HTML
tag with a class.
var str = "noTransform3d";
if (hasTransform3d) {
str = "hasTransform3d";
}
document.documentElement.classList.add(str);
Google Closure Compiled
235 bytes gzipped (335 bytes uncompressed).
// hasTransform3d v1.0 21/02/2016
// 235 bytes gzipped (335 bytes uncompressed)
var hasTransform3d=(function(){var c=document,a=c.createElement("p"),b="none";window.getComputedStyle&&(c.body.insertBefore(a,null),void 0!==a.style.transform&&(a.style.transform="translate3d(1px, 1px, 1px)",b=window.getComputedStyle(a).getPropertyValue("transform")),c.body.removeChild(a));return void 0!==b&&0<b.length&&"none"!==b}());
Social links and email client: