如何使用 JavaScript 检查浏览器是否支持 CSS 属性?
如今，一些 CSS 属性已被弃用，有些浏览器不支持它们。因此，有时我们需要检查浏览器是否支持 CSS 属性，并需要相应地使用它来设置元素的样式。
但是，我们可以使用 CSS 的"supports"规则来做到这一点，但在这里我们将看到使用 JavaScript 检查浏览器是否支持 CSS 属性的不同方法。
使用 CSS.supports() 方法检查浏览器是否支持 CSS 属性
我们可以使用 JavaScript 中的CSS.supports() 方法来检查浏览器是否支持特定的 CSS 属性。
语法
用户可以按照以下语法使用 CSS.supports() 方法检查 Web 浏览器是否支持 CSS 属性。
let isSupported = CSS.supports(CSS_Property_name, CSS_property_value); let isSupported = CSS.supports(CSS_condition);
在上述语法中，我们编写了 supports() 方法的两种不同语法，这两种语法都可以使用。
参数
CSS_property_name − 它是 CSS 的属性名称，例如 display、height、width 等。
CSS_property_value − 它是 CSS_property_name 属性的值。
CSS_condition − 我们可以将整个 CSS 条件作为参数传递，如"width: 1vh"，而不是将 width 和 1vh 作为单独的参数传递。
示例
在下面的示例中，我们使用了 CSS.supports() 方法来检查浏览器是否支持 CSS 属性。我们创建了 isPropertySupported() 函数，该函数调用 CSS.supports () 方法并根据属性是否受支持在 Web 浏览器上显示不同的 HTML。
<html>
<body>
<h3>Using the<i> supports() method </i> to check whether CSS property is supported by the browser or not. </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
function isPropertySupported(property, value) {
// 使用 CSS.supports() 方法
let isSupported = CSS.supports(property, value);
if (isSupported) {
output.innerHTML += "The " + property + " CSS property and " + value + " is supported by the current browser! <br/>";
} else {
output.innerHTML += "The " + property + " CSS property and " + value + " is not supported by the current browser! <br/>";
}
}
isPropertySupported("height", "10me");
isPropertySupported("display", "flex");
</script>
</body>
</html>
在上面的输出中，用户可以观察到 support 方法对属性 display 和值 flex 返回 true，对属性 margin 和值 10me 返回 false。但是，每个浏览器都支持 margin 属性，但我们分配了一个单位错误的值"me"，这是不支持的。
示例
在下面的示例中，当用户单击"检查有效的 CSS 属性"按钮时，它会调用 validateCSS() 函数两次，并将不同的 CSS 条件作为参数传递。
在此示例中，我们已将 CSS 条件作为 CSS.supports() 方法的参数传递，该方法根据浏览器中有效的 CSS 属性返回布尔值。
<html>
<body>
<h3>Using the <i> supports() method </i> with condition parameter to check whether CSS the browser supports property or not. </h3>
<div id = "output"> </div><br>
<button onClick = "validateCSS('flex-direction: row'); validateCSS('margin: 10tr')"> Check for Valid CSS property </button>
<script>
let output = document.getElementById("output");
function validateCSS(condition) {
// 使用 CSS.supports() 方法
if (CSS.supports(condition)) {
output.innerHTML += "The " + condition + " CSS condition" + " is supported by the current browser! <br/>";
} else {
output.innerHTML += "The " + condition + " CSS condition" + " is not supported by the current browser! <br/>";
}
}
</script>
</body>
</html>
在上面的输出中，用户可以观察到浏览器支持'flex-direction: row'，但不支持'margin: 10tr'。
在 JavaScript 中创建自定义算法来检查浏览器是否支持 CSS 属性
我们可以通过自定义逻辑在 JavaScript 中创建自定义算法来检查浏览器是否支持 CSS 属性。 我们可以简单地创建一个 HTML 元素，尝试为特定属性分配一个值，并检查属性是否由值初始化。
语法
用户可以按照以下语法使用自定义算法。
var dummyElement = document.createElement("div");
dummyElement.style[property] = value;
if (dummyElement.style[property] === value) {
// 支持 CSS 属性
} else {
// 支持 CSS 属性
}
在上述语法中，我们使用 createElement() 方法在文档中创建虚拟 HTML 元素。
步骤
步骤 1 - 使用 document.createElement() 方法并创建任何虚拟 HTML 元素。
步骤 2 - 访问虚拟元素的 style 属性。style 属性是一个包含 CSS 属性及其值(作为键值对)的对象。尝试将新的键值对添加到 style 对象。
步骤 3 - 如果 CSS 属性有效，我们可以成功将其添加到 style 对象。现在，尝试使用 style 对象中的属性作为键来访问 CSS 属性的值，并将其与实际值进行比较。
步骤 4 - 如果实际值和我们从样式对象获取的值相同，则浏览器支持 CSS 属性及其值。
示例
下面的示例使用自定义逻辑并实现给定的步骤来检查浏览器是否支持 CSS 属性及其赋值器。
<html>
<body>
<h3>Using the <i> custom algorithm </i> to check whether the CSS property is supported by the browser or not.</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function isValidCSSProperty(property, value) {
var dummyElement = document.createElement("div");
dummyElement.style[property] = value;
if (dummyElement.style[property] === value) {
output.innerHTML += "The " + property + " CSS property and " + value + " value is supported by the browser! <br/>";
} else {
output.innerHTML += "The " + property + " CSS property and " + value + " value is not supported by the browser! </br>";
}
}
isValidCSSProperty("flex-direction", "height");
isValidCSSProperty("flex-direction", "row");
</script>
</body>
</html>
用户可以使用 supports() 方法编写一行代码来检查浏览器是否支持 CSS 属性。
