fix(aspectratio): should use CSS.supports only when CSS is an object, isn't it? (#2776)

* 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>
This commit is contained in:
HelKyle
2025-07-24 20:18:46 +08:00
committed by GitHub
parent deed0ed0ff
commit 5fee7c8dda
3 changed files with 18 additions and 17 deletions

View File

@@ -16,21 +16,22 @@
Detect working status of all aspectratio css property
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
*/
define(['Modernizr', 'createElement'], function (Modernizr, createElement) {
define(['Modernizr', 'createElement', 'test/css/supports'], function (Modernizr, createElement) {
Modernizr.addTest("aspectratio", function () {
if (typeof CSS !== "object" && typeof CSS.supports === "function") {
return CSS.supports('aspect-ratio', '1 / 1')
var CSS = window.CSS;
if (Modernizr.supports && CSS.supports('aspect-ratio', '1 / 1')) {
return true;
}
var element = createElement('p'),
elStyle = element.style
if ('aspectRatio' in elStyle) {
elStyle.cssText = 'aspect-ratio:1 / 1'
element.remove()
return (elStyle['aspectRatio'] === '1 / 1');
} else {
var element = createElement('p'),
elStyle = element.style
if ('aspectRatio' in elStyle) {
elStyle.cssText = 'aspect-ratio:1 / 1'
element.remove()
return (elStyle['aspectRatio'] === '1 / 1');
} else {
element.remove();
return false;
}
element.remove();
return false;
}
});
});
});

View File

@@ -9,7 +9,7 @@
]
}
!*/
define(['Modernizr', 'testAllProps', 'test/css/supports'], function(Modernizr, testAllProps) {
define(['Modernizr', 'testAllProps'], function(Modernizr, testAllProps) {
Modernizr.addTest('csstransforms3d', function() {
return !!testAllProps('perspective', '1px', true);
});

View File

@@ -16,13 +16,13 @@
/* DOC
Detects support for `transform-style: preserve-3d`, for getting a proper 3D perspective on elements.
*/
define(['Modernizr', 'createElement', 'docElement'], function(Modernizr, createElement, docElement) {
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 (CSS && CSS.supports && CSS.supports('(transform-style: preserve-3d)')) {
if (Modernizr.supports && CSS.supports('(transform-style: preserve-3d)')) {
return true;
}