CSS：为不支持 javascript 的浏览器隐藏元素

Question

所以我用Modernizr检测javascript。基于 .no-js class，我有以下内容：

html.no-js .navContainer {
    visibility: visible !important;
}
.navContainer{
    visibility: hidden;
}

如果用户启用了 javascript，该元素将被隐藏。如果他们没有启用 javascript，则该元素是可见的。

效果很好。现在我想反其道而行之。也就是说，如果用户没有 javascript，我想要一个元素 hidden。最好的方法是什么？

我已经尝试了很多东西，包括很多变体：

html.no-js .navButton {
    display: none;
}

html .navButton {
    display: block;
}

但到目前为止，没有任何效果。据我了解，html.no-js .navButton 应该只选择 <html class="no-js">。不是这样吗？

Answer 1

试试像下面这样直接放在页面中。

<noscript>
 <style type="text/css">
 @import url (nojs.css);

 .navButton {
     display: none;
 }

 </style>
 </noscript>

Answer 2

要在视觉上和屏幕阅读器中隐藏，请使用

html.no-js .navbutton {
  display: none
}

如果您想要在视觉上隐藏并且不让屏幕阅读器看到，但要保持布局：

html.no-js .navbutton {
  visibility: hidden;
}

仅在视觉上隐藏，但让屏幕阅读器可用：

html.no-js .navbutton {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

要扩展以前的样式以允许元素在通过键盘导航到时可聚焦：

html.no-js .navbutton.focusable:active,
html.no-js .navbutton.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

来源

CSS：为不支持 javascript 的浏览器隐藏元素

CSS: hiding elements for browsers with no javascript support

html

css

modernizr