Question

我在下面的示例中使用了jQuery，但我的问题更普遍适用于任何使用javascript来显示未启用javascript时会遗漏的内容的情况。

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

.fade-in { opacity:0; }

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

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

但是如果客户端没有启用javascript怎么办？

我不希望文本保持不可见，因此我可能会将CSS设置为结束状态作为后备，然后在动画之前使用javascript对其进行UN设置。这样，没有javascript的用户只看到普通文本（没有fadeIn），而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类等，但我更喜欢不依赖这些库的解决方案。

Answer 1

如果用户未启用JS，请为他创建样式表：

<head>
scripts
<noscript><link href="no-js.css" /> </noscript>
</head>

Answer 2

使用<noscript></noscript>代码

Answer 3

我想知道，这会有什么用？

<body>

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

...

<noscript>
</div>
</noscript>

</body>

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

Answer 4

以下是我最好的选择：在no-js元素上使用js和html个类：

<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/

如何在禁用Javascript时编写CSS回退

4 个答案: