Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Define css if javascript is not enabled

I want to define .exampleclass img {height:250px} if javascript is not enabled. Is their anyway to undo this in javascript / jquery?

like image 561
ThomasReggi Avatar asked Jan 12 '11 05:01

ThomasReggi


4 Answers

put a "no-js" class on your body element, and then remove it with JS at load, and use .no-js in the selector for your CSS

like image 139
Stephen Avatar answered Nov 17 '22 04:11

Stephen


One day we may have this

Not currently active in Chrome 83 Win10

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting

p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">Your scripting is only enabled during the initial page load. Weird.</p>
<p class="script-enabled">You have scripting enabled! :-)</p>
like image 34
mplungjan Avatar answered Sep 30 '22 15:09

mplungjan


You could probably use HTML's noscript tag.

<noscript>
    <style type="text/css">
        .exampleclass img {height:250px}
    </style>
</noscript>

EDIT: I'm going to actually side with Stephen's answer as being the best. While the above might work, it might not be valid/following best practices.

Stephen answered:

put a "no-js" class on your body element, and then remove it with JS at load, and use .no-js in the selector for your CSS

The class could also be placed on your html element and then all styling that should appear when JavaScript is not available can be prefixed with html.no-js before what the selector would be otherwise. This is what HTML5 Boiler Plate does, for example.

like image 23
Kyle Avatar answered Nov 17 '22 04:11

Kyle


Try

<noscript>
    <style type="text/css">
        .exampleclass img {height:250px}
    </style>
</noscript>

Noscript

like image 7
rahul Avatar answered Nov 17 '22 04:11

rahul