From a9317f0d7b9a68bb9b36095d0a6e121ebb34bf77 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 18 Mar 2012 02:42:24 -0700 Subject: [PATCH] Add -ms support for css3 columns. Add support for the columns shorthand property. --- doc-src/content/CHANGELOG.markdown | 3 ++- .../stylesheets/compass/css3/_columns.scss | 25 +++++++++++++------ .../stylesheets/compass/css/columns.css | 15 +++++++++++ .../stylesheets/compass/sass/columns.scss | 1 + 4 files changed, 36 insertions(+), 8 deletions(-) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 4878d305..746f508f 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -22,7 +22,8 @@ The Documentation for the [latest preview release](http://beta.compass-style.org * [Vertical Rhythm Module] The `establish-baseline` mixin now styles the `` element instead of the `` element. This makes the vertical rhythm module work better with `rem` based measurements. -* [CSS3] Add 3D transform support for moz, ie, and opera. +* [CSS3] Add 3D transform support for Mozillia, IE, and Opera. +* [CSS3] Add `-ms` support for css3 columns. Add support for the columns shorthand property. 0.12.1 (03/14/2012) ------------------- diff --git a/frameworks/compass/stylesheets/compass/css3/_columns.scss b/frameworks/compass/stylesheets/compass/css3/_columns.scss index 18480013..f08cae3e 100644 --- a/frameworks/compass/stylesheets/compass/css3/_columns.scss +++ b/frameworks/compass/stylesheets/compass/css3/_columns.scss @@ -1,30 +1,41 @@ @import "shared"; +// Specify the shorthand `columns` property. +// +// Example: +// +// @include columns(20em 2) +@mixin columns($width-and-count) { + @include experimental(columns, $width-and-count, + -moz, -webkit, -o, -ms, not -khtml, official + ); +} + // Specify the number of columns @mixin column-count($count) { @include experimental(column-count, $count, - -moz, -webkit, -o, not -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } // Specify the gap between columns e.g. `20px` @mixin column-gap($width) { @include experimental(column-gap, $width, - -moz, -webkit, -o, not -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } // Specify the width of columns e.g. `100px` @mixin column-width($width) { @include experimental(column-width, $width, - -moz, -webkit, -o, not -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } // Specify the width of the rule between columns e.g. `1px` @mixin column-rule-width($width) { @include experimental(rule-width, $width, - -moz, -webkit, -o, not -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @@ -32,7 +43,7 @@ // This works like border-style. @mixin column-rule-style($style) { @include experimental(rule-style, unquote($style), - -moz, -webkit, -o, not -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @@ -40,7 +51,7 @@ // This works like border-color. @mixin column-rule-color($color) { @include experimental(rule-color, $color, - -moz, -webkit, -o, not -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } @@ -55,6 +66,6 @@ @mixin column-rule($width, $style: false, $color: false) { $full : -compass-space-list(compact($width, $style, $color)); @include experimental(column-rule, $full, - -moz, -webkit, -o, not -ms, not -khtml, official + -moz, -webkit, -o, -ms, not -khtml, official ); } diff --git a/test/fixtures/stylesheets/compass/css/columns.css b/test/fixtures/stylesheets/compass/css/columns.css index e94dddd6..3ec721db 100644 --- a/test/fixtures/stylesheets/compass/css/columns.css +++ b/test/fixtures/stylesheets/compass/css/columns.css @@ -1,47 +1,62 @@ +.columns { + -webkit-columns: 20em 5; + -moz-columns: 20em 5; + -ms-columns: 20em 5; + -o-columns: 20em 5; + columns: 20em 5; } + .column-count { -webkit-column-count: 5; -moz-column-count: 5; + -ms-column-count: 5; -o-column-count: 5; column-count: 5; } .column-gap { -webkit-column-gap: 10px; -moz-column-gap: 10px; + -ms-column-gap: 10px; -o-column-gap: 10px; column-gap: 10px; } .column-width { -webkit-column-width: 90px; -moz-column-width: 90px; + -ms-column-width: 90px; -o-column-width: 90px; column-width: 90px; } .column-rule-width { -webkit-rule-width: 1px; -moz-rule-width: 1px; + -ms-rule-width: 1px; -o-rule-width: 1px; rule-width: 1px; } .column-rule-style { -webkit-rule-style: dotted; -moz-rule-style: dotted; + -ms-rule-style: dotted; -o-rule-style: dotted; rule-style: dotted; } .column-rule-color { -webkit-rule-color: blue; -moz-rule-color: blue; + -ms-rule-color: blue; -o-rule-color: blue; rule-color: blue; } .column-rule { -webkit-column-rule: 1px solid blue; -moz-column-rule: 1px solid blue; + -ms-column-rule: 1px solid blue; -o-column-rule: 1px solid blue; column-rule: 1px solid blue; } .column-rule-spaced { -webkit-column-rule: 1px solid blue; -moz-column-rule: 1px solid blue; + -ms-column-rule: 1px solid blue; -o-column-rule: 1px solid blue; column-rule: 1px solid blue; } diff --git a/test/fixtures/stylesheets/compass/sass/columns.scss b/test/fixtures/stylesheets/compass/sass/columns.scss index c66f71c2..3e60fa5c 100644 --- a/test/fixtures/stylesheets/compass/sass/columns.scss +++ b/test/fixtures/stylesheets/compass/sass/columns.scss @@ -1,5 +1,6 @@ @import "compass/css3/columns"; +.columns { @include columns(20em 5); } .column-count { @include column-count(5); } .column-gap { @include column-gap(10px); } .column-width { @include column-width(90px); }