Replacing Respond JS with Sass

So you’re building some really cutting/bleeding edge web sites. You’re using HTML5, CSS3, and media quieries to serve your users some fast, repsonsive, and beautiful code/websites. Your life is great, and you love the work you’re producing… Then you have to make sure your code is working in legacy browsers like IE7 and 8…

So you throw some polyfils like Modernizr at these legacy browsers… and now they understand HTML5.

You used progressive enhancement from the beginning, so the CSS3 you’re using looks fine in browsers that don’t understand it.

And finally, you fired up some virtual machines and checked to make sure everything is working fine. Yay! Now you’re done right? Nope.

Turns out the Scott Jehl’s Respond.js polyfil you’re using to make sure IE7 and 8 understand media queries is causing some weird bugs. You added icon fonts to the site for high retina displays, but you’re getting some weird behavior ever since you added Respond.js to the site… So you try doing some Google searchs, checkout StackOverflow, or look at the Issues in the Github repo… but still nothing… Did you really expect results for “IE8, respond.js, icon font, hidden on hover??” Let’s get real for a sec… Do we really need to make sure that IE7 and 8 are responding to our media queries? Would it just be fine if those users would simply be served the desktop site? Of course! There’s no need to spend tons of development time trying to debug issues that are going to effect less than 1% of your audience. So how can we not use Respond.js or similar polyfil, and still maintain one stylesheet? Enter Sass!

Example

The first code example below is how you could setup your mobile first stylesheet for all browsers.


/* All your mobile first css */
@media only screen and (min-width: 768px) { 
    @import '_media768.scss';
}
@media only screen and (min-width: 1024px) { 
    @import '_media1024.scss';
}
@media only screen and (min-width: 1200px) { 
    @import '_media1200.scss';
}

The code example below is how you can setup your SCSS file for LTE IE8.


@import '_media768.scss';
@import '_media1024.scss';
@import '_media1200.scss';

Include the file above in a conditional comment for LTE IE8 users, and presto. Those users will now see the desktop version of the site. This, of source, adds to the weight of the page because they would esstenially be downloading the same styles twice… so it may not be the best option for every site.

So what do you think? At what point to you draw the line and stop supporting these legacy browsers? At what point can you consider a site is “optimized” for?

posted in: Best Practices, Front End Development
tagged: , , , ,

3 Comments
  1. Yisela

    Great post! Thank you for the heads up!

  2. Chris

    Good post! But I there is an easier way, why not design for desktop first.

    • Pete Schuster

      Chris,

      Developing Mobile First is considered best practice for the most part. By developing mobile first, you eliminate mobile users, who typically have lower bandwidth, from having to download larger graphics like BG images, etc. Mobile first is also a great way to think about performance first, rather than as an after thought. For more info checkout Luke Wroblewski’s book from A Book Apart: http://www.abookapart.com/products/mobile-first