Javascript 关闭时处理特征检测

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 这样的库检测渐变何时可用，而不是将 cssgradients 或 no-cssgradients class 放在 html 元素上。如果 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 中，规则集中最后的声明优先于之前的声明。

但是，还要考虑一下：

Instead of building a great experience as the default and then hoping it degrades to something that is still usable in less capable browsers, you build a basic experience that works in all browsers, and then layer an enhanced experience on top of that.

来自 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 关闭时处理特征检测

Handling Feature Detection When Javascript Is Turned Off

javascript

css

feature-detection

modernizr

解决方案