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

[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.

Browse Source
This commit is contained in:
Chris Eppstein 2010-04-30 05:21:07 -07:00
parent 80d812396a
commit a4eae29f47
14 changed files with 182 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frameworks/compass/stylesheets/compass/css3/_background-clip.scss
View File

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

24
frameworks/compass/stylesheets/compass/css3/_background-origin.scss
View File

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

2
frameworks/compass/stylesheets/compass/css3/_background-size.scss
View File

@ -9,5 +9,5 @@ $default-background-size: 100% auto !default;
// * percentages are relative to the background-origin (default = padding-box) // * percentages are relative to the background-origin (default = padding-box)
// * mixin defaults to: `$default-background-size` // * mixin defaults to: `$default-background-size`
@mixin background-size($size: $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);
} }

24
frameworks/compass/stylesheets/compass/css3/_border-radius.scss
View File

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

8
frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
View File

@ -27,8 +27,12 @@ $default-box-shadow-blur: 5px !default;
$blur: $default-box-shadow-blur $blur: $default-box-shadow-blur
) { ) {
@if $color == none { @if $color == none {
@include experimental(box-shadow, none); @include experimental(box-shadow, none,
-moz, -webkit, -o, not -ms, not -khtml, official
);
} @else { } @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
);
} }
} }

4
frameworks/compass/stylesheets/compass/css3/_box-sizing.scss
View File

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

36
frameworks/compass/stylesheets/compass/css3/_box.scss
View File

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

40
frameworks/compass/stylesheets/compass/css3/_columns.scss
View File

@ -1,29 +1,55 @@
@import "shared"; @import "shared";
// Specify the number of columns // 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` // 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` // 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` // 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`. // Specify the style of the rule between columns e.g. `dotted`.
// This works like border-style. // 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`. // Specify the style of the rule between columns e.g. `dotted`.
// This works like border-color. // 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 // Mixin encompassing all column rule rules
// For example: // For example:
// +column-rule(1px, solid, #c00) // +column-rule(1px, solid, #c00)
@mixin column-rule($w, $s: solid, $c: black) { @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
);
} }

18
frameworks/compass/stylesheets/compass/css3/_gradient.scss
View File

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

26
frameworks/compass/stylesheets/compass/css3/_opacity.scss
View File

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

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

@ -3,11 +3,11 @@ $experimental-support-for-mozilla : true !default;
// Support for webkit in experimental css3 properties. // Support for webkit in experimental css3 properties.
$experimental-support-for-webkit : true !default; $experimental-support-for-webkit : true !default;
// Support for opera in experimental css3 properties. // 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. // Support for microsoft in experimental css3 properties.
$experimental-support-for-microsoft : true !default; $experimental-support-for-microsoft : true !default;
// Support for khtml in experimental css3 properties. // 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 // This mixin provides basic support for CSS3 properties and
// their corresponding experimental CSS2 properties when // their corresponding experimental CSS2 properties when
@ -21,12 +21,12 @@ $experimental-support-for-khtml : false !default;
$khtml : $experimental-support-for-khtml, $khtml : $experimental-support-for-khtml,
$official : true $official : true
) { ) {
@if $moz { -moz-#{$property} : $value; } @if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
@if $webkit { -webkit-#{$property} : $value; } @if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; }
@if $o { -o-#{$property} : $value; } @if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
@if $ms { -ms-#{$property} : $value; } @if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
@if $khtml { -khtml-#{$property} : $value; } @if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; }
@if $official { #{$property} : $value; } @if $official { #{$property} : $value; }
} }
// Same as experimental(), but for cases when the property is the same and the value is vendorized // Same as experimental(), but for cases when the property is the same and the value is vendorized
@ -38,10 +38,10 @@ $experimental-support-for-khtml : false !default;
$khtml : $experimental-support-for-khtml, $khtml : $experimental-support-for-khtml,
$official : true $official : true
) { ) {
@if $moz { #{$property} : -moz-#{$value}; } @if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
@if $webkit { #{$property} : -webkit-#{$value}; } @if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; }
@if $o { #{$property} : -o-#{$value}; } @if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
@if $ms { #{$property} : -ms-#{$value}; } @if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
@if $khtml { #{$property} : -khtml-#{$value}; } @if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; }
@if $official { #{$property} : #{$value}; } @if $official { #{$property} : #{$value}; }
} }

25
frameworks/compass/stylesheets/compass/css3/_text-shadow.scss
View File

@ -1,26 +1,25 @@
@import "shared"; @import "shared";
// Provides CSS text shadows.
//
// Arguments are color, horizontal offset, vertical offset, and blur
// These defaults make the arguments optional for this mixin // These defaults make the arguments optional for this mixin
//
// If you like, set different defaults in your project // 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-h-offset: 1px !default; $default-text-shadow-v-offset: 1px !default;
$default-text-shadow-blur: 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( @mixin text-shadow(
$color: $default-text-shadow-color, $color: $default-text-shadow-color,
$hoff: $default-text-shadow-h-offset, $hoff: $default-text-shadow-h-offset,
$voff: $default-text-shadow-v-offset, $voff: $default-text-shadow-v-offset,
$blur: $default-text-shadow-blur $blur: $default-text-shadow-blur
) { ) {
text-shadow: $color $hoff $voff $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;
}
} }

8
frameworks/compass/stylesheets/compass/css3/_transform.scss
View File

@ -5,13 +5,17 @@
// Apply a transform sent as a complete string. // Apply a transform sent as a complete string.
@mixin apply-transform($transform) { @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. // Apply a transform-origin sent as a complete string.
@mixin apply-origin($origin) { @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 // transform-origin requires x and y coordinates

16
frameworks/compass/stylesheets/compass/css3/_transition.scss
View File

@ -29,7 +29,9 @@ $default-transition-delay: false !default;
// * also accepts "all" or "none" // * also accepts "all" or "none"
@mixin transition-property($properties: $default-transition-property) { @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 // 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 // * these durations will affect the properties in the same list position
@mixin transition-duration($duration: $default-transition-duration) { @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 // 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 // * These functions will effect the properties in the same list position
@mixin transition-timing-function($function: $default-transition-function) { @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 // 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 // * these delays will effect the properties in the same list position
@mixin transition-delay($delay: $default-transition-delay) { @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 // Transition all-in-one shorthand