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.

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!

Original Article:

SASS + Compass + Modernizr and browser information detection