Move .no-js code into head

salcode commented 8 years ago

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";
    }
}

bryanwillis commented 8 years ago

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";
}

salcode commented 8 years ago

@bryanwillis

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

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.

bryanwillis commented 8 years ago

Looks like you've been busy sal :+1:

salcode commented 8 years ago

@bryanwillis thanks for all the time you've put into these items previously. I'm just trying to catchup :grinning:

salcode / bootstrap-genesis

Move .no-js code into head #131

Adding no-js class

Adding the JavaScript