github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow users to disable the hacks surrounding IE6&7 by disabling legacy support for IE.

Browse Source
This commit is contained in:
Chris Eppstein 2010-10-11 03:51:28 -07:00
parent 00fe77715a
commit 60fc4b79ce
4 changed files with 58 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frameworks/compass/stylesheets/compass/_support.scss Normal file
View 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;

8
frameworks/compass/stylesheets/compass/css3/_inline-block.scss
View File

@ -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;
}
} }

11
frameworks/compass/stylesheets/compass/css3/_shared.scss
View File

@ -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

39
frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss
View File

@ -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,29 +9,38 @@ $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 $using == zoom { @if $legacy-support-for-ie {
@include has-layout-zoom; @if $using == zoom {
} @else if $using == block { @include has-layout-zoom;
@include has-layout-block; } @else if $using == block {
} @else { @include has-layout-block;
@warn "Unknown has-layout approach: #{$using}"; } @else {
@include has-layout-zoom; @warn "Unknown has-layout approach: #{$using}";
@include has-layout-zoom;
}
} }
} }
@mixin has-layout-zoom { @mixin has-layout-zoom {
*zoom: 1; @if $legacy-support-for-ie {
*zoom: 1;
}
} }
@mixin has-layout-block { @mixin has-layout-block {
// This makes ie6 get layout @if $legacy-support-for-ie {
display: inline-block; // This makes ie6 get layout
// and this puts it back to block display: inline-block;
& { display: block; } // and this puts it back to 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) {
#{$property}: #{$value} !important; @if $legacy-support-for-ie6 {
#{$property}: #{$ie6-value}; } #{$property}: #{$value} !important;
#{$property}: #{$ie6-value};
}
}