[Compass Core] [CSS3] Refactored the css3 modules to share a common implementation for experimental css3 properties.

CHANGELOG.markdown

@@ -3,7 +3,15 @@ COMPASS CHANGELOG
 
 0.10.0.rc4 (Unreleased)
 -----------------------
-* The `unobtrusive-logo` mixin is deprecated and will be removed. If you use this, please move the source to your project.
+* The `unobtrusive-logo` mixin is deprecated and will be removed.
+  If you use this, please move the source to your project.
+* The CSS3 modules were refactored to share a common implementation that
+  abstracts the browser prefixes that are supported and gives
+  greater control to the user over which prefixes are generated.
+  Depending on what mixins you were using you might see some changes to
+  what prefixes get generated by default and the order that they are
+  emitted. The goal of this change is to provide a more future-proof
+  implementation.
 
 0.10.0.rc3 (April 13, 2010)
 ---------------------------

doc-src/content/reference/compass/css3.haml

@@ -13,4 +13,9 @@ layout: core
 ---
 - render 'reference' do
   %p
-    The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example <code id="border-radius">border-radius</code> and <code id="text-shadow">text-shadow</code>.
+    The CSS3 module provides cross-browser mixins for CSS properties
+    introduced in CSS3, for example <code id="border-radius">border-radius</code>
+    and <code id="text-shadow">text-shadow</code>.
+  %p
+    What rendering engines you support for the experimental css properties is governed by
+    the configurable variables defined in <a href="/docs/reference/compass/css3/shared/">the css3 shared module</a>.

doc-src/content/reference/compass/css3/shared.haml

@@ -0,0 +1,17 @@
+--- 
+title: Compass Shared Utilities
+crumb: Shared CSS Utilities
+framework: compass
+stylesheet: compass/css3/_shared.scss
+layout: core
+classnames:
+  - reference
+  - core
+  - css3
+---
+- render 'reference' do
+  %p
+    This module provides support to the other CSS3 modules.
+    You may want to use it to provide your own support for other
+    CSS3 proposals as they are being worked on and before support
+    is added to compass.

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

@@ -1,4 +1,5 @@
-//
+@import "shared";
+
 // The default value is `padding-box` -- the box model used by modern browsers.
 //
 // If you wish to do so, you can override the default constant with `border-box`
@@ -19,6 +20,21 @@ $default-background-clip: padding-box !default;
   // webkit and mozilla use the deprecated short [border | padding]
   $deprecated: padding;
   @if $clip == border-box { $deprecated: border; }
-  background-clip: $clip;
-  -webkit-background-clip: $deprecated;
-  -moz-background-clip: $deprecated; }
+  // 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
+  );
+  @include experimental(background-clip, $clip,
+    false, // mozilla
+    false, // webkit
+    $experimental-support-for-opera,
+    $experimental-support-for-microsoft,
+    $experimental-support-for-khtml,
+    true // official
+  );
+}

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

@@ -1,5 +1,7 @@
 // Override `$default-background-origin` to change the default.
 
+@import "shared";
+
 $default-background-origin: content-box !default;
 
 // Position the background off the edge of the padding, border or content
@@ -14,11 +16,26 @@ $default-background-origin: content-box !default;
 
 @mixin background-origin($origin: $default-background-origin) {
   // webkit and mozilla use the deprecated short [border | padding | content]
-  $deprecated: padding;
+  $deprecated: $origin;
+  @if $origin == padding-box { $deprecated: padding; }
   @if $origin == border-box  { $deprecated: border;  }
   @if $origin == content-box { $deprecated: content; }
 
-          background-origin: $origin;
-  -webkit-background-origin: $deprecated;
-     -moz-background-origin: $deprecated;
+  // 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
+  );
+  @include experimental(background-origin, $origin,
+    false, // mozilla
+    false, // webkit
+    $experimental-support-for-opera,
+    $experimental-support-for-microsoft,
+    $experimental-support-for-khtml,
+    true // official
+  );
 }

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

@@ -1,15 +1,13 @@
-// Set the size of background images using px, width and height, or percentages. Supported in: Opera, Gecko, Webkit.
-//
-// * percentages are relative to the background-origin (default = padding-box)
-// * mixin defaults to "100% auto"
+@import "shared";
 
-//  override constants to change defaults
+//  override to change the default
 $default-background-size: 100% auto !default;
 
+// Set the size of background images using px, width and height, or percentages.
+// Currently supported in: Opera, Gecko, Webkit.
+//
+// * percentages are relative to the background-origin (default = padding-box)
+// * mixin defaults to: `$default-background-size`
 @mixin background-size($size: $default-background-size) {
-          background-size: $size;
-  -webkit-background-size: $size;
-       -o-background-size: $size;
-   -khtml-background-size: $size;
-     -moz-background-size: $size;
+  @include experimental(background-size, $size);
 }

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

@@ -1,58 +1,78 @@
+@import "shared";
+
 $default-border-radius: 5px !default;
 
-// Round all borders by a specific amount, defaults to value of $default-border-radius
+// Round all corners by a specific amount, defaults to value of `$default-border-radius`.
 
 @mixin border-radius($radius: $default-border-radius) {
-  border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius; }
+  @include experimental(border-radius, $radius);
+}
 
 // Round radius at position by amount.
 //
-// * values for $vert: "top", "bottom"
-// * values for $horz: "left", "right"
+// * legal values for `$vert`: `top`, `bottom`
+// * legal values for `$horz`: `left`, `right`
 
 @mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
   border-#{$vert}-#{$horz}-radius: $radius;
   -moz-border-radius-#{$vert}#{$horz}: $radius;
-  -webkit-border-#{$vert}-#{$horz}-radius: $radius; }
+  -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
+  );
+  @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
+  );
   
-// Round top-left radius only
+}
+
+// Round top-left corner only
 
 @mixin border-top-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, left, $radius); }
 
-// Round top-right radius only
+// Round top-right corner only
 
 @mixin border-top-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, right, $radius); }
 
-// Round bottom-left radius only
+// Round bottom-left corner only
 
 @mixin border-bottom-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, left, $radius); }
 
-// Round bottom-right radius only
+// Round bottom-right corner only
 
 @mixin border-bottom-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, right, $radius); }
 
-// Round top corners by amount
+// Round both top corners by amount
 @mixin border-top-radius($radius: $default-border-radius) {
   @include border-top-left-radius($radius);
   @include border-top-right-radius($radius); }
 
-// Round right corners by amount
+// Round both right corners by amount
 @mixin border-right-radius($radius: $default-border-radius) {
   @include border-top-right-radius($radius);
   @include border-bottom-right-radius($radius); }
 
-// Round bottom corners by amount
+// Round both bottom corners by amount
 @mixin border-bottom-radius($radius: $default-border-radius) {
   @include border-bottom-left-radius($radius);
   @include border-bottom-right-radius($radius); }
 
-// Round left corners by amount
+// Round both left corners by amount
 @mixin border-left-radius($radius: $default-border-radius) {
   @include border-top-left-radius($radius);
   @include border-bottom-left-radius($radius); }

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

@@ -3,6 +3,8 @@
 // If you like, set different defaults before importing.
 // @doc on
 
+@import "shared";
+
 // The default color for box shadows
 $default-box-shadow-color: #333333 !default;
 
@@ -18,10 +20,11 @@ $default-box-shadow-blur: 5px !default;
 // Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
 // Arguments are color, horizontal offset, vertical offset, and blur length.
 
-@mixin box-shadow($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur) {
-  /* Webkit (Safari, Chrome) */
-  -webkit-box-shadow: $color $hoff $voff $blur;
-  /* Gecko (Firefox, Camino) */
-  -moz-box-shadow: $color $hoff $voff $blur;
-  /* CSS3 */
-  box-shadow: $color $hoff $voff $blur; }
+@mixin box-shadow(
+  $color: $default-box-shadow-color,
+  $hoff: $default-box-shadow-h-offset,
+  $voff: $default-box-shadow-v-offset,
+  $blur: $default-box-shadow-blur
+) {
+  @include experimental(box-shadow, $color $hoff $voff $blur);
+}

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

@@ -1,14 +1,10 @@
+@import "shared";
+
 // Change the box model for Mozilla, Webkit, IE8 and the future
 //
 // @param $bs
 //   [ content-box | border-box ]
 
 @mixin box-sizing($bs) {
-  /* Mozilla (FireFox, Camino) */
-  -moz-box-sizing: $bs;
-  /* Webkit (Safari, Chrome) */
-  -webkit-box-sizing: $bs;
-  /* IE (8) */
-  -ms-box-sizing: $bs;
-  /* CSS3 */
-  box-sizing: $bs; }
+  @include experimental(box-sizing, $bs);
+}

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

@@ -1,50 +1,29 @@
-// Specify the # of columns
+@import "shared";
 
-@mixin column-count($n) {
-  -moz-column-count: $n;
-  -webkit-column-count: $n;
-  column-count: $n; }
+// Specify the number of columns
+@mixin column-count($n) { @include experimental(column-count, $n); }
 
-// Specify the gap between columns e.g. 20px
+// Specify the gap between columns e.g. `20px`
+@mixin column-gap($u) { @include experimental(column-gap, $u); }
 
-@mixin column-gap($u) {
-  -moz-column-gap: $u;
-  -webkit-column-gap: $u;
-  column-gap: $u; }
+// Specify the width of columns e.g. `100px`
+@mixin column-width($u) { @include experimental(column-width, $u); }
 
-// Specify the width of columns e.g. 100px
+// Specify the width of the rule between columns e.g. `1px`
+@mixin column-rule-width($w) { @include experimental(rule-width, $w); }
 
-@mixin column-width($u) {
-  -moz-column-width: $u;
-  -webkit-column-width: $u;
-  column-width: $u; }
+// 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); }
 
-// Specify the width of the rule between columns e.g. 1px
+// Specify the style of the rule between columns e.g. `dotted`.
+// This works like border-color.
 
-@mixin column-rule-width($w) {
-  -moz-column-rule-width: $w;
-  -webkit-column-rule-width: $w;
-  column-rule-width: $w; }
-
-// Specify the style of the rule between columns e.g. 'dotted'. This works like border-style.
-
-@mixin column-rule-style($s) {
-  -moz-column-rule-style: $s;
-  -webkit-column-rule-style: $s;
-  column-rule-style: $s; }
-
-// Specify the style of the rule between columns e.g. 'dotted'. This works like border-color.
-
-@mixin column-rule-color($c) {
-  -moz-column-rule-color: $c;
-  -webkit-column-rule-color: $c;
-  column-rule-color: $c; }
+@mixin column-rule-color($c) { @include experimental(rule-color, $s); }
 
 // Mixin encompassing all column rule rules
 // For example:
-//     +column-rule('1px', 'solid', '#000')
-
-@mixin column-rule($w, $s: solid, $c: unquote(" ")) {
-  @include column-rule-width($w);
-  @include column-rule-style($s);
-  @include column-rule-color($c); }
+//     +column-rule(1px, solid, #c00)
+@mixin column-rule($w, $s: solid, $c: black) {
+  @include experimental(column-rule, $w $s $c);
+}

frameworks/compass/stylesheets/compass/css3/_font-face.scss

@@ -1,3 +1,5 @@
+@import "shared";
+
 // Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
 //
 // * $name is required, arbitrary, and what you will use in font stacks.

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

@@ -1,3 +1,5 @@
+@import "shared";
+
 // This yields a linear gradient spanning from top to bottom
 //
 //     +linear-gradient(color-stops(white, black))

frameworks/compass/stylesheets/compass/css3/_inline-block.scss

@@ -1,13 +1,12 @@
+@import "shared";
+
 // Provides a cross-browser method to implement `display: inline-block;`
-//
-// This file is a sass file to work around the fact that the
-// SCSS parser does not support the #prop hack at this time.
-// http://github.com/nex3/haml/issues/issue/119
 
 @mixin inline-block {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: middle;
-  #display: inline;
-  #vertical-align: auto; }
+  *display: inline;
+  *vertical-align: auto;
+}

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

@@ -1,19 +1,25 @@
+@import "shared";
+
 // Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
 //
 //     @param $opacity
 //         A number between 0 and 1, where 0 is transparent and 1 is opaque.
 
 @mixin opacity($opacity) {
-  opacity: $opacity;
-  -moz-opacity: $opacity;
-  -khtml-opacity: $opacity;
-  -ms-filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=") + round($opacity * 100) + unquote(")");
-  filter: unquote("alpha(opacity=") + round($opacity * 100) + unquote(")"); }
+  @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
+  );
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)});
+}
 
 // Make an element completely transparent.
-@mixin transparent {
-  @include opacity(0); }
+@mixin transparent { @include opacity(0); }
 
 // Make an element completely opaque.
-@mixin opaque {
-  @include opacity(1); }
+@mixin opaque { @include opacity(1); }

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

@@ -0,0 +1,30 @@
+// 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     : false !default;
+// Support for microsoft in experimental css3 properties.
+$experimental-support-for-microsoft : false !default;
+// Support for khtml in experimental css3 properties.
+$experimental-support-for-khtml     : false !default;
+
+// This mixin provides basic support for CSS3 properties and
+// their corresponding experimental CSS2 properties when
+// the implementations are identical except for the property
+// prefix.
+@mixin experimental($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $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 $official {         #{$property} : $value; }
+}

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

@@ -1,3 +1,5 @@
+@import "shared";
+
 // Provides CSS text shadows.
 //
 // Arguments are color, horizontal offset, vertical offset, and blur
@@ -14,5 +16,11 @@ $default-text-shadow-v-offset: 1px !default;
 
 $default-text-shadow-blur: 1px !default;
 
-@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) {
-  text-shadow: $color $hoff $voff $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
+) {
+  text-shadow: $color $hoff $voff $blur;
+}

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

@@ -1,18 +1,18 @@
+@import "shared";
+
 // CSS Transform and Transform-Origin
 
 // Apply a transform sent as a complete string.
 
-@mixin apply-transform($transform: false) {
-  transform: $transform;
-  -webkit-transform: $transform;
-  -moz-transform: $transform; }
+@mixin apply-transform($transform) {
+  @include experimental(transform, $transform);
+}
 
 // Apply a transform-origin sent as a complete string.
 
-@mixin apply-origin($origin: false) {
-  transform-origin: $origin;
-  -webkit-transform-origin: $origin;
-  -moz-transform-origin: $origin; }
+@mixin apply-origin($origin) {
+  @include experimental(transform-origin, $origin);
+}
 
 // transform-origin requires x and y coordinates
 //
@@ -23,7 +23,10 @@
     @if $originy {
        @include apply-origin($originx or 50% $originy);
      } @else {
-       @include apply-origin($originx); } } } 
+       @include apply-origin($originx);
+     }
+  }
+} 
 
 // A full transform mixin with everything you could want
 //
@@ -31,10 +34,20 @@
 // * scale, rotate and skew require units of degrees(deg)
 // * scale takes a multiplier, rotate and skew take degrees
 
-@mixin transform($scale: 1, $rotate: 0deg, $transx: 0, $transy: 0, $skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
+@mixin transform(
+  $scale: 1,
+  $rotate: 0deg,
+  $transx: 0,
+  $transy: 0,
+  $skewx: 0deg,
+  $skewy: 0deg,
+  $originx: false,
+  $originy: false
+) {
   $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
   @include apply-transform($transform);
-    @include transform-origin($originx, $originy); }
+  @include transform-origin($originx, $originy);
+}
 
 // Transform Partials
 //
@@ -45,20 +58,24 @@
 
 @mixin scale($scale: 1.25, $originx: false, $originy: false) {
   @include apply-transform(scale($scale));
-  @include transform-origin($originx, $originy); }
+  @include transform-origin($originx, $originy);
+}
 
 // Adjust only the rotation, with optional origin coordinates
 
 @mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
   @include apply-transform(rotate($rotate));
-  @include transform-origin($originx, $originy); }
+  @include transform-origin($originx, $originy);
+}
 
 // Adjust only the translation
 
 @mixin translate($transx: 0, $transy: 0) {
-  @include apply-transform(translate($transx, $transy)); }
+  @include apply-transform(translate($transx, $transy));
+}
 
 // Adjust only the skew, with optional origin coordinates
 @mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
   @include apply-transform(skew($skewx, $skewy));
-  @include transform-origin($originx, $originy); }
+  @include transform-origin($originx, $originy);
+}

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

@@ -1,3 +1,5 @@
+@import "shared";
+
 // CSS Transitions
 // Currently only works in Webkit.
 //
@@ -27,10 +29,8 @@ $default-transition-delay: false !default;
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  transition-property: $properties;
-  -webkit-transition-property: $properties;
-  -moz-transition-property: $properties;
-  -o-transition-property: $properties; }
+  @include experimental(transition-property, $properties);
+}
 
 // One or more durations in seconds
 //
@@ -38,10 +38,8 @@ $default-transition-delay: false !default;
 // * these durations will affect the properties in the same list position
 
 @mixin transition-duration($duration: $default-transition-duration) {
-  transition-duration: $duration;
-  -webkit-transition-duration: $duration;
-  -moz-transition-duration: $duration;
-  -o-transition-duration: $duration; }
+  @include experimental(transition-duration, $duration);
+}
 
 // One or more timing functions
 //
@@ -50,10 +48,8 @@ $default-transition-delay: false !default;
 // * These functions will effect the properties in the same list position
 
 @mixin transition-timing-function($function: $default-transition-function) {
-  transition-timing-function: $function;
-  -webkit-transition-timing-function: $function;
-  -moz-transition-timing-function: $function;
-  -o-transition-timing-function: $function; }
+  @include experimental(transition-timing-function, $function);
+}
 
 // One or more transition-delays in seconds
 //
@@ -61,17 +57,19 @@ $default-transition-delay: false !default;
 // * these delays will effect the properties in the same list position
 
 @mixin transition-delay($delay: $default-transition-delay) {
-  transition-delay: $delay;
-  -webkit-transition-delay: $delay;
-  -moz-transition-delay: $delay;
-  -o-transition-delay: $delay; }
+  @include experimental(transition-delay, $delay);
+}
 
 // Transition all-in-one shorthand
 
-@mixin transition($properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
+@mixin transition(
+  $properties: $default-transition-property,
+  $duration: $default-transition-duration,
+  $function: $default-transition-function,
+  $delay: $default-transition-delay
+) {
   @include transition-property($properties);
   @include transition-duration($duration);
-  @if $function {
-    @include transition-timing-function($function); }
-  @if $delay {
-    @include transition-delay($delay); } }
+  @if $function { @include transition-timing-function($function); }
+  @if $delay { @include transition-delay($delay); }
+}