Enqueue a css using negative conditional tags

by

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" />
<![endif]-->

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?

1 Answer
1

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 );

Leave a Comment