The new browser support features in Compass 1.x

The upcoming release of Compass 1.x will feature some nice improvements in how our CSS handles cross-browser support. The new system will be driven by caniuse data, which is pretty exciting.

There are 2 main aspects to consider when dealing with cross browser support in your Compass project.

• Defining target browsers you want to support.
• Writing conditional CSS that will only compile when it applies to the above targetd browsers.

The Current (soon to be old) method:

The 0.12.x version of Compass uses a straightforward set of predefined, browser specific variables that can be set to true or false based on your needs. For example:

$legacy-support-for-ie6: false;
$legacy-support-for-ie7: true;
$legacy-support-for-ie8: true;

These are some of the defaults. There are more and you can always define your own.

When dealing with CSS properties that need browser specific implementations, those implementations can be included or excluded based on the above variables. Here's an example of what the opacity mixin looks like in the current version of Compass.

@mixin opacity($opacity) {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
    filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
  }
  opacity: $opacity;
}

This is pretty straightforward. If any of these variables are set to true, we'll render the browser specific CSS, followed by the standard implementation. Let's see what this will look like in Compass 1.x.

The new method

@mixin opacity($opacity) {
  @include for-legacy-browser("ie", "8", $threshold: $opacity-usage-threshold) {
    @if $opacity == 1 {
      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(enabled=false)");
    }
    @else {
      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
    }
  }
 
  opacity: $opacity;
}

This looks very similar. The main difference is that rather than writing an if statement, we include the for-legacy-browser mixin.

This mixin takes 4 parameters, the first three: browser, min-version and max-version, state which browser versions this conditional CSS applies to. Essentially saying "This CSS only apples to IE 8." The fourth parameter is the usage threshold. By default, this is how Compass will determine if we are supporting the given browser. If it determines that we are supporting this browser, it will include the relevant CSS in the compiled stylesheet.

The threshold represents the percentage of users using a particular browser based on global browser usage from http://caniuse.com. So, if we are dealing with IE 8, a threshold of 5 will only print this CSS if the usage of IE 8 is greater than 5%.

So rather than Compass asking "Do you support IE 6? Do you support IE 7?" and so on. It's more like "What's the minimum number of users required for us to support a browser?"

Compass has a few threshold variables it uses out of the box. The two main variables are:

$graceful-usage-threshold: 0.1;
$critical-usage-threshold: 0.01;

$graceful-usage-threshold is used on properties that will look ok, if not ideal, if the browser doesn't support them--properties like border-radius and box-shadow.

$critical-usage-threshold is used on properties that if not handled correctly by the browser, will probably break the design without including fallbacks. This would be more for things like box-sizing or clearfixing.

In either case, the value represents the percent of users out of the total global browser market using a given browser. So in the above $critical-usage-threshold case, we are saying "if at least 1 person out of 10,000 uses this browser, we will support it."

Keep in mind that these usage statistics are based on data from caniuse.com and represent global browser usage. The data is not fetched at compile time and can only be as recent as the last time a Compass update was released. This is a good thing, as it reduces the chances of you inadvertently dropping a previously supported browser. If you're curious you can pretty print the current json data as of this writing to see what the browser usage data looks like. Also, your target demographic probably has very different usage. It's best to consult your own analytics if possible.

Specifically declaring which browsers you will support.

Let's assume your site's usage does look different. Or perhaps you know the CEO of your client's company is on IE 7 and if the site doesn't work for her, you have issues. In these cases, you can explicitly declare, regardless of global usage statistics, you want to include any conditional CSS needed to support it IE 7.

You do that like so:

$browser-minimum-versions: (
  'ie': "7"
);

This disregards the threshold value for the given browsers. So if Compass comes across some browser specific CSS for IE 7, it will include it in the compiled output regardless of the threshold.

These browser support changes are just one small improvement in the upcoming release of Compass. Earlier this week a few of us at Aten attended the Sass Hack Denver meetup. Chris Eppstein, of Compass fame, showed this and some of the other changes that will be included in the upcoming release of Sass 3.3 and Compass 1.0. The presentation recording is available for your viewing pleasure.

There are a lot interesting improvements. Most of which seem like they won't affect most users as much as framework and plugin developers. Either way, I'm always excited to have new tools at my disposal and am looking forward to these upcoming releases.