Read more

Different CSS for IE using Sass

Tobias Kraze
March 29, 2011Software engineer at makandra GmbH

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass Show archive.org snapshot , this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass.

Step 2

Create two new Sass files:

Call this one screen.sass:
$ie = false
@import screen

Call this one screen_for_ie.sass:
$ie = true
@import screen

Step 3

Change your page head to something like this:

<!--[if gt IE 8]><!-->
  <%= stylesheet_link_tag 'screen', :media => 'screen' %>
<!--<![endif]-->
<!--[if lte IE 8]>
  <%= stylesheet_link_tag 'screen_for_ie', :media => 'screen' %>
<![endif]-->

We treat IE9 like a non-IE here, because of its improved CSS3 compatibility.

Step 4

Insert the conditionals into your _screen.sass, like this:

.box
  @if $ie
    border: 1px solid #aaa
  @else 
    -moz-box-shadow: 0 0 5px #aaa
    -webkit-box-shadow: 0 0 5px #aaa
    box-shadow: 0 0 5px #aaa
Posted by Tobias Kraze to makandra dev (2011-03-29 12:18)