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

而不是浏览器检测，使用功能检测，像Modernizr这样的JavaScript插件可以非常巧妙地完成这项工作。

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

Answer 3

当您尝试应用浏览器无法识别的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 4

Modernizr是你的朋友......

CSS浏览器检测径向渐变？

4 个答案: