关闭Javascript时处理功能检测_Javascript_Css_Modernizr_Feature Detection

关闭Javascript时处理功能检测

javascript css

关闭Javascript时处理功能检测,javascript,css,modernizr,feature-detection,Javascript,Css,Modernizr,Feature Detection,功能检测对于确保您的网站与所有浏览器兼容非常重要。我认为，如果我们考虑的是功能较少的旧浏览器和用户代理，那么我们也要考虑那些关闭javascript的浏览器和用户代理，这一点非常重要。这是我的问题（在以下所有例子中，我都在使用Modernizer）：假设我们有一块css来检测渐变何时可用： .cssgradients .div-that-needs-gradient { background: -webkit-linear-gradient(red, yellow); back

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

假设我们有一块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');
}

这段代码的工作原理是，类似Modernizer的库检测渐变何时可用，而不是将

cssgradients

或

no-cssgradients

类放在html元素上。如果关闭javascript会发生什么？现在，这两个css规则集都没有激活。用户现在被一个难看的空白背景困住了。你们认为最好的方法是什么

谢谢你的帮助

解决方案

针对您的具体情况：

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

理解两者的现代浏览器将首先应用

url

，然后用

线性渐变覆盖它。较旧的浏览器只会应用url
，而忽略线性渐变。请记住，在CSS中，规则集中的最后一个声明的优先级高于之前的声明
<>但是，也要考虑一下：
而不是建立一个伟大的经验作为默认，然后希望
它会退化为在能力较弱的环境中仍然可用的东西
浏览器，您可以构建在所有浏览器中都可以使用的基本体验，以及
然后在上面再加上一层增强的体验
从
或者，您可以针对特定的浏览器而不是功能：
<!--[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从
中删除“no-js” 使用在任何浏览器中看起来至少正常的默认值。我认为您不再需要所有这些供应商前缀。请参阅。@jfriend00如果您进行渐进式增强，您不会牺牲任何东西。您完全忽略了为极少数用户进行特殊开发和测试的机会成本，并强制您的体系结构一定会的。在我看来，这段开发时间可以更好地用于为99%的用户开发特性。请记住，这几乎是一个零和游戏，任何花费在支持一个没有JS的用户上的时间/资源都会从其他所有人的其他功能上消耗掉。此外，即使没有JS的功能站点也排除了90%的体系结构，您可能会发现这是最有利的。无JS用户的渐进式增强将您锁定在特定类型的体系结构中，并花费您大量的开发时间和测试。当所有主要功能都必须在没有JS的情况下工作时，我不想成为一名网站设计师。这将严重损害99%的设计。在我的书中，这不是一个合适的商业交易。如果你想的话，欢迎你发表不同的意见，但是你必须明白，制作一个没有任何JS的网站的全功能版本到底要花多少钱，然后试着为那些有JS的人制作一个很棒的网站。不容易也不快。我理解你的意思，但这是一个问题，因为图像将加载而不是被覆盖，所以你在刚刚被覆盖的图像上添加额外的加载时间。@Dastur一个水平重复的线性渐变图像，具有90度角和1px宽度，通常大约1KB。Modernizer的重量为45 kB。也许你应该优先考虑那些能让你赚更多钱的工具。谢谢，最后一个肯定是我想要的，如果你看看上面的评论，我肯定已经在考虑逐步增强了
<!--[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]-->