Q
Version: 1.0.1
Source on Github

Compass Hacks

A collection of mixins for hacking specific browsers.

This file can be imported using: @import "compass/utilities/general/hacks"

Imports

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$critical-usage-threshold

The legacy support threshold for has-layout. Defaults to the $critical-usage-threshold.

zoom

The zoom approach generates less CSS but does not validate. Set this to block to use the display-property to hack the element to gain layout.

$critical-usage-threshold

The legacy support threshold for IE6 attribute hack. Defaults to the $critical-usage-threshold.

Mixins

view source 

=has-layout($approach: $default-has-layout-approach)
  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold)
    @if $approach == zoom
      +has-layout-zoom
    @else if $approach == block
      +has-layout-block
    @else
      @warn "Unknown has-layout approach: #{$approach}"
      +has-layout-zoom

@mixin has-layout($approach: $default-has-layout-approach) {
  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
    @if $approach == zoom {
      @include has-layout-zoom;
    }
    @else if $approach == block {
      @include has-layout-block;
    }
    @else {
      @warn "Unknown has-layout approach: #{$approach}";
      @include has-layout-zoom;
    }
  }
}

This mixin causes an element matching the selector to gain the "hasLayout" property in internet explorer. More information on hasLayout.

view source 

=has-layout-zoom
  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold)
    *zoom: 1

@mixin has-layout-zoom {
  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
    *zoom: 1;
  }
}
view source 

=has-layout-block
  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold)
    // This makes ie6 get layout
    display: inline-block
    // and this puts it back to block
    &
      display: block

@mixin has-layout-block {
  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
    // This makes ie6 get layout
    display: inline-block;
    // and this puts it back to block
    & {
      display: block;
    }
  }
}
view source 

=bang-hack($property, $value, $ie6-value)
  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold)
    @warn "it's recommended to use the underscore-hack() mixin instead of bang-hack()"
    #{$property}: #{$value} !important
    #{$property}: #{$ie6-value}

@mixin bang-hack($property, $value, $ie6-value) {
  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
    @warn "it's recommended to use the underscore-hack() mixin instead of bang-hack()";
    #{$property}: #{$value} !important;
    #{$property}: #{$ie6-value};
  }
}

A hack to supply IE6 (and below) with a different property value. Read more.

view source 

=underscore-hack($property, $value, $ie6-value)
  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold)
    #{$property}: #{$value}
    _#{$property}: #{$ie6-value}

@mixin underscore-hack($property, $value, $ie6-value) {
  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
    #{$property}: #{$value};
    _#{$property}: #{$ie6-value};
  }
}

A hack to supply IE6 (and below) with a different property value. Read more