diff --git a/frameworks/compass/stylesheets/compass/_support.scss b/frameworks/compass/stylesheets/compass/_support.scss new file mode 100644 index 00000000..d98bd60b --- /dev/null +++ b/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; diff --git a/frameworks/compass/stylesheets/compass/css3/_inline-block.scss b/frameworks/compass/stylesheets/compass/css3/_inline-block.scss index f50293ad..32984c1d 100644 --- a/frameworks/compass/stylesheets/compass/css3/_inline-block.scss +++ b/frameworks/compass/stylesheets/compass/css3/_inline-block.scss @@ -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; + } } diff --git a/frameworks/compass/stylesheets/compass/css3/_shared.scss b/frameworks/compass/stylesheets/compass/css3/_shared.scss index 87cbf431..e0860673 100644 --- a/frameworks/compass/stylesheets/compass/css3/_shared.scss +++ b/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 diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss b/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss index 4f6ec87d..748666ca 100644 --- a/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss +++ b/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss @@ -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. @@ -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}; + } +}