[Compass Core] [CSS3] Support all browsers where css3 support exists, but allow users to turn them off if they don't want to support them.

frameworks/compass/stylesheets/compass/css3/_background-clip.scss

@@ -24,19 +24,19 @@ $default-background-clip: padding-box !default;
   @if $clip == border-box { $deprecated: border; }
   // Support for webkit and mozilla's use of the deprecated short form
   @include experimental(background-clip, $deprecated,
-    $experimental-support-for-mozilla,
-    $experimental-support-for-webkit,
-    false, // opera
-    false, // microsoft
-    false, // khtml
-    false  // official
+    -moz,
+    -webkit,
+    not -o,
+    not -ms,
+    not -khtml,
+    not official
   );
   @include experimental(background-clip, $clip,
-    false, // mozilla
-    false, // webkit
-    $experimental-support-for-opera,
-    $experimental-support-for-microsoft,
-    $experimental-support-for-khtml,
-    true // official
+    not -moz,
+    not -webkit,
+    -o,
+    -ms,
+    -khtml,
+    official
   );
 }

frameworks/compass/stylesheets/compass/css3/_background-origin.scss

@@ -23,19 +23,19 @@ $default-background-origin: content-box !default;
 
   // Support for webkit and mozilla's use of the deprecated short form
   @include experimental(background-origin, $deprecated,
-    $experimental-support-for-mozilla,
-    $experimental-support-for-webkit,
-    false, // opera
-    false, // microsoft
-    false, // khtml
-    false  // official
+    -moz,
+    -webkit,
+    not -o,
+    not -ms,
+    not -khtml,
+    not official
   );
   @include experimental(background-origin, $origin,
-    false, // mozilla
-    false, // webkit
-    $experimental-support-for-opera,
-    $experimental-support-for-microsoft,
-    $experimental-support-for-khtml,
-    true // official
+    not -moz,
+    not -webkit,
+    -o,
+    -ms,
+    -khtml,
+    official
   );
 }

frameworks/compass/stylesheets/compass/css3/_background-size.scss

@@ -9,5 +9,5 @@ $default-background-size: 100% auto !default;
 // * percentages are relative to the background-origin (default = padding-box)
 // * mixin defaults to: `$default-background-size`
 @mixin background-size($size: $default-background-size) {
-  @include experimental(background-size, $size);
+  @include experimental(background-size, $size, -moz, -webkit, -o, not -ms, not -khtml);
 }

frameworks/compass/stylesheets/compass/css3/_border-radius.scss

@@ -19,20 +19,20 @@ $default-border-radius: 5px !default;
   -webkit-border-#{$vert}-#{$horz}-radius: $radius;
   // Support for mozilla's syntax for specifying a corner
   @include experimental("border-radius-#{$vert}#{$horz}", $radius,
-    $experimental-support-for-mozilla,
-    false, // webkit
-    false, // opera
-    false, // microsoft
-    false, // khtml
-    false  // official
+    -moz,
+    not -webkit,
+    not -o,
+    not -ms,
+    not -khtml,
+    not official
   );
   @include experimental("border-#{$vert}-#{$horz}-radius", $radius,
-    false, // mozilla
-    $experimental-support-for-webkit,
-    $experimental-support-for-opera,
-    $experimental-support-for-microsoft,
-    $experimental-support-for-khtml,
-    true // official
+    not -moz,
+    -webkit,
+    -o,
+    -ms,
+    -khtml,
+    official
   );
   
 }

frameworks/compass/stylesheets/compass/css3/_box-shadow.scss

@@ -27,8 +27,12 @@ $default-box-shadow-blur: 5px !default;
   $blur: $default-box-shadow-blur
 ) {
   @if $color == none {
-    @include experimental(box-shadow, none);
+    @include experimental(box-shadow, none,
+      -moz, -webkit, -o, not -ms, not -khtml, official
+    );
   } @else {
-    @include experimental(box-shadow, $color $hoff $voff $blur);
+    @include experimental(box-shadow, $color $hoff $voff $blur,
+      -moz, -webkit, -o, not -ms, not -khtml, official
+    );
   }
 }

frameworks/compass/stylesheets/compass/css3/_box-sizing.scss

@@ -6,5 +6,7 @@
 //   [ content-box | border-box ]
 
 @mixin box-sizing($bs) {
-  @include experimental(box-sizing, $bs);
+  @include experimental(box-sizing, $bs,
+    -moz, -webkit, not -o, -ms, not -khtml, official
+  );
 }

frameworks/compass/stylesheets/compass/css3/_box.scss

@@ -2,7 +2,9 @@
 
 // display:box; must be used for any of the other flexbox mixins to work properly
 @mixin display-box {
-  @include experimental-value(display,box);
+  @include experimental-value(display, box,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }
 
 // Default box orientation, assuming that the user wants something less block-like
@@ -12,7 +14,9 @@ $default-box-orient: horizontal !default;
 @mixin box-orient(
   $orientation: $default-box-orient
 ) {
-  @include experimental(box-orient, $orientation);
+  @include experimental(box-orient, $orientation,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }
 
 // Default box-align
@@ -22,7 +26,9 @@ $default-box-align: stretch !default;
 @mixin box-align(
   $alignment: $default-box-align
 ) {
-  @include experimental(box-align, $alignment);
+  @include experimental(box-align, $alignment,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }
 
 // Default box flex
@@ -34,7 +40,9 @@ $default-box-flex: 0 !default;
 @mixin box-flex(
   $flex: $default-box-flex
 ) {
-  @include experimental(box-flex, $flex);
+  @include experimental(box-flex, $flex,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
   display: block;
 }
 
@@ -45,7 +53,9 @@ $default-box-flex-group: 1 !default;
 @mixin box-flex-group(
   $group: $default-box-flex-group
 ) {
-  @include experimental(box-flex-group, $group);
+  @include experimental(box-flex-group, $group,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }
 
 // default for ordinal group
@@ -55,7 +65,9 @@ $default-box-ordinal-group: 1 !default;
 @mixin box-ordinal-group(
   $group: $default-ordinal-flex-group
 ) {
-  @include experimental(box-ordinal-group, $group);
+  @include experimental(box-ordinal-group, $group,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }
 
 // Box direction default value
@@ -65,7 +77,9 @@ $default-box-direction: normal !default;
 @mixin box-direction(
   $direction: $default-box-direction
 ) {
-  @include experimental(box-direction, $direction);
+  @include experimental(box-direction, $direction,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }
 
 // default for box lines
@@ -75,7 +89,9 @@ $default-box-lines: single !default;
 @mixin box-lines(
   $lines: $default-box-lines
 ) {
-  @include experimental(box-lines, $lines);
+  @include experimental(box-lines, $lines,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }
 
 // default for box pack
@@ -85,5 +101,7 @@ $default-box-pack: start !default;
 @mixin box-pack(
   $pack: $default-box-pack
 ) {
-  @include experimental(box-pack, $pack);
+  @include experimental(box-pack, $pack,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
 }

frameworks/compass/stylesheets/compass/css3/_columns.scss

@@ -1,29 +1,55 @@
 @import "shared";
 
 // Specify the number of columns
-@mixin column-count($n) { @include experimental(column-count, $n); }
+@mixin column-count($n) {
+  @include experimental(column-count, $n,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the gap between columns e.g. `20px`
-@mixin column-gap($u) { @include experimental(column-gap, $u); }
+@mixin column-gap($u) {
+  @include experimental(column-gap, $u,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the width of columns e.g. `100px`
-@mixin column-width($u) { @include experimental(column-width, $u); }
+@mixin column-width($u) {
+  @include experimental(column-width, $u,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the width of the rule between columns e.g. `1px`
-@mixin column-rule-width($w) { @include experimental(rule-width, $w); }
+@mixin column-rule-width($w) {
+  @include experimental(rule-width, $w,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-style.
-@mixin column-rule-style($s) { @include experimental(rule-style, $s); }
+@mixin column-rule-style($s) {
+  @include experimental(rule-style, $s,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-color.
 
-@mixin column-rule-color($c) { @include experimental(rule-color, $s); }
+@mixin column-rule-color($c) {
+  @include experimental(rule-color, $s,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Mixin encompassing all column rule rules
 // For example:
 //     +column-rule(1px, solid, #c00)
 @mixin column-rule($w, $s: solid, $c: black) {
-  @include experimental(column-rule, $w $s $c);
+  @include experimental(column-rule, $w $s $c,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }

frameworks/compass/stylesheets/compass/css3/_gradient.scss

@@ -32,8 +32,13 @@
   // Firefox's gradient api is nice.
   // Webkit's gradient api sucks -- hence these backflips:
   $end: grad-opposite-position($start);
+  @if $experimental-support-for-webkit {
     background-image: -webkit-gradient(linear, #{grad-point($start)}, #{grad-point($end)}, #{grad-color-stops($color-stops)});
-  background-image: -moz-linear-gradient(#{$start}, #{$color-stops}); }
+  }
+  @include experimental-value(background-image, linear-gradient(#{$start}, #{$color-stops}),
+    -moz, not -webkit, not -o, not -ms, not -khtml, not official
+  )
+}
 
 // Due to limitation's of webkit, the radial gradient mixin works best if you use
 // pixel-based color stops.
@@ -55,5 +60,10 @@
 
 @mixin radial-gradient($color-stops, $center-position: unquote("center center")) {
   $end-pos: grad-end-position($color-stops, true);
+  @if $experimental-support-for-webkit {
     background-image: -webkit-gradient(radial, #{grad-point($center-position)}, 0, #{grad-point($center-position)}, #{$end-pos}, #{grad-color-stops($color-stops)});
-  background-image: -moz-radial-gradient(#{$center-position}, circle, #{$color-stops}); }
+  }
+  @include experimental-value(background-image, radial-gradient(#{$center-position}, circle, #{$color-stops}),
+    -moz, not -webkit, not -o, not -ms, not -khtml, not official
+  )
+}

frameworks/compass/stylesheets/compass/css3/_opacity.scss

@@ -6,16 +6,26 @@
 //         A number between 0 and 1, where 0 is transparent and 1 is opaque.
 
 @mixin opacity($opacity) {
+  // XXX consider only using the official property. I think -moz, -webkit, and -o support it.
   @include experimental(opacity, $opacity,
-    $experimental-support-for-mozilla,
-    $experimental-support-for-webkit,
-    $experimental-support-for-opera,
-    false, // microsoft uses filters below instead
-    $experimental-support-for-khtml,
-    true // official
+    -moz,
+    -webkit,
+    -o,
+    not -ms, // microsoft uses the filters below instead
+    -khtml,
+    official
   );
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})";
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)});
+  @if $experimental-support-for-microsoft {
+    $value: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
+    @include experimental(filter, $value,
+      not -moz,
+      not -webkit,
+      not -o,
+      -ms,
+      not -khtml,
+      official // even though filter is not an official css3 property, IE 6/7 expect it.
+    );
+  }
 }
 
 // Make an element completely transparent.

frameworks/compass/stylesheets/compass/css3/_shared.scss

@@ -3,11 +3,11 @@ $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     : false !default;
+$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     : false !default;
+$experimental-support-for-khtml     : true !default;
 
 // This mixin provides basic support for CSS3 properties and
 // their corresponding experimental CSS2 properties when
@@ -21,11 +21,11 @@ $experimental-support-for-khtml     : false !default;
   $khtml    : $experimental-support-for-khtml,
   $official : true
 ) {
-  @if $moz      {    -moz-#{$property} : $value; }
-  @if $webkit   { -webkit-#{$property} : $value; }
-  @if $o        {      -o-#{$property} : $value; }
-  @if $ms       {     -ms-#{$property} : $value; }
-  @if $khtml    {  -khtml-#{$property} : $value; }
+  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
+  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
+  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
+  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
+  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
   @if $official                                        {         #{$property} : $value; }
 }
 
@@ -38,10 +38,10 @@ $experimental-support-for-khtml     : false !default;
   $khtml    : $experimental-support-for-khtml,
   $official : true
 ) {
-  @if $moz      { #{$property} :    -moz-#{$value}; }
-  @if $webkit   { #{$property} : -webkit-#{$value}; }
-  @if $o        { #{$property} :      -o-#{$value}; }
-  @if $ms       { #{$property} :     -ms-#{$value}; }
-  @if $khtml    { #{$property} :  -khtml-#{$value}; }
+  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
+  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
+  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
+  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
+  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
   @if $official                                        { #{$property} :         #{$value}; }
 }

frameworks/compass/stylesheets/compass/css3/_text-shadow.scss

@@ -1,26 +1,25 @@
 @import "shared";
 
-// Provides CSS text shadows.
-//
-// Arguments are color, horizontal offset, vertical offset, and blur
-
 // These defaults make the arguments optional for this mixin
-//
 // If you like, set different defaults in your project
 
-$default-text-shadow-color: #aaaaaa !default;
-
+$default-text-shadow-color:    #aaa !default;
 $default-text-shadow-h-offset: 1px  !default;
-
 $default-text-shadow-v-offset: 1px  !default;
-
 $default-text-shadow-blur:     1px  !default;
 
+// Provides CSS text shadows.
+// Arguments are color, horizontal offset, vertical offset, and blur
 @mixin text-shadow(
   $color: $default-text-shadow-color,
   $hoff: $default-text-shadow-h-offset,
   $voff: $default-text-shadow-v-offset,
   $blur: $default-text-shadow-blur
 ) {
+  // XXX I'm surprised we don't need experimental support for this property.
+  @if $color == none {
+    text-shadow: none;
+  } @else {
     text-shadow: $color $hoff $voff $blur;    
   }
+}

frameworks/compass/stylesheets/compass/css3/_transform.scss

@@ -5,13 +5,17 @@
 // Apply a transform sent as a complete string.
 
 @mixin apply-transform($transform) {
-  @include experimental(transform, $transform);
+  @include experimental(transform, $transform,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // Apply a transform-origin sent as a complete string.
 
 @mixin apply-origin($origin) {
-  @include experimental(transform-origin, $origin);
+  @include experimental(transform-origin, $origin,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // transform-origin requires x and y coordinates

frameworks/compass/stylesheets/compass/css3/_transition.scss

@@ -29,7 +29,9 @@ $default-transition-delay: false !default;
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  @include experimental(transition-property, $properties);
+  @include experimental(transition-property, $properties,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // One or more durations in seconds
@@ -38,7 +40,9 @@ $default-transition-delay: false !default;
 // * these durations will affect the properties in the same list position
 
 @mixin transition-duration($duration: $default-transition-duration) {
-  @include experimental(transition-duration, $duration);
+  @include experimental(transition-duration, $duration,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // One or more timing functions
@@ -48,7 +52,9 @@ $default-transition-delay: false !default;
 // * These functions will effect the properties in the same list position
 
 @mixin transition-timing-function($function: $default-transition-function) {
-  @include experimental(transition-timing-function, $function);
+  @include experimental(transition-timing-function, $function,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // One or more transition-delays in seconds
@@ -57,7 +63,9 @@ $default-transition-delay: false !default;
 // * these delays will effect the properties in the same list position
 
 @mixin transition-delay($delay: $default-transition-delay) {
-  @include experimental(transition-delay, $delay);
+  @include experimental(transition-delay, $delay,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // Transition all-in-one shorthand