Skip to content

Commit

Permalink
Allow users to disable the hacks surrounding IE6&7 by disabling legac…
Browse files Browse the repository at this point in the history
…y support for IE.
  • Loading branch information
chriseppstein committed Oct 11, 2010
1 parent 00fe777 commit 60fc4b7
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 26 deletions.
26 changes: 26 additions & 0 deletions frameworks/compass/stylesheets/compass/_support.scss
@@ -0,0 +1,26 @@
// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
$legacy-support-for-ie: true !default;

// Setting this to false will result in smaller output, but no support for ie6
$legacy-support-for-ie6: $legacy-support-for-ie !default;

// Setting this to false will result in smaller output, but no support for ie7
$legacy-support-for-ie7: $legacy-support-for-ie !default;

// @doc off
// The user can simply set $legacy-support-for-ie and 6 & 7 will be set accordingly,
// But in case the user set either of those explicitly, we need to sync the value of
// this combined variable.
$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7;
// @doc on

// Support for mozilla in experimental css3 properties.
$experimental-support-for-mozilla : true !default;
// Support for webkit in experimental css3 properties.
$experimental-support-for-webkit : true !default;
// Support for opera in experimental css3 properties.
$experimental-support-for-opera : true !default;
// Support for microsoft in experimental css3 properties.
$experimental-support-for-microsoft : true !default;
// Support for khtml in experimental css3 properties.
$experimental-support-for-khtml : true !default;
Expand Up @@ -3,10 +3,14 @@
// Provides a cross-browser method to implement `display: inline-block;`

@mixin inline-block {
@if $legacy-support-for-ie {
& { *display: inline; }
}
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*display: inline;
*vertical-align: auto;
@if $legacy-support-for-ie {
*vertical-align: auto;
}
}
11 changes: 1 addition & 10 deletions frameworks/compass/stylesheets/compass/css3/_shared.scss
@@ -1,13 +1,4 @@
// Support for mozilla in experimental css3 properties.
$experimental-support-for-mozilla : true !default;
// Support for webkit in experimental css3 properties.
$experimental-support-for-webkit : true !default;
// Support for opera in experimental css3 properties.
$experimental-support-for-opera : true !default;
// Support for microsoft in experimental css3 properties.
$experimental-support-for-microsoft : true !default;
// Support for khtml in experimental css3 properties.
$experimental-support-for-khtml : true !default;
@import "compass/support";

// This mixin provides basic support for CSS3 properties and
// their corresponding experimental CSS2 properties when
Expand Down
@@ -1,3 +1,5 @@
@import "compass/support";

// 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.
Expand All @@ -7,29 +9,38 @@ $default-has-layout-approach: zoom !default;
// to gain the "hasLayout" property in internet explorer.
// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
@mixin has-layout($using: $default-has-layout-approach) {
@if $using == zoom {
@include has-layout-zoom;
} @else if $using == block {
@include has-layout-block;
} @else {
@warn "Unknown has-layout approach: #{$using}";
@include has-layout-zoom;
@if $legacy-support-for-ie {
@if $using == zoom {
@include has-layout-zoom;
} @else if $using == block {
@include has-layout-block;
} @else {
@warn "Unknown has-layout approach: #{$using}";
@include has-layout-zoom;
}
}
}

@mixin has-layout-zoom {
*zoom: 1;
@if $legacy-support-for-ie {
*zoom: 1;
}
}

@mixin has-layout-block {
// This makes ie6 get layout
display: inline-block;
// and this puts it back to block
& { display: block; }
@if $legacy-support-for-ie {
// This makes ie6 get layout
display: inline-block;
// and this puts it back to block
& { display: block; }
}
}

// A hack to supply IE6 (and below) with a different property value.
// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
@mixin bang-hack($property, $value, $ie6-value) {
#{$property}: #{$value} !important;
#{$property}: #{$ie6-value}; }
@if $legacy-support-for-ie6 {
#{$property}: #{$value} !important;
#{$property}: #{$ie6-value};
}
}

0 comments on commit 60fc4b7

Please sign in to comment.