我在下面的例子中使用jQuery，但我的问题更普遍地适用于任何使用javascript来显示如果没有启用javascript就会错过的东西的情况。
假设我想在页面加载时淡入一些文本：
.fade-in { opacity:0; }
<div class="fade-in">FOOBAR</div>
$('.fade-in').fadeIn();
但是，如果客户端没有启用javascript呢？
我不希望文本保持不可见，所以也许我将CSS设置为结束状态作为后备，然后在动画之前用javascript对其进行联合设置。这样，没有javascript的用户只能看到普通文本(没有fadeIn)，而使用JS的用户可以看到fadeIn。
.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类等，但我更喜欢不依赖于这些库的解决方案。
如果用户没有启用JS，请为他创建一个样式表：
<head>
scripts
<noscript><link href="no-js.css" /> </noscript>
</head>
使用<noscript></noscript>标签
我想知道，这样的东西能用吗？
<body>
<noscript>
<div class="no-js">
</noscript>
...
<noscript>
</div>
</noscript>
</body>
其想法是通过有条件地包装.no-js类中的元素而不需要Modernizr，将所有CSS保持在一个样式表中。
我的最佳选择是：在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-jsb/,'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/