CODEWITHSUNDEEP
htmlcssmodernizr
crowhill
crowhill

Reputation: 2548

CSS: hiding elements for browsers with no javascript support

So I use Modernizr to detect javascript. Based on the .no-js class, I have the following:

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

If the user has javascript enabled, the element is hidden. If they do not have javascript enabled, the element is visible.

Works great. Now I want to do the reverse. That is, I want an element hidden if the user doesn't have javascript. What is the best way to do that?

I've tried a number of things, including numerous variations on this:

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

html .navButton {
    display: block;
}

but so far, nothing has worked. It's my understanding that html.no-js .navButton should only be selecting on <html class="no-js">. Is that not the case?

Upvotes: 1

Views: 1656

Answers (2)

martinec
martinec

Reputation: 7

To hide visually and from screen readers use

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

If you want to hide visually and from screen readers, but maintain layout:

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

To hide only visually, but have it available for screen readers:

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

To extends the previous style to allow the element to be focusable when navigated to via the keyboard:

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

Sources

Upvotes: 0

CntkCtn
CntkCtn

Reputation: 357

Try putting it in page directly like below.

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

 .navButton {
     display: none;
 }

 </style>
 </noscript>

Upvotes: 4

Related Questions