I want to define .exampleclass img {height:250px} if javascript is not enabled. Is their anyway to undo this in javascript / jquery?
-
developer.mozilla.org/en-US/docs/Web/CSS/@media/scriptingmplungjan– mplungjan2020-06-03 11:08:44 +00:00Commented Jun 3, 2020 at 11:08
-
As of recently all (major) browsers support the @media scripting queryStackByMe– StackByMe2024-02-21 15:00:47 +00:00Commented Feb 21, 2024 at 15:00
Add a comment
|
8 Answers
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.
2 Comments
Kyle
I believe you can place it within the head tags. It would probably be best to define the style in the head. Edit: If it is overriding the class definition, make sure that this is after the other class is defined.
Kyle
While this works, I actually recommend alex's solution over this one.
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
Comments
Media scripting is finally available
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>
1 Comment
NReilingh
Looks like support for this landed in all major browsers (except Samsung Internet) late last year!
Best not to mess with CSS via JS in that way. Try this:
<noscript>
<link href="no-js.css" type="text/css" rel="stylesheet" />
</noscript>
Comments
I use something like this...
JavaScript
document.body.className += ' javascript';
jQuery
$('body').addClass('javascript');
CSS
.exampleclass img {height: 250px}
.javascript .exampleclass img {height: 500px}
2 Comments
Josh Kelley
alex
@JoshKelley Good to know, I don't know where I got that piece of information from. I'll remove it.
The most elegant way is to have in your CSS something like:
.exampleclass img {height:250px}
.js .exampleclass img {height:auto;}
and in your JS:
var dd = document.documentElement;
dd.className += ((dd.className == "") ? "js" : " js");
so that the second CSS rule will override the first one in case JS is enabled
Comments
In the future (if and when browsers start supporting it), it will be possible to use the scripting CSS media feature:
@media (scripting: none) {
// Styles to apply if JS is disabled
}
