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;`
@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
frameworks/compass/stylesheets/compass/css3/_shared.scss
View File

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

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.
// 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};
}
}