From 0eef08e6ce664d5d905928c7a7c4e66f80e5e8c7 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Thu, 31 Mar 2011 19:03:40 -0700 Subject: [PATCH] Remove the css3 background simple bg support and move it to a new mixin called background-with-css2-fallback. --- doc-src/content/CHANGELOG.markdown | 6 +++++ .../stylesheets/compass/css3/_images.scss | 24 +++++++++++++++++-- .../stylesheets/compass/css/gradients.css | 10 ++++++-- .../stylesheets/compass/sass/gradients.sass | 3 +++ 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index aa4b0db5..edc19255 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -17,6 +17,12 @@ The Documentation for the [latest preview release](http://beta.compass-style.org 0.11.beta.6 (3/27/2011) ------------------------ * 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) ------------------------ diff --git a/frameworks/compass/stylesheets/compass/css3/_images.scss b/frameworks/compass/stylesheets/compass/css3/_images.scss index cda3c2ff..79f9ba02 100644 --- a/frameworks/compass/stylesheets/compass/css3/_images.scss +++ b/frameworks/compass/stylesheets/compass/css3/_images.scss @@ -16,8 +16,6 @@ $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; } @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-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); } @@ -26,6 +24,28 @@ 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. @mixin background-image( $image-1, diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index 45ff67d0..b8c6c077 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -2,7 +2,6 @@ background: white url("foo.png"); } .bg-shortcut-linear-gradient { - background: white ; 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 -moz-linear-gradient(top left, #dddddd, #aaaaaa); @@ -10,13 +9,20 @@ background: white linear-gradient(top left, #dddddd, #aaaaaa); } .bg-shortcut-radial-gradient { - background: white ; 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 -moz-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); } +.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 { background-image: url("foo.png"); } diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index fd0ec96a..f521aede 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -10,6 +10,9 @@ $experimental-support-for-svg: true .bg-shortcut-radial-gradient +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 +background-image(url('foo.png'))