CSS 浏览器检测径向渐变？

Question

我使用径向渐变作为网站的背景。它在 Safari、Chrome 和 Firefox 3.5+ 上运行良好，但在 Opera 和 Internet Explorer 上有问题。因此，我制作了一个背景图像以在这些浏览器上显示以提供相同的外观。现在，我正在从用户代理检测服务器端的浏览器和版本，然后包含正确的 CSS 文件。然而，我觉得一定有一种更好的方法，而不是维护两个单独的 CSS 文件来完成本质上相同的事情（CSS 文件之间的唯一区别是 html 和 body）。

对于好的浏览器：

html, body {
    width: 100%;
    height: 100%;
}
html {
    background-image: -ms-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: -moz-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: -o-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 480, color-stop(0, #23395D), color-stop(0.6, #122037), color-stop(1, #0A131F));
    background-image: -webkit-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    background-image: radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
    -moz-box-shadow:inset 0 0 100px #080f1a;
    -webkit-box-shadow:inset 0 0 100px #080f1a;
    box-shadow:inset 0 0 100px #080f1a;
    background-attachment: fixed;
}
body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
    background: url(/images/portal/checkered_bg.png) repeat;
}

对于不好的浏览器：

html, body {
    width: 100%;
    height: 100%;
}
body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
    background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}

Answer 1

听起来像是 Modernizr 的工作。

Modernizr 是一个小型 JavaScript 库，用于检测下一代 Web 技术的本机实现的可用性，即源自 HTML5 和 CSS3 规范的功能。其中许多功能已经在至少一种主要浏览器中实现（大多数在两种或更多浏览器中实现），Modernizr 所做的就是非常简单地告诉您当前浏览器是否原生实现了此功能。

Answer 2

当您尝试应用浏览器无法识别的 css 时，它只会报告任何内容，因此如果您这样做...

//ommiting document ready for brevity
if ($("html").css("background-image").indexOf("radial") < 0) {
  $("html").addClass("no-radial")
}

那么您可以覆盖 CSS 中的类：

.no-radial body {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    text-decoration: none;
    background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}

Answer 3

不要使用浏览器检测，而是使用功能检测，这是一个 JavaScript 插件，例如 Modernizr > 会非常整齐地完成这项工作。

它将类名添加到根元素中，以便您可以像在 css 中一样检查它。

Answer 4

Modernizr 是你的朋友...