Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[WordPress] @2ndkauboy has a nice hack to conditionally generate an IE legacy stylesheet with SASS and load it conditionally (http://kau-boys.de/1747) (post in German). This solution tweaks WordPress’s syntax for conditional comments accordingly.
<?php
/**
* Read first, otherwise the following will make no sense at all:
* http://kau-boys.de/1747
*
*
* WordPress’s built-in conditional comment syntax allows
* for conditional comments like this:
*
* <!--[if gt IE 8]>
* <link rel='stylesheet' id='style-css' [etc] />
* <!--<![endif]-->
*
* Result: both stylesheets are loaded equally which brings an
* unneccesary HTTP request and additioal overhead in style declarations.
*
* What we need is something like this:
*
* <!--[if lte IE 8]>
* <link rel='stylesheet' id='lte8-css' [etc] />
* <![endif]-->
* <!--[if gt IE 8]><!-->
* <link rel='stylesheet' id='style-css' [etc] />
* <!--<![endif]-->
*
* Notice that tiny bit of comment in line 17: <!-->
* It prevents IE8 and below from loading the default stylesheet at all!
* Mission accomplished.
*
*/
/**
* Enque stylesheets and scripts.
*/
add_action( 'wp_enqueue_scripts', 'gp130709_enqueue_stuff' );
function gp130709_enqueue_stuff() {
global $wp_styles;
/* IE legacy stylesheet. */
wp_enqueue_style(
'lte8',
get_stylesheet_directory_uri() . '/assets/css/lte8.css'
);
$wp_styles->add_data( 'lte8', 'conditional', 'lte IE 8' );
/* Theme stylesheet. */
wp_enqueue_style(
'style',
get_stylesheet_directory_uri() . '/style.css'
);
}
/**
* Add custom syntax for conditional comments.
*/
add_filter( 'style_loader_tag', 'gp130709_style_loader_tag', 10, 2 );
function gp130709_style_loader_tag( $tag, $handle ) {
/* Bail early if this is not the
* default stylesheet.
*/
if( 'default' !== $handle )
return $tag;
$conditional = '<!--[if gt IE 8]><!-->' . "\n";
$conditional .= $tag;
$conditional .= '<!--<![endif]-->' . "\n";
return $conditional;
}
/**
* Uncomment to remove filter, i.e. in a plugin or child theme.
*
*/
// if ( has_filter( 'style_loader_tag' ) )
// remove_filter( 'style_loader_tag', 'gp130709_style_loader_tag' );
@paddelboot

This comment has been minimized.

Copy link

@paddelboot paddelboot commented Jul 9, 2013

Werde das bei Gelegenheit testen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.