如果启用JS，有没有办法防止加载样式表？

Question

我正在尝试设计一个tumblr主题。我发现它的风格非常有限。

我正在考虑使用这种方法为不同的页面加载不同的样式表：

var pathname = window.location.pathname;
if (pathname.indexOf("tagged/inspiration") != true){
<link rel='stylesheet' href='/style.css' /> 
}

现在的问题是，如果js被禁用，我就不会得到那个文件。因此我想我会添加一个样式表，如：

<link rel='stylesheet' href='no-js/css' />  

虽然可以隐藏这是js已启用吗？

最重要的是，我要做的事情有什么不妥吗？

阅读网页设计博客的人有多大可能禁用javascript？

非常感谢

Answer 1

• HTML是您的模型
• CSS是您的视图
• JS是您的控制器

HTML处理数据
CSS处理样式
JS处理交互

如果您需要将样式仅应用于JS，请在样式前加上.js：

#foo { color: red; }

.js #foo { color: blue; } /* javascript enabled style */

并致电：

$('html').addClass('js');

Modernizr将为您处理此问题，并添加大量其他有用于功能检测的类。

---

如果您觉得需要添加第二个样式表（一个用于JS，一个用于非JS），则可以采用多种不同的方式。对于以下示例，我假设link[rel="stylesheet"][type="text/css"]，但我太懒了，无法添加它们。

默认情况下没有JS的添加剂：

<link href="no-js.css" />
<script type="text/javascript">
  document.write('<link href="js.css" />');
</script>

使用JS作为默认添加剂：

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

替换

<link href="no-js.css" />
<script type="text/javascript">
  $('link').last().attr('href', 'js.css');
</script>

Answer 2

只需将默认样式表链接放在无脚本标记中：

<noscript>
  <link rel='stylesheet' href='no-js/css' /> 
</noscript>

Answer 3

如果在客户端禁用/不提供客户端脚本，只需包含自定义的CSS文件，即

<noscript>
    <link rel='stylesheet' href='no-js/css' />
</noscript>