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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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');

});