如果你需要在你的网站中用到一些 CSS 属性，你肯定会想要确保你的用户使用的是支持这些属性的浏览器。
但是，如何在你的 JavaScript 代码中检查浏览器是否支持特定的 CSS 属性呢？
下面将介绍几种方法来检查 CSS 属性和值是否被浏览器所支持。
方法一：使用 Modernizr 库
Modernizr 是一个 JavaScript 库，用于检测浏览器是否支持 HTML5 和 CSS3 的功能。
使用 Modernizr 来检查浏览器是否支持特定的 CSS 属性非常简单。只需按照以下步骤操作即可。
首先，在 HTML 文件中引入 Modernizr 库的 JavaScript 文件。
<script src="path/to/modernizr.js"></script> 然后，在你的 JavaScript 代码中使用以下语法来检查浏览器是否支持特定的 CSS 属性。
if (Modernizr.cssprops.propertyName) {
// 浏览器支持该属性
} else {
// 浏览器不支持该属性
}
其中，propertyName 表示你要检查的 CSS 属性名。如果浏览器支持该属性，则该代码块将被执行；否则，else 代码块将被执行。
方法二：使用 CSS 属性检测器
如果你不想依赖外部库，也可以通过编写自己的 JavaScript 代码来检查浏览器是否支持特定的 CSS 属性。
以下是一个示例代码：
function isCssPropertySupported(property) {
var elm = document.createElement('div');
property = property.toLowerCase();
if (elm.style[property] != undefined)
return true;
var prefixes = ['webkit', 'Moz', 'ms', 'O'];
for (var i = 0; i < prefixes.length; i++) {
if (elm.style[prefixes[i] + property.capitalize()] != undefined)
return true;
}
return false;
}
String.prototype.capitalize = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
};
这段代码首先创建一个元素，然后设置该元素的样式属性，并检查该属性是否被支持。如果浏览器支持该属性，则返回 true；否则，代码将继续检查其他浏览器厂商的前缀（如 -webkit、-moz、-ms 和 -o），以确保该属性是否被支持。如果该属性在任意一个前缀下被支持，则返回 true；否则，返回 false。
你可以通过以下代码来使用该函数：
if (isCssPropertySupported('propertyName')) {
// 浏览器支持该属性
} else {
// 浏览器不支持该属性
}
其中，propertyName 表示你要检查的 CSS 属性名。
方法三：使用特定浏览器的检测
如果你知道你的网站主要在特定的浏览器上运行，你可以通过检查特定浏览器是否支持特定的 CSS 属性来确保该属性是否被支持。
以下是一些要在特定浏览器上检查的示例代码：
检查 Chrome 是否支持特定的 CSS 属性：
if ('WebkitAppearance' in document.documentElement.style) {
// 该属性在 Chrome 中被支持
} else {
// 该属性在 Chrome 中不被支持
}
检查 Firefox 是否支持特定的 CSS 属性：
if ('MozAppearance' in document.documentElement.style) {
// 该属性在 Firefox 中被支持
} else {
// 该属性在 Firefox 中不被支持
}
检查 Safari 是否支持特定的 CSS 属性：
if ('WebkitOverflowScrolling' in document.documentElement.style) {
// 该属性在 Safari 中被支持
} else {
// 该属性在 Safari 中不被支持
}
检查 Opera 是否支持特定的 CSS 属性：
if ('OTransition' in document.documentElement.style) {
// 该属性在 Opera 中被支持
} else {
// 该属性在 Opera 中不被支持
}
总结
本文介绍了几种检查浏览器是否支持特定 CSS 属性的方法。你可以使用 Modernizr 库、自己编写 JavaScript 代码或仅检查特定浏览器，以确保你的用户可以正常使用您网站中的功能。
但是，需要指出的是，并不能保证这些方法都是完美的。有些浏览器可能会在某些情况下支持特定的 CSS 属性，而在其他情况下则不支持。最好的方法是始终进行充分的测试，并确保您的网站在所有主流浏览器中都正常运行。