Last active
December 19, 2015 12:39
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Werde das bei Gelegenheit testen.