SASS + Compass + Modernizr and browser information detection

Jack, my co-themer here at Advomatic, and I will be doing a series of articles about how we use SASS and Compass on our projects. There are plenty of articles out there on what it is and how to get started, so we wanted to dig a little deeper, and share a few tips and ideas.

is that IE7 I smell?

Credit: mccun934

Today I'll talk about Modernizr, which is a javascript library that will check to see if your browser supports HTML5 and CSS3 features. We use it on every project now to make sure we aren't serving unsupported stuff to browsers that can't handle it. One thing Modernizr does is add classes to your HTML tag, like "cssgradients" or "no-cssgradients," or "textshadow" or "no-textshadow" as the case may be. Combined with SASS, this can be a very simple way to limit your CSS3 work. Here's an example of how we now apply any of our css3 theming, using the way SASS allows you to check for parent classes, and the nice CSS3 includes of Compass.

h1.title {  // A double border, for browsers that support box shadows; single border for those that don't.
  border-bottom: 1px solid #c3c3bf;
  .boxshadow & {
    @include box-shadow($white 0 1px);
  }
}

Here's a slightly more elaborate example:

#footer {
  background-color #114163: // a baseline background color
  .lt-ie10 & { // dirty proprietary filter for IE9 and below
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2074b1', endColorstr='#114163');
  }
  .cssgradients & { // gradient for CSS3-supporting browsers
    @include background-image(linear-gradient(#2074b1, #114163));
  }
}

By the way, that handy ".lt-ie10" class on the html tag is standard now in Drupal's Zen base theme. It's very handy. While we try to avoid it, we also will add in classes for .mac, .pc, .chrome, .firefox and .safari, if we have some extremely browser-specific problems, which is rare. If you are curious, here's the javascript we use to add that information to the html tag.

Drupal.behaviors.targetBrowsersOS = {
  attach: function (context, settings) {
    // Check to see which operating system we're using.
    if (navigator.appVersion.indexOf("Mac")!=-1) {
      $('html').addClass('mac');
    }
    else {
      $('html').addClass('pc');
    }
    // Check to see if the browser is Safari and doublecheck that it is not Chrome.
    if (navigator.userAgent.indexOf('Chrome') > -1) {
      $('html').addClass('chrome');
    }
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
      $('html').addClass('safari');
    }
    if (navigator.userAgent.indexOf('Firefox') > -1) {
      $('html').addClass('firefox');
    }
    if (navigator.userAgent.indexOf('MSIE') > -1) {
      $('html').addClass('ie');
    }
  }
}

So, as you can imagine, this gives you the ability to customize what css various browsers are served, and leaner, cleaner experience all around. Stay tuned for more SASS/Compass tips and tricks!

Stu Cox wrote 1 year 22 weeks ago

Nice simple demo there.

I like the use of `.boxshadow &` *within* a `h1.title {..}` declaration to prepend it, resulting in:

.boxshadow h1.title {
box-shadow: #fff 0 1px;
}

maybe that isn't so obvious to every reader.

Is it even necessary to use the Modernizr classes in these examples though? In both examples, surely if box-shadow, linear-gradient() and IE filters aren't supported they just won't be applied.

Amanda Luker wrote 1 year 22 weeks ago

Hi Stu,

You have a point: IE won't render things it can't, so why bother keeping it from trying? One thing I didn't mention is that Modernizr also gives you classes like .no-boxshadow -- so you can do something like: 

h1.title {
  .boxshadow & {
    @include box-shadow(#fff 0 1px);
  }
  .no-boxshadow & {
    border-bottom: 1px solid #fff;
  }
}

The main argument is about having granular control over CSS3 enhancements and only delivering styles to browsers that support them. As browsers increase their support for CSS3, this will all be obsolete too! Until then...

Contact Us

About Amanda Luker

Amanda Luker is a web designer in Minneapolis, MN.

AdvoTwitter