logo标签列表

当Javascript被禁用时如何编写CSS回退。

javascriptcssprogressive-enhancement
4

以下示例中，我使用jQuery，但我的问题通常适用于任何在JavaScript用于显示如果未启用JavaScript将会错过某些功能的情况。

假设我想要在页面加载时淡入一些文本：

.fade-in { opacity:0; }

<div class="fade-in">FOOBAR</div>

$('.fade-in').fadeIn();

但是如果客户端没有启用JavaScript怎么办？我不想文本保持不可见，所以也许我可以将CSS设置为结束状态作为后备方案，然后在动画之前使用JavaScript取消设置。这样，没有启用JavaScript的用户只能看到普通文本（没有淡入效果），而启用JS的用户则可以看到淡入效果。
.fade-in { opacity:1; }

<div class="fade-in">FOOBAR</div>

$('.fade-in').css('opacity', 0);
$('.fade-in').fadeIn();

这样做虽然可行，但大多数情况下会出现CSS显示属性被设置和javascript取消设置之间的不愉快的"闪烁"现象。在上面的示例中，正常工作的javascript用户将看到"FOOBAR"出现了一瞬间，然后消失，然后淡入。
有没有最佳实践可以避免这种闪烁或者不牺牲无JS用户？请不要纠缠于上面的微不足道的例子，那只是为了演示概念。我正在寻找一个更广泛的处理这些情况的策略。此外，我不想辩论渐进增强的优点或是否有必要支持无JS用户。这是另一个主题的问题。
更新：我知道像Modernizr这样的工具可以用来添加.no-js类等，但我更喜欢不依赖这些库的解决方案。
你是否在运行带有就绪事件处理程序的函数来淡化值？ 这应该足够快，以避免闪烁。 你真正应该考虑的方式是先使页面在没有Javascript的情况下可用，然后再使用Javascript进行增强。 - Dissident Rage
@DissidentRage 我通常在 $(document).ready(...) 中运行动画。根据我的经验，在 ready() 内部的代码有机会覆盖 CSS 之前，CSS 通常会短暂地出现。 - emersonthis
奇怪。除非.ready()没有使用DOMContentLoaded，否则它应该在加载CSS之前运行。 - Dissident Rage
@DissidentRage，我已经有一段时间没有研究这个了，但我认为你在想$(document).load()，它会更早地触发。 - emersonthis
不是根据这个链接：https://dev59.com/yGoy5IYBdhLWcg3wq_3O看起来jQuery实际上在两者中都没有使用DOMContentLoaded，而是使用了document.oncontentready，它比DOMContentLoaded慢但比window.onload快。 - Dissident Rage
4个回答
9
如用户未启用JS，请为其创建一个样式表：
<head>
scripts
<noscript><link href="no-js.css" /> </noscript>
</head>
没错！靠谱的无 JS 样式表。我曾设想过一种利用同一样式表的解决方案，但没有特别的原因。这可能是最好的方式。 - emersonthis
只需在<noscript>标签中的 head 中的 body 添加一个类(no-js)，然后您就可以使用单个样式表。例如.no-js选择器等。 - Paulie_D
3
使用<noscript></noscript>标签
0

我想知道，这样的方法管用吗？

<body>

<noscript>
<div class="no-js">
</noscript>

...

<noscript>
</div>
</noscript>

</body>

这个想法是通过有条件地用 .no-js 类包装元素而不需要使用 Modernizr 来将所有 CSS 保存在一个样式表中。

0
这是我为您提供的最佳建议：在您的html元素上使用no-js和js类：
<html class="no-js">
<head>
    <title>...</title>
    <!-- Change "no-js" class to "js" in the html element -->
    <!-- This must appear high in your page to avoid FOUC effect -->
    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
</head>
<body>
    ...
</body>
</html>

这样，你的CSS可能看起来像这样：

/* The item first appears with opacity=1, then disappears when the no-js class is removed */
.no-js .fade-in { opacity: 1; }
.fade-in { opacity: 0; }

这几乎是像Modernizr这样的工具所做的事情，但在这里非常简化 :)

感谢Paul Irish：http://www.paulirish.com/2009/avoiding-the-fouc-v3/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接