Skip to content

Instantly share code, notes, and snippets.

@glueckpress
Last active December 19, 2015 12:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save glueckpress/5956123 to your computer and use it in GitHub Desktop.
Save glueckpress/5956123 to your computer and use it in GitHub Desktop.
[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
Copy link

Werde das bei Gelegenheit testen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment