Possible to apply some CSS only to users with Javascript disabled?

Question

The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem for users who do not have javascript enabled.

The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.

If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.

Any easy way to do this? I tried <noscript> with <style> inside of that, no luck.

actually, I'm kind of surprised that the style tag inside the noscript tag didn't work. — scunliffe
– scunliffe, Commented May 30, 2011 at 22:52
Recommend Modernizer.js. All you got to do is include it and put the class no-script in the body tag. — Alxandr
– Alxandr, Commented May 30, 2011 at 22:54
Also surprised noscript didn't work. The only thing I can think is if was it was in the document head (it won't work in the body). — g_thom
– g_thom, Commented May 30, 2011 at 23:10
scunliffe & g_thom - Style elements must be in the head. A noscript element must have a block child element, block elements can't appear in the head. So a style element in a noscript element must be invalid one way or the other. — RobG
– RobG, Commented May 30, 2011 at 23:19
RobG - I agree that it's not valid, I'm just a bit surprised it didn't work. I tried a sample just now in IE 8, FF, and Chrome and they showed ok. — g_thom
– g_thom, Commented May 30, 2011 at 23:31

Ed . · Accepted Answer · 2011-05-30 22:51:19Z

6

One way to approach it is by always adding a CSS class to the elements you wish to have a specific style and then, once loaded, run some JavaScript to remove those classes from the elements with that class.

As an example (I use jQuery here for simplicity's sake but this can obviously be done without a JS library):

$(document).ready(function()
{
  $(".nonJsClass").each(function()
  {
    $(this).removeClass("nonJsClass");
  }
}

Where the 'nonJsClass' has CSS rules that will now only apply if the user doesn't have JS enabled.

answered May 30, 2011 at 22:51

Ed .

6,4139 gold badges64 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jared Over a year ago

Perfect, this is going to work exactly how I need it to, I just couldn't think of the logic to do it. Thanks!

Dan Over a year ago

jQuery(function ($) { $('.nonJsClass').removeClass('nonJsClass'); });

scunliffe · Accepted Answer · 2011-05-30 22:50:42Z

3

You could add a class to the body tag, that triggers your desired CSS when JS is not enabled, then right after the body tag, remove it with JS.

Thus users with JS support won't see the effects of the special class.

answered May 30, 2011 at 22:50

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

Comments

Cmorales · Accepted Answer · 2012-02-03 09:37:22Z

2

Including a stylesheet inside a noscript tag was not possible before HTML5, but it is now (as long as you do it in the "head" of the document).

http://adapt.960.gs/

In the case of JavaScript being purposefully disabled or unavailable, stylesheet defaults can be served via , which is perfectly valid in the for HTML5.

answered Feb 3, 2012 at 9:37

Cmorales

211 bronze badge

Comments

g_thom · Accepted Answer · 2011-05-30 23:03:56Z

1

scunliffe's answer is good. An alternate way would be to write a CSS style that only displays if JavaScript is enabled and only targets the div you want, using class chaining:

.prochart-colitem.js-enabled {
     /* your JS-specific styles */
}

You can then use jQuery, for example, to add that additional class:

$(document).ready(function() {
    $('.prochart-colitem').addClass('js-enabled');

});

answered May 30, 2011 at 23:03

g_thom

2,8102 gold badges21 silver badges19 bronze badges

Collectives™ on Stack Overflow

Possible to apply some CSS only to users with Javascript disabled?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related