eme*_*his 4 javascript css progressive-enhancement
我在下面的示例中使用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类等,但我更喜欢不依赖这些库的解决方案.
如果用户没有启用JS,请为他创建样式表:
<head>
scripts
<noscript><link href="no-js.css" /> </noscript>
</head>
| 归档时间： |
|
| 查看次数： |
1229 次 |
| 最近记录： |