From cac1bf915f3239084a81678c2e0d5ea7b5f2d8a3 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Mon, 15 Nov 2010 17:27:46 -0800 Subject: [PATCH] Doc cleanup --- .../reference/compass/css3/box_shadow.haml | 2 +- .../reference/compass/css3/text_shadow.haml | 3 +- .../reference/compass/css3/transform-v2.haml | 14 +++++- .../reference/compass/css3/transform.haml | 2 +- .../tutorials/upgrading/css3-v2.markdown | 43 +++++++++++++++++++ 5 files changed, 60 insertions(+), 4 deletions(-) diff --git a/doc-src/content/reference/compass/css3/box_shadow.haml b/doc-src/content/reference/compass/css3/box_shadow.haml index 2a181d65..be857af9 100644 --- a/doc-src/content/reference/compass/css3/box_shadow.haml +++ b/doc-src/content/reference/compass/css3/box_shadow.haml @@ -14,4 +14,4 @@ classnames: - render 'reference' do %p.warning This import is deprecated. Please import - box_shadow_v2 instead. \ No newline at end of file + box-shadow-v2 instead. \ No newline at end of file diff --git a/doc-src/content/reference/compass/css3/text_shadow.haml b/doc-src/content/reference/compass/css3/text_shadow.haml index d29137c9..22fce181 100644 --- a/doc-src/content/reference/compass/css3/text_shadow.haml +++ b/doc-src/content/reference/compass/css3/text_shadow.haml @@ -14,4 +14,5 @@ classnames: - render 'reference' do %p.warning This import is deprecated. Please import - text_shadow_v2 instead. + text-shadow-v2 + instead. diff --git a/doc-src/content/reference/compass/css3/transform-v2.haml b/doc-src/content/reference/compass/css3/transform-v2.haml index 9c6e5ca6..2ab863f2 100644 --- a/doc-src/content/reference/compass/css3/transform-v2.haml +++ b/doc-src/content/reference/compass/css3/transform-v2.haml @@ -12,4 +12,16 @@ classnames: --- - render 'reference' do %p - Provides mixins for CSS3 2D and 3D transforms. See W3C: CSS 2D transforms and See W3C: CSS 3D transforms. + Provides mixins for CSS3 2D and 3D transforms. See + W3C: CSS 2D transforms + and See W3C: CSS 3D transforms. + %p + Safari is the only browser that currently supports 3D transforms. + Because of that it can be important to control whether a given 2D transform + uses the full range of experimental browser prefixes, or only the 3D list. + To make that easy, all 2D transforms include an browser-targeting toggle ($only3d) + to switch between the two support lists. The toggle defaults to 'false' (2D), + and also accepts 'true' (3D). Currently the lists are as follows: + 2D: Mozilla, Webkit, Opera, Official + 3D: Webkit, Official **(Only Safari Supports 3D perspective)** + diff --git a/doc-src/content/reference/compass/css3/transform.haml b/doc-src/content/reference/compass/css3/transform.haml index 3f208e2d..0cb41904 100644 --- a/doc-src/content/reference/compass/css3/transform.haml +++ b/doc-src/content/reference/compass/css3/transform.haml @@ -14,4 +14,4 @@ classnames: - render 'reference' do %p.warning This import is deprecated. Please import - transform_v2 instead. + transform-v2 instead. diff --git a/doc-src/content/tutorials/upgrading/css3-v2.markdown b/doc-src/content/tutorials/upgrading/css3-v2.markdown index d3cc756d..04dd7e0e 100644 --- a/doc-src/content/tutorials/upgrading/css3-v2.markdown +++ b/doc-src/content/tutorials/upgrading/css3-v2.markdown @@ -1,3 +1,11 @@ +--- +title: CSS3 v2 Upgrade +layout: tutorial +crumb: CSS3 v2 Upgrade +classnames: + - tutorial +--- +# Upgrading to Compass CSS3 v2 The `css3` import is deprecated as well as the following css3 modules: `box-shadow`, `text-shadow`, and `transform`. Instead import `css3/version-2`, `box-shadow-v2`, `text-shadow-v2`, and `transform-v2` respectively. @@ -8,3 +16,38 @@ with the new, betterer APIs. You should read about what changed, update your stylesheets accordingly and then update your imports to the new version. + +## Box Shadow +The arguments to the [`box-shadow`][new_box_shadow] mixin have changed. +As a result you should change your import of `compass/css3/box-shadow` +to `compass/css3/box-shadow-v2` once you do one of the following choices: + +1. Change your use of the `box-shadow` and instead use `single-box-shadow`. + This mixin has the same behavior and arguments as the old `box-shadow` mixin. +2. Keep using `box-shadow`, change how you pass the arguments. The new + `box-shadow` takes up to 10 comma-delimited shadows. Each shadow is + how the values should appear in the CSS (space separated). + +## Text Shadow + +Similarly to how the box shadow changed. The new [text-shadow][new_text_shadow] +mixin now accepts multiple shadows. As a result you should change your import of +`compass/css3/text-shadow` to `compass/css3/text-shadow-v2` once you do one of +the following choices: + +1. Change your use of the `text-shadow` and instead use `single-text-shadow`. + This mixin has the same behavior and arguments as the old `text-shadow` mixin. +2. Keep using `text-shadow`, change how you pass the arguments. The new + `text-shadow` takes up to 10 comma-delimited shadows. Each shadow is + how the values should appear in the CSS (space separated). + +## CSS Transforms +The transform module was largely re-written to support 3D transforms. If you +are using it, it is suggested that you read the [new module's documentation][new_transform] +and adjust your code appropriately. Many mixin names and constants have changed. + +[old_box_shadow]: /docs/reference/compass/css3/box_shadow/#mixin-box-shadow +[new_box_shadow]: /docs/reference/compass/css3/box_shadow_v2/#mixin-box-shadow +[old_text_shadow]: /docs/reference/compass/css3/text_shadow/#mixin-text-shadow +[new_text_shadow]: /docs/reference/compass/css3/text-shadow-v2/#mixin-text-shadow +[new_transform]: /docs/reference/compass/css3/transform-v2/ \ No newline at end of file