Dealing with legacy browsers

Within the question "mobile-first or desktop-first?" there's an area that we need to cover about legacy browsers. Each project, each client, and their corresponding analytics (if they have any, which they should) have different requirements that affect how we are supposed to deal with those older browsers.

If you're building with a desktop-first approach, your current workflow should remain the same as this is pretty much what we've been doing since before RWD became practically mandatory.

This means that you would still use something like this:

header {
    //Desktop-first declaration
    width: 50%;
    @include forSmallScreens(768) {
      //Target small screens (mobile devices)
      width: 100%; }
}

This compiles to the following:

header {
    width: 50%;
}

@media (max-width: 48em) {
    header {
      width: 100%;
    }
}

IE7 and IE8 do not support media queries, but the preceding code will work just fine because the header { width: 50%; } rule is not inside...