Remove the css3 background simple bg support and move it to a new mixin called background-with-css2-fallback.
This commit is contained in:
parent
d2b4ec423f
commit
0eef08e6ce
@ -17,6 +17,12 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
|
|||||||
0.11.beta.6 (3/27/2011)
|
0.11.beta.6 (3/27/2011)
|
||||||
------------------------
|
------------------------
|
||||||
* Added opera prefix support for linear and radial gradients.
|
* Added opera prefix support for linear and radial gradients.
|
||||||
|
* The CSS3 `background` mixin's "simple" background that came
|
||||||
|
before the prefixed versions has been removed. If you
|
||||||
|
need to target css2 background it is recommended that you set a
|
||||||
|
the background property before calling the `background` mixin
|
||||||
|
or you can call the `background-with-css2-fallback` if you want
|
||||||
|
keep using compass's automatic simplification of the arguments.
|
||||||
|
|
||||||
0.11.beta.5 (03/27/2011)
|
0.11.beta.5 (03/27/2011)
|
||||||
------------------------
|
------------------------
|
||||||
|
@ -16,8 +16,6 @@
|
|||||||
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
|
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
|
||||||
$background-6, $background-7, $background-8, $background-9, $background-10);
|
$background-6, $background-7, $background-8, $background-9, $background-10);
|
||||||
$mult-bgs: -compass-list-size($backgrounds) > 1;
|
$mult-bgs: -compass-list-size($backgrounds) > 1;
|
||||||
$simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
|
|
||||||
@if not blank($simple-background) { background: $simple-background; }
|
|
||||||
@if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
|
@if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
|
||||||
@if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
|
@if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
|
||||||
@if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
|
@if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
|
||||||
@ -26,6 +24,28 @@
|
|||||||
background: $backgrounds;
|
background: $backgrounds;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin background-with-css2-fallback(
|
||||||
|
$background-1,
|
||||||
|
$background-2: false,
|
||||||
|
$background-3: false,
|
||||||
|
$background-4: false,
|
||||||
|
$background-5: false,
|
||||||
|
$background-6: false,
|
||||||
|
$background-7: false,
|
||||||
|
$background-8: false,
|
||||||
|
$background-9: false,
|
||||||
|
$background-10: false
|
||||||
|
) {
|
||||||
|
$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
|
||||||
|
$background-6, $background-7, $background-8, $background-9, $background-10);
|
||||||
|
$mult-bgs: -compass-list-size($backgrounds) > 1;
|
||||||
|
$simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
|
||||||
|
@if not blank($simple-background) { background: $simple-background; }
|
||||||
|
@include background($background-1, $background-2, $background-3, $background-4, $background-5,
|
||||||
|
$background-6, $background-7, $background-8, $background-9, $background-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Background image property support for vendor prefixing within values.
|
// Background image property support for vendor prefixing within values.
|
||||||
@mixin background-image(
|
@mixin background-image(
|
||||||
$image-1,
|
$image-1,
|
||||||
|
@ -2,7 +2,6 @@
|
|||||||
background: white url("foo.png"); }
|
background: white url("foo.png"); }
|
||||||
|
|
||||||
.bg-shortcut-linear-gradient {
|
.bg-shortcut-linear-gradient {
|
||||||
background: white ;
|
|
||||||
background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
|
background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
|
||||||
background: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
background: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
background: white -moz-linear-gradient(top left, #dddddd, #aaaaaa);
|
background: white -moz-linear-gradient(top left, #dddddd, #aaaaaa);
|
||||||
@ -10,13 +9,20 @@
|
|||||||
background: white linear-gradient(top left, #dddddd, #aaaaaa); }
|
background: white linear-gradient(top left, #dddddd, #aaaaaa); }
|
||||||
|
|
||||||
.bg-shortcut-radial-gradient {
|
.bg-shortcut-radial-gradient {
|
||||||
background: white ;
|
|
||||||
background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
|
background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
|
||||||
background: white -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
background: white -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
background: white -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
|
background: white -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
|
||||||
background: white -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
|
background: white -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
|
||||||
background: white radial-gradient(center center, #dddddd, #aaaaaa 100px); }
|
background: white radial-gradient(center center, #dddddd, #aaaaaa 100px); }
|
||||||
|
|
||||||
|
.bg-all-gradient-types-with-simplification {
|
||||||
|
background: #ffcc00;
|
||||||
|
background: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), #ffcc00;
|
||||||
|
background: url('/images/4x6.png?busted=true'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), #ffcc00;
|
||||||
|
background: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd, #aaaaaa), -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00;
|
||||||
|
background: url('/images/4x6.png?busted=true'), -o-linear-gradient(top left, #dddddd, #aaaaaa), -o-radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00;
|
||||||
|
background: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd, #aaaaaa), radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00; }
|
||||||
|
|
||||||
.bg-simple-image {
|
.bg-simple-image {
|
||||||
background-image: url("foo.png"); }
|
background-image: url("foo.png"); }
|
||||||
|
|
||||||
|
@ -10,6 +10,9 @@ $experimental-support-for-svg: true
|
|||||||
.bg-shortcut-radial-gradient
|
.bg-shortcut-radial-gradient
|
||||||
+background(#fff radial-gradient(center center, #ddd, #aaa 100px))
|
+background(#fff radial-gradient(center center, #ddd, #aaa 100px))
|
||||||
|
|
||||||
|
.bg-all-gradient-types-with-simplification
|
||||||
|
+background-with-css2-fallback(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px), #ffcc00)
|
||||||
|
|
||||||
.bg-simple-image
|
.bg-simple-image
|
||||||
+background-image(url('foo.png'))
|
+background-image(url('foo.png'))
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user