Mobile First, IE8 Last

Use Sass to automate a separate IE8 Stylesheet

May 7, 2014

When designing mobile first, you code CSS for your smallest device and then add additional style rules for larger devices using media queries. However, IE8 will ignore the media queries. When developing Rensselaer Giving, here is how I solved for this problem.

1. Write media queries using a mixin in Sass.

   Create mixin

   @mixin breakpoint($point) {
     @if $point == baby {
       /* Smartphones */
        @media only screen and (max-width : 707px) { @content; }
     }
     @else if $point == big-baby-sleep {
       /* large phone (landscape) */
       @media only screen and (min-width : 320px)
       and (max-width : 707px) and (orientation:landscape) { @content; }
     }
     /*additional queries*/
   }
   

   Use Mixin

     h1 {
       text-align: center;
       @include breakpoint(teen-up) {
         text-align: left;
       }
     }
   

2. Then create an automated style sheet for IE8 that assumes a desktop min and max width and strips out the media queries. (This is based on Jake Archibald's method.)

   Define IE8 Sass Stylesheet

   $ie8: true; /*define variable*/
   @import "style"; /*import default stylesheet */

   If IE8, then process media queries differently

   $ie8: false !default; /*define variable, consider putting this with the rest of your variables, in the beginning*/
   
   @mixin breakpoint($point) {
   
     /*if ie8, include all appropriate breakpoints - all rules that apply to desktop size
     just include the content, not the media query*/
     @if $ie8 {
        @if $point == teen-up /*rules for tablet and up*/ {
           @content;
        }
        @if $point == adult /*rules for desktop*/{
           @content;
        }
     }
   
     /*not IE8, same as step 1*/
     else {
        @mixin breakpoint($point) {
           @if $point == baby {
             /* Smartphones */
              @media only screen and (max-width : 707px) { @content; }
           }
           @else if $point == big-baby-sleep {
             /* large phone (landscape) */
             @media only screen and (min-width : 320px)
       and (max-width : 707px) and (orientation:landscape) { @content; }
           }
           /*additional queries*/
     }
   }

3. Use variable to add any IE8 hacks and rules unique to the IE8 Sheet.

   Add Unique IE8 Rules

   @include breakpoint(adult) {
     .col-section:nth-of-type(3n + 1) /*selectors don't work in IE8*/{
        clear: left;
     }
   
     @if $ie8 /*create special rule for IE8{
        /*1st col-section */
        .col-section:first-child,
        /*4th col-section */
        .col-section:first-child + .col-section + .col-section + .col-section,
        /*7th col-section */
        .col-section:first-child + .col-section + .col-section + .col-section + .col-section + .col-section + .col-section
        /*continue as neccessary*/ {
          clear: left;
        }
     }
   }
4. Serve the IE8 stylesheet using conditional statements.

This method keeps all of the CSS code in one place without bogging down the primary style sheet with IE8 specific rules and rewrites or relying on IE8 specific HTML classes. The concept is also extendable to other applications. Learn how to branch a single set of Sass files for several similar sites running on multiple content management systems.

Learn more about creating effective media, view my Production Remarks.