Posted over 8 years ago. Visible to the public.

Different CSS for IE using Sass

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

Step 1

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:

Copy
<!--[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:

Copy
.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

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Tobias Kraze
Last edit:
almost 7 years ago
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Tobias Kraze to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more