I was looking for a way to just deliver the desktop version to IE8 when using BS3 which is mobile first. I did not want to use RespondJS (there is a flicker plus I don't care to provide/deal with anything but one size for the IE8 crowd). I ended up using a gulp/grunt task to extract the relevent media queries for desktop and add them to a separate file to be added with IE conditional statement.
There is a node library called node-match-media that will do the trick. Additionally there is a Grunt plugin.
There was no Gulp plugin but it was easy enough to whip up a task. In my case I only have one css file to parse for media queries - adjust as needed.
var tap = require('gulp-tap');
var rename = require('gulp-rename');
gulp.task('desktopify', function() {
var matchMedia = require('node-match-media');
matchMedia.configure({
width: '992px', // Pretend width to force
height: '768px', // Pretend height to force
px_em_ratio: 16,
always_match: []
});
// My original css for modern browsers
gulp.src('./public/styles/public.css')
.pipe(tap(function(file, t) {
file.contents = new Buffer(matchMedia.run(file.contents.toString()));
}))
// Create a custom file that contains just the needed media queries
.pipe(rename('ie8.css'))
.pipe(gulp.dest('./public/styles'));
});
Then in my html:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/styles/ie8.css">
<![endif]-->