Added CSS class .no-js in body_class #89

Closed
wants to merge 3 commits into
from

Conversation

Projects
None yet
4 participants
Contributor

pixolin commented Sep 25, 2012

I find it helpful to add a CSS class .no-js to the body tag and remove it with 

jQuery(document).ready(function($){ 
    $('body').removeClass('no-js');
}

in the footer (which should be added to footer.php in case you merge this pull request) if the viewer has turned on JavaScript.

This allows better Graceful Degradation of JavaScript/jQuery functions while it doesn't harm performance nor legibility of the code.

pixolin added some commits Sep 25, 2012

Added class .no-js in body_class
I find it helpful to add a class .no-js to the <body> tag and remove it with 

jQuery(document).ready(function($){ 
  $('body').removeClass('no-js');
}

in the footer (which should be added to footer.php in case you merge this pull request) if the viewer has turned on JavaScript.

This allows better Graceful Degradation of JavaScript/jQuery functions while it doesn't harm performance nor legibility of the code.
Added 'no-js' to body_class() tag
body_class('no-js') adds a CSS class .no-js to the body tag which makes it easier to add styles for browsers not supporting/running JavaScript.

Additionally

jQuery(document).ready(function($){ 
  $('body').removeClass('no-js');
}

is needed to remove the class for styling in browsers running JavaScript.
Contributor

pixolin commented Sep 25, 2012

@ashfame indeed, sorry.

Contributor

ashfame commented Sep 25, 2012

No problem! My thought is that since _s doesn't have that much going in the javascript department, its probably not a good idea to bring this in but its pretty usable as a JS availability fallback mechanism, no doubt.

This recent blog post makes a good case for using a small bit of inline javascript for this task instead of a jQuery approach.

This avoids waiting for jQuery to load and the DOM being ready before applying the class, which then avoids content visually changing as the page loads.

Added '.no-js' to <html> (Graceful Degradation)
@douglsmith: thanks to your comment I now moved class 'no-js' into the <html> tag and added the script by Roger Johansson (http://bit.ly/PEidxf).   
Collaborator

philiparthurmoore commented Feb 3, 2013

Great technique, but it's not used often, if at all, with _s. Closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment