当前位置:  开发笔记 > 编程语言 > 正文

使用noscript嵌入额外的样式

如何解决《使用noscript嵌入额外的样式》经验,为你挑选了4个好方法。

我有一个XHTML严格页面,它有一个由Javascript控制的不可见div.div被设置为透明且可由脚本和鼠标悬停事件显示,以使div在悬停时不透明.

当有人使用浏览器(或带有noscript的firefox)而没有使用javascript时,div只会保持不可见.这个问题是我不希望内容无法访问.我也不想让div可见,然后使用脚本使其透明,因为div位于文档的底部,并且每当页面加载时它都会引起明显的闪烁.

我已经尝试使用noscript标签嵌入一个额外的样式表,该样式表仅为没有Javascript奢侈品的人加载但是这无法通过XHTML严格验证.有没有其他方法可以在XHTML有效的noscript块中包含额外的样式信息?

艾德:

通过一个简单的测试用例,我得到一个验证错误:文档类型不允许元素"样式"在这里. 这是一个空的XHTML Strict文档,在noscript元素中有一个样式元素.noscript在体内.



1> 小智..:

头文件中的noscript是有效的HTML5.它之前无效.我刚刚测试过,它适用于当前的Firefox,Safari,Chrome,Opera和IE.



    
        
    
    
        

is this red? it should be.



2> Bobby Jack..:

要清除验证问题:noscript只允许在body元素中,style只允许在head.因此,后者不允许在前者内.

关于一般问题:div默认情况下你想让元素可见,然后通过CSS + javascript隐藏它.这是"渐进增强"模型.我注意到你说你"因闪烁而不想这样做",但我不确定究竟是什么造成了这种情况 - 你有可能修复它,所以也许你应该把作为一个问题发布.


2015年更新:https://validator.w3.org/将允许`head`中的`noscript`.
是的,HTML5 [明确允许](head)中的(https://www.w3.org/TR/html5/scripting-1.html#the-noscript-element)`noscript`.

3> Andrew Duffy..:

使用scripthead来添加style元素document.write:


...
 
...


小心document.write() - http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice

4> renoirb..:
请注意我的答案

我意识到它是从2008年开始写的,我写了这篇文章

由于我有类似的问题,我想继续回答当前的答案.

我的实际答案

就像Boby Jack所说的那样,style标签是不允许的.我自己就像你(约书亚)那样对待它.但杰克的"渐进式增强"让我没有非抽象的解决方案,但后来我意识到一个解决方案,我没有在这个线程上找到答案.

这完全取决于你的造型结构.

我的建议是明确地使用类似于modernizr头部开头的东西,并使用Paul Irish的HTML5Boilerplate建议.

长话短说

    Html标签有一个class属性no-js

    头标记包括第一个modernizr javascript作为第一个

    CSS 在其适当的位置具有元素(.hide-me)display:none

    然后 .no-js .hide-me { display:block }

详细地

请参阅Paul Irish的HTML5boilerplate,如果您愿意,可以将其改编为XHTML :)

1.Html具有类属性 .no-js






  

引用自 html5boilerplate.com

头标记包括第一个现代化的javascript作为第一个

Modernizr执行将html使用支持的内容构建属性.

将构建类似于此的东西:


请注意,这是来自Google Chrome modernizr测试.

第一个是js但如果Modernizr没有运行(没有javascript),no-js那么就会留在那里.

3. CSS 在其适当的位置具有元素(.hide-me)display:none

......你知道其余的:)

推荐阅读
低调pasta_730
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有