Allow users to disable the hacks surrounding IE6&7 by disabling legacy support for IE.
This commit is contained in:
parent
00fe77715a
commit
60fc4b79ce
26
frameworks/compass/stylesheets/compass/_support.scss
Normal file
26
frameworks/compass/stylesheets/compass/_support.scss
Normal file
@ -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;
|
@ -3,10 +3,14 @@
|
|||||||
// Provides a cross-browser method to implement `display: inline-block;`
|
// Provides a cross-browser method to implement `display: inline-block;`
|
||||||
|
|
||||||
@mixin inline-block {
|
@mixin inline-block {
|
||||||
|
@if $legacy-support-for-ie {
|
||||||
|
& { *display: inline; }
|
||||||
|
}
|
||||||
display: -moz-inline-box;
|
display: -moz-inline-box;
|
||||||
-moz-box-orient: vertical;
|
-moz-box-orient: vertical;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
*display: inline;
|
@if $legacy-support-for-ie {
|
||||||
*vertical-align: auto;
|
*vertical-align: auto;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@ -1,13 +1,4 @@
|
|||||||
// Support for mozilla in experimental css3 properties.
|
@import "compass/support";
|
||||||
$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;
|
|
||||||
|
|
||||||
// This mixin provides basic support for CSS3 properties and
|
// This mixin provides basic support for CSS3 properties and
|
||||||
// their corresponding experimental CSS2 properties when
|
// their corresponding experimental CSS2 properties when
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import "compass/support";
|
||||||
|
|
||||||
// The `zoom` approach generates less CSS but does not validate.
|
// The `zoom` approach generates less CSS but does not validate.
|
||||||
// Set this to `block` to use the display-property to hack the
|
// Set this to `block` to use the display-property to hack the
|
||||||
// element to gain layout.
|
// element to gain layout.
|
||||||
@ -7,6 +9,7 @@ $default-has-layout-approach: zoom !default;
|
|||||||
// to gain the "hasLayout" property in internet explorer.
|
// to gain the "hasLayout" property in internet explorer.
|
||||||
// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
|
// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
|
||||||
@mixin has-layout($using: $default-has-layout-approach) {
|
@mixin has-layout($using: $default-has-layout-approach) {
|
||||||
|
@if $legacy-support-for-ie {
|
||||||
@if $using == zoom {
|
@if $using == zoom {
|
||||||
@include has-layout-zoom;
|
@include has-layout-zoom;
|
||||||
} @else if $using == block {
|
} @else if $using == block {
|
||||||
@ -16,20 +19,28 @@ $default-has-layout-approach: zoom !default;
|
|||||||
@include has-layout-zoom;
|
@include has-layout-zoom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@mixin has-layout-zoom {
|
@mixin has-layout-zoom {
|
||||||
|
@if $legacy-support-for-ie {
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@mixin has-layout-block {
|
@mixin has-layout-block {
|
||||||
|
@if $legacy-support-for-ie {
|
||||||
// This makes ie6 get layout
|
// This makes ie6 get layout
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
// and this puts it back to block
|
// and this puts it back to block
|
||||||
& { display: block; }
|
& { display: block; }
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// A hack to supply IE6 (and below) with a different property value.
|
// A hack to supply IE6 (and below) with a different property value.
|
||||||
// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
|
// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
|
||||||
@mixin bang-hack($property, $value, $ie6-value) {
|
@mixin bang-hack($property, $value, $ie6-value) {
|
||||||
|
@if $legacy-support-for-ie6 {
|
||||||
#{$property}: #{$value} !important;
|
#{$property}: #{$value} !important;
|
||||||
#{$property}: #{$ie6-value}; }
|
#{$property}: #{$ie6-value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user