I'm building a theme on top of purecss.io. In order to make the grid responsive I need to add this stylesheet. From functions.php

function load_css() {

wp_enqueue_style ( 'purecss-all-not-ie', 'http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css', array( 'purecss' ), null );
wp_style_add_data ( 'purecss-all-not-ie', 'conditional', 'gt IE 8' );

add_action( 'wp_enqueue_scripts', 'load_css' );

and the output is

<!--[if gt IE 8]>
<link rel='stylesheet' id='purecss-new-ie-css'  href='http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css' type='text/css' media='all' />

however the correct conditional tag should be <!--[if gt IE 8]><!-->

I've found a couple of discussions here and here but I'm a bit lost as I don't understand what's the proposed solution. What should I do?


The bug's only 4 years old so you wouldn't want to rush them would you?! A workaround is to leave out the wp_style_add_data() and use the 'style_loader_tag' filter:

add_filter( 'style_loader_tag', function ( $tag, $handle ) {
    if ( $handle  == 'purecss-all-not-ie' ) {
        $tag = "<!--[if gt IE 8]><!-->\n" . $tag . "<!--<![endif]-->\n";
    return $tag;
}, 10, 2 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.