Sass Helpers for Older Browsers

Newer features of CSS can be problematic to use if your project still requires support for older browsers. If you start with a solid base of simple styles you can take a progressive enhancement approach and layer on newer styles that only modern browsers will render. There are scenarios, however, where you will want some sort of fallback for a particular style in older browsers. The style may be more than decorative, and so losing it could mean losing context or understanding. The older browser may be used by a higher than normal percentage of the site’s audience, making a strategy that renders the site less polished in that browser, too visible.

This article focuses on fallback CSS support for older versions of Internet Explorer using Sass mixins and functions. Older versions of Internet Explorer tend to stick around due to it’s use in slow to update enterprise-corporate settings. These are the CSS features we will be discussing solutions for:

REM units in IE 8
Media Queries in IE 8
Box Sizing in IE 7
Box Shadows in IE 8
Gradients in IE 9
Opacity in 8

Strategies to use

There are a few different strategies to provide fallback support for an unsupported CSS feature in Internet Explorer:

Double style rule

In this scenario, another format for the CSS can provide a fallback. The modern style will overrule through CSS inheritance, but only in browsers that support it. The technique is to simply place the newer rule after the older one. These offer not equivalent styles, but better than complete lack of support.

Pros: very simple to maintain.
Cons: adds more file size weight to your main CSS files.

IE only styles

There are a few ways to feed specific versions of Internet Explorer their own stylesheets. In this case you would overrule main styles with IE styles, but only in the context of those browsers. This is helpful for more complicated overruling procedures.

Pros: entire file ignored by non IE browsers.
Cons: splits out rules into different files, which can complicate maintenance.

IE hacks

Exploiting errors in older IE versions to override base styles for all other browsers. Usually these have to do with selector syntax.

Pros: Can be very precise in effect.
Cons: Hard to read and maintain. Added syntax introduces validation errors in CSS.

Filters

In some cases, a style is unsupported, but there’s an equivalent or nearly-equivalent proprietary IE “filter” that can be applied.

Pros: like the double style rule, it’s simple to maintain
Cons: Some filters have a significant performance impact, so they should be applied judiciously and tested. Added syntax introduces validation errors in CSS.

Specific browser quirks to note, from caniuse.com

REM

Internet Explorer 9 & 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements.
IE 9, 10 and 11 do not support rem units when used in the “line-height” property when used on :before and :after pseudo elements.

Media Queries

IE9 incorrectly includes scrollbar width for media queries based on window width.

Box Sizing

IE9 will subtract the width of the scrollbar to the width of the element when set to position: absolute, overflow: auto / overflow-y: scroll
IE 8 ignores box-sizing: border-box if min/max-width/height is used.

Pre-existing solutions to glean from

REM w/ PX fallback for typography

Easy-peasy Rem Conversion With Sass from Nicole Sullivan
A mixin for creating double style rules for font-size only.

Mixins for Rem Font Sizing from CSS Tricks
Two methods getting a double style rule solution for PX fallbacks. One serves up just font-size, the other allows you to feed in the property, such as margin.

REM Sass Mixin With Pixel Fallback from Paul Underwood
Anther two methods, but in this case, the single value version can also be passed in a property.

Using Rems with Sass from David Ensinger
A single powerful mixin that allows specified properties and a mix of values including PX, %, and auto.

REM to PX Browser Function with Sass by Sébastien Axinté
In this solution, file download weight from lots of double style rules is avoided by piping styles into two sheets, and using IE conditional comments to send the PX versions to IE 8 and lower.

Fallback for Media Queries.

Sass Breakpoint Mixin Meets IE8 by Kendall Totten
Styles hidden by media queries for “desktop” sizes can be provided duplicated for use by IE8 via an “old-ie” class.

Jake Archibald’s OldIE Mixin
In this solution two style sheets are generated from one source. One of the sheets has media queries flattened and arbitrary additional IE-only content added. IE conditional comments are used to feed the old one to IE 8 and less.

My Media Query Mixin by Stu Robson
A mixin which provides three things in one: a shorthand notation, specifying PX values converted to EM, and an IE-fallback flag which will duplicate styles into a “lt-ie9” class selctor

Box-sizing: border-box not supported in IE6/7

A Sass-y box-sizing fallback if needs must by Stu Robson
Define a width with left/right padding and both modern (border-box supported) and old styles will be created and fed via conditional comments.

Gradients

Making Sass Linear Gradient Mixins Behave in IE by Nick Piesco
This mixin adds support for the IE filter which supports gradients.

Conclusion

We have looked through various issues surrounding modern CSS supported in older versions of Internet Explorer. With Sass we can see there is help providing support for site builds using pre-made solutions directly, or we could learn from these patterns and create our own variation. Have you created a mixin or function that help patch over lacking CSS support in older browsers? Please share them in the comments.