为了使我的网页能够优雅地降级,我有一些CSS应该只在相应的JavaScript可用时加载。
如果浏览器启用了JavaScript,那么仅在这种情况下加载本地CSS的最简单方法是什么?
此外,这是一个相当大的CSS块,因此我不想编写JavaScript行以添加每个属性。(哦,如果必要的话,我可以使用jQuery)。
为了使我的网页能够优雅地降级,我有一些CSS应该只在相应的JavaScript可用时加载。
如果浏览器启用了JavaScript,那么仅在这种情况下加载本地CSS的最简单方法是什么?
此外,这是一个相当大的CSS块,因此我不想编写JavaScript行以添加每个属性。(哦,如果必要的话,我可以使用jQuery)。
.noJS .myRules {}
。document.write()
建议之前使用这个。 - Michael Berkowski<head>
中,你可以使用document.write()
来包含它。虽然我从未尝试过,但理论上应该可行。没有脚本执行意味着不加载样式表。<head>
<script type='text/javascript>
document.write("<link rel='stylesheet' href='your.css' media='whatever />");
</script>
</head>
<body id="no-js"><script>document.body.id="js"</script>
然后我可以从我的主CSS中针对#no-js
和#js
进行定位。
另一个选项是使用JavaScript加载额外的样式表,但这会减慢您的初始加载速度,我尽量避免使用它。
查看HTML5 Boilerplate的条件体以了解如何使用Modernizr。
这里也有一个很好的例子:http://webdesignernotebook.com/css/how-to-use-modernizr/
然后编写您的CSS选择器以针对.no-js .addl-selector {}。
document.documentElement.className = "js"
<html>
标签添加类名为 js
,然后你可以使用 CSS 来选择目标元素:.js #someid{}