Question

功能检测对于确保您的网站与所有浏览器兼容非常重要。我认为，如果我们考虑较旧的浏览器和功能较少的用户代理，那么我们也会考虑关闭javascript的用户。这是我的问题（在以下所有示例中，我使用的是modernizr）：

假设我们有一块css可以检测到渐变的可用时间：

.cssgradients .div-that-needs-gradient {
    background: -webkit-linear-gradient(red, yellow);
    background: -o-linear-gradient(red, yellow);
    background: -moz-linear-gradient(red, yellow);
    background: linear-gradient(red, yellow);
}

.no-cssgradients .div-that-needs-gradient {
    background-image: url('http://example.com/gradient-image.png');
}

此代码的工作原理是像modernizr这样的库检测何时可用渐变，而不是html元素上的cssgradients或no-cssgradients类。如果关闭javascript会发生什么？现在这些css规则集都没有激活。用户现在陷入了丑陋的空白背景。你们会说什么是解决这个问题的最好方法？

感谢您的帮助！

解决方案

.no-js .div-that-needs-gradient {
    background: orange
    background: -webkit-linear-gradient(red, yellow);
    background: -o-linear-gradient(red, yellow);
    background: -moz-linear-gradient(red, yellow);
    background: linear-gradient(red, yellow);
}

.cssgradients .div-that-needs-gradient {
    background: -webkit-linear-gradient(red, yellow);
    background: -o-linear-gradient(red, yellow);
    background: -moz-linear-gradient(red, yellow);
    background: linear-gradient(red, yellow);
}

.no-cssgradients .div-that-needs-gradient {
    background-image: url('http://example.com/gradient-image.png');
}

Answer 1

针对您的具体情况：

.div-that-needs-gradient {
    background-image: url('http://example.com/gradient-image.png');
    background-image: linear-gradient(red, yellow);
}

了解两者的现代浏览器将首先应用url，然后使用linear-gradient覆盖它。较旧的浏览器只会应用url而忽略linear-gradient。请记住，在CSS中，规则集中的最后一个声明优先于之前的声明。

但是，也要考虑这个：

而不是建立一个伟大的经验作为默认然后希望它会降级为能力较弱的东西浏览器，您可以构建适用于所有浏览器的基本体验，以及然后在此基础上增加经验。

来自here。

或者，as suggested by Paul Irish，您可以定位特定的浏览器而不是功能：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->

然后，使用javascript从<html>删除“no-js”。

Javascript关闭时处理功能检测

解决方案

1 个答案: