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.