Move .no-js code into head
Closed this issue ยท 4 comments
See http://www.paulirish.com/2009/avoiding-the-fouc-v3/
@bryanwillis wrote the following about this in #127
Add no-js class using wordpress filters. This makes it much easier to remove since all that's needed is remove_filter( 'language_attributes', 'bsg_js_detection_lang_atts' );
. Plus now we no longer have to hardcode the head which makes language attributes available again and the ability to add schema markup to the head (<head itemscope itemtype="http://schema.org/WebSite">
). Also, the current way we have it isn't doing any html5 check like the rest of the theme does and is also adding link rel='profile'
to the head tag which is the wrong way to do it in html5.
add_filter( 'language_attributes', 'bsg_js_detection_lang_atts' );
add_action( 'genesis_meta', 'bsg_js_detection_script', 10 );
function bsg_js_detection_lang_atts($output) {
return $output . ' class="no-js"';
}
function bsg_js_detection_script() {
if ( has_filter( 'language_attributes', 'bsg_js_detection_lang_atts' ) ) {
echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
}
}
Another alternative to using language attributes method
add_filter('body_class', 'genesis_javascript_detection_body_class');
add_action( 'genesis_before', 'genesis_javascript_detection_script', 1 );
function genesis_javascript_detection_body_class($classes) {
$classes[] = 'no-js';
return $classes;
}
function genesis_javascript_detection_script() {
echo "<script>document.body.className=document.body.className.replace(/\bno-js\b/,"js");</script>\n";
}
Adding no-js class
The filter on body_class
adds the no-js
class on the body
element rather than html
element. While that seems like it would work, adding no-js
to the html
element seems to be the standard.
Examples
- http://www.paulirish.com/2009/avoiding-the-fouc-v3/
- https://css-tricks.com/snippets/javascript/css-for-when-javascript-is-enabled/
- http://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class
- http://alxmedia.se/code/2013/11/using-a-no-js-class-in-your-wordpress-theme/
Adding the JavaScript
You're right that it makes more sense to add the JavaScript with a hook rather than hardcoding in the header. I've updated the PR. Thanks.
Looks like you've been busy sal ๐
@bryanwillis thanks for all the time you've put into these items previously. I'm just trying to catchup ๐