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

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

javascript css

如何在禁用Javascript时编写CSS回退,javascript,css,progressive-enhancement,Javascript,Css,Progressive Enhancement,我在下面的示例中使用jQuery，但我的问题更普遍地适用于任何使用javascript显示某些内容的情况，如果不启用javascript，这些内容可能会丢失假设我想在页面加载时淡入一些文本： .fade-in { opacity:0; } <div class="fade-in">FOOBAR</div> $('.fade-in').fadeIn(); .fade-in{opacity:0；} 福巴 $（'.fade-in'）.fadeIn（）；但是如果客户端

我在下面的示例中使用jQuery，但我的问题更普遍地适用于任何使用javascript显示某些内容的情况，如果不启用javascript，这些内容可能会丢失

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

.fade-in { opacity:0; }

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

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

.fade-in{opacity:0；}
福巴
$（'.fade-in'）.fadeIn（）；

但是如果客户端没有启用javascript呢

我不想让文本保持不可见，所以我可能会将CSS设置为结束状态作为备用，然后在动画之前用javascript取消设置。这样，没有javascript的用户只看到普通文本（没有fadeIn），而有JS的用户看到的是淡入淡出

.fade-in { opacity:1; }

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

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

.fade-in{opacity:1；}
福巴
$（'.fade-in'）.css（'opacity'，0）；
$（'.fade-in'）.fadeIn（）；

这是可行的，但在大多数情况下，它会导致在设置CSS显示属性和javascript取消设置属性之间出现令人不快的“闪烁”。在上面的示例中，javascript正常工作的用户会看到“FOOBAR”出现一瞬间，然后消失，然后淡入

有没有一个最佳的做法，这不会导致闪烁或牺牲没有JS用户

请不要拘泥于上面这个微不足道的例子。这只是为了证明这个概念。我正在寻找处理这些案件的更广泛策略。此外，我不想讨论渐进增强的优点，也不想讨论是否有必要支持no-JS用户。这是另一个线程的问题

更新：我知道类似Modernizer的工具可以用来添加

。没有js

类等，但我更喜欢不依赖这些库的解决方案

使用

标记

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

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


剧本

我想知道，有什么东西喜欢这种工作吗

<body>

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

...

<noscript>
</div>
</noscript>

</body>

...

我们的想法是通过有条件地将元素包装在

中，将所有CSS保存在一个样式表中。无js

类而不需要现代化。

以下是我的最佳选择：在

html

元素上使用

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

这几乎就是像Modernizer这样的工具所做的，但在这里非常简单：）

请注意Paul Irish：

您是否正在运行函数以使用就绪的事件处理程序淡入淡出值？这应该足够快，以避免闪烁。实际上，您应该考虑的方法是先在没有Javascript的情况下使页面正常工作，然后使用Javascript来增强它。@异议人士我通常从

$（document.ready（…）

内部运行动画。根据我的经验，CSS通常在

ready（）

中的代码有机会覆盖它之前出现。奇怪。除非

.ready（）

没有使用

DOMContentLoaded

，否则它的运行速度应该超过加载CSS的速度。@异议我已经有一段时间没有读到这篇文章了，但我认为您考虑的是

$（document）.load（）

触发更快。与此不同：似乎jQuery在这两种语言中都没有实际使用

DOMContentLoaded

，而是使用

文档。OnContentTready

比

DOMContentLoaded

慢，但比

窗口快。onload

。对！值得信赖的no-js样式表。我正在构思一个使用相同样式表的解决方案，但不是出于任何特殊原因。这可能是最好的方法。只需在

标记的头部添加一个类（无js），然后就可以使用单个样式表<代码>无js选择器等。

/* 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; }