Iāll post my one experience with IE9 CSS limits, welcoming feedback (using roots as of 1b333d6). I decided to use a single main css file for non-IE browsers (to avoid the extra http requests of split stylesheets), then conditionally load separate IE9 stylesheets as needed.
Gruntfile ā I donāt develop in IE, so I only created IE9 styles in the grunt ābuildā task (not ādevā). I created a duplicate stylesheet for IE9 with less:build, then treated the IE9 stylesheet separately with autoprefixer and split it with grunt-bless (Iām on v 0.1.1). I adjusted the definition of the ābuildā task to include the IE9 stuff. Here are relevant selections from my Gruntfile, with many line breaks removed to reduce space here:
grunt.initConfig({
jshint: { ... },
less: {
dev: { ... },
build: {
files: {
'assets/css/main.min.css': [ 'assets/less/main.less' ],
'assets/css/main-ie9.min.css': [ 'assets/less/main.less' ]
},
options: { compress: true }
}
},
concat: { ... },
uglify: { ... },
autoprefixer: { ...
build: {
options: { browsers: ['last 2 versions',
'android 2.3', 'android 4', 'opera 12'], },
src: 'assets/css/main.min.css' },
build_ie9: {
options: { browsers: ['ie 9'] },
src: 'assets/css/main-ie9.min.css' }
},
bless: { css: { files: { 'assets/css/main-ie9.min.css':
'assets/css/main-ie9.min.css' } } },
modernizr: { ... },
version: { ... files: { 'lib/scripts.php':
'assets/{css,js}/{main,main-ie9,scripts}.min.{css,js}' } ... },
watch: { ... }
});
// Register tasks
...
grunt.registerTask('build', [ 'jshint', 'less:build',
'autoprefixer:build', 'autoprefixer:build_ie9', 'uglify',
'modernizr', 'bless', 'version' ]
);
lib/scripts.php ā I enqueued the IE9 styles with conditional stylesheets. Selections from lib/scripts.php:
function roots_scripts() {
...
if (WP_ENV === 'development') {
...
} else {
...
$assets = array(
'css' => '/assets/css/main.min.css?' . $assets['assets/css/main.min.css']['hash'],
'css-ie9-1' => '/assets/css/main-ie9-1.min.css?' . $assets['assets/css/main-ie9-1.min.css']['hash'],
'css-ie9-2' => '/assets/css/main-ie9-2.min.css?' . $assets['assets/css/main-ie9-2.min.css']['hash'],
...
);
}
// see http://discourse.roots.io/t/enqueue-respond-script-conditionally-for-ie8-under-grunt/217
wp_enqueue_style('roots_css', get_template_directory_uri() . $assets['css'], false, null);
wp_enqueue_style('roots_css_ie9-1', get_template_directory_uri() . $assets['css-ie9-1'], false, null);
wp_enqueue_style('roots_css_ie9-2', get_template_directory_uri() . $assets['css-ie9-2'], false, null);
$wp_styles->add_data( 'roots_css', 'conditional', '!IE' ); // see also my_downlevel_revealed()
$wp_styles->add_data( 'roots_css_ie9-1', 'conditional', 'IE 9' );
$wp_styles->add_data( 'roots_css_ie9-2', 'conditional', 'IE 9' );
...
}
lib/extras.php ā I used a downlevel-revealed conditional comment to only load the main stylesheet when not IE9. I added this function to my theme ā corresponding to the $wp_styles->add_data( 'roots_css', ...)
from lib/scripts.php above.
/**
* Put main stylesheet load in "Downlevel Revealed" conditional comments
* Later priority so that this will process AFTER the soil plugin
*/
add_filter('style_loader_tag', 'my_downlevel_revealed', 11, 2);
function my_downlevel_revealed ($tag, $handle) {
if ($handle !== 'roots_css')
return $tag;
return '<!-->' . $tag . '<!--';
}
templates/head.php ā I added an empty conditional comment to prevent blocked downloads. Below is the top of templates/head.php. Maybe the empty comment should have come before the doctype.
<!doctype html>
<!--[if IE]><![endif]-->
<html class="no-js" <?php language_attributes(); ?>>
oldIE ā The above has no styles for IE8 and older, so adjust accordingly (could make your IE9 styles just apply to all IE lte IE 9). For my website in question, viewers were likely to be corporate folks stuck on old IE versions, so I actually also built an oldIE css file too (in addition to the IE9 styles), subjected it to the above procedures, giving it special treatment in LESS (e.g., to use px and not rems, handle opacity, simulate rgba, etc.), and also stripped media queries with grunt-stripmq.