mirror of
https://github.com/Modernizr/Modernizr.git
synced 2026-01-09 15:47:55 -05:00
5fee7c8dda
* fix(aspectratio): should only use CSS.supports when CSS is an object * chore: keep the same code style * Use feature test for css-supports detection * Cleanup more css supports usages * make sure to use window.CSS --------- Co-authored-by: veeck <gitkraken@veeck.de>
45 lines
1.4 KiB
JavaScript
Executable File
45 lines
1.4 KiB
JavaScript
Executable File
/*!
|
|
{
|
|
"name": "CSS Transform Style preserve-3d",
|
|
"property": "preserve3d",
|
|
"authors": ["denyskoch", "aFarkas"],
|
|
"tags": ["css"],
|
|
"notes": [{
|
|
"name": "MDN Docs",
|
|
"href": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style"
|
|
}, {
|
|
"name": "Related Github Issue",
|
|
"href": "https://github.com/Modernizr/Modernizr/issues/1748"
|
|
}]
|
|
}
|
|
!*/
|
|
/* DOC
|
|
Detects support for `transform-style: preserve-3d`, for getting a proper 3D perspective on elements.
|
|
*/
|
|
define(['Modernizr', 'createElement', 'docElement', 'test/css/supports'], function(Modernizr, createElement, docElement) {
|
|
Modernizr.addTest('preserve3d', function() {
|
|
var outerAnchor, innerAnchor;
|
|
var CSS = window.CSS;
|
|
var result = false;
|
|
|
|
if (Modernizr.supports && CSS.supports('(transform-style: preserve-3d)')) {
|
|
return true;
|
|
}
|
|
|
|
outerAnchor = createElement('a');
|
|
innerAnchor = createElement('a');
|
|
|
|
outerAnchor.style.cssText = 'display: block; transform-style: preserve-3d; transform-origin: right; transform: rotateY(40deg);';
|
|
innerAnchor.style.cssText = 'display: block; width: 9px; height: 1px; background: #000; transform-origin: right; transform: rotateY(40deg);';
|
|
|
|
outerAnchor.appendChild(innerAnchor);
|
|
docElement.appendChild(outerAnchor);
|
|
|
|
result = innerAnchor.getBoundingClientRect();
|
|
docElement.removeChild(outerAnchor);
|
|
|
|
result = result.width && result.width < 4;
|
|
return result;
|
|
});
|
|
});
|