ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIon
This is my personal preferred solution for lightweight work (such as making a CSS3 animation in the header
of a blog post); it allows me to write single lines of code that follow the expected final spec, minimizing file size,
and it lets the script handle backward compatibility. There are a few issues to be aware of, however:
• There is a strong argument to be made that this kind of CSS declaration transformation is
not the role of a client-side script, but a server-side one, as discussed below.• Users who browse a site that uses the -prefix-free script but who have JavaScript
turned off—either directly or through a browser extension such as NoScript
(http://noscript.net)—and are using a browser that is still dependent on vendor
prefixes will not see any transforms, transitions, or animations. However, this particular
audience is small and—especially in regard to the number of browsers moving to support
non-prefixed CSS3—rapidly diminishing in size. In addition, if you’ve followed the
principles of progressive enhancement and graceful degradation in Chapter 2, the lack of
CSS3 should not affect a user’s ability to enjoy or use your site.• The delivery of standard prefixed CSS3 from the server may be slightly faster in some
cases, due to the fact that -prefix-free must process the CSS client-side before it can be
used. In practice, this is usually balanced out by the server-side processing required in
other solutions, or the larger file size associated with fully-prefixed CSS code.• Unprefixed properties that appear in inline styles won’t be transformed by -prefix-free for
Firefox 3.6 or lower (a very unusual case, at least for most sites and their visitors).SASS, LESS, Compass and Codekit
SASS (http://sass-lang.com) and LESS (http://lesscss.org) are perhaps best described as “meta
frameworks” for CSS, allowing features such as variables, functions, loops, automatic validation, optimization,
and minification of code, nested rules, and (the most relevant to our interests here) automatic prefixing of
CSS3 through “mixins.” Both frameworks promote themselves as CSS Extensions, although this should not
be considered an endorsement by the W3C. (That being said, many of the innovations CSS frameworks have
promoted, such as variables, are being taken on in new CSS modules.)
LESS works through JavaScript, “translating” a LESS-infused stylesheet (styles.less) into browser-ready CSS at
runtime: as a result, it shares many of the advantages (and disadvantages) of -prefix-free. SASS takes the approach of
precompiling stylesheets written in SASS (styles.scss) into a complete .css file that can be used by every browser.
Compass (http://compass-style.org/) bundles many of the best additions for SASS together. Managing
different SASS tools and extensions is made somewhat difficult by the fact they they must be controlled through the
command line as Ruby gems. CodeKit (http://incident57.com/codekit) is a framework manager for Mac OS X
that pulls them all together (including LESS, Stylus, and Compass) in a graphical user interface and some other nice
features—such as automatically refreshing the page in an open browser when the CSS has changed.
Finally, including a “mixin” helps shortcut your code still further; a library collection of scripts such as
Bourbon (http://thoughtbot.com/bourbon/) or Compass will allow you to type a simple transition in SASS in
this way. (The code in Listing 10-1 is shown in Compass syntax.)
Listing 10-1. Using a SASS Mixin to Generate Vendor-Prefixed Code
#element {
@include transition-property(width);
@include transition-duration(2s);
@include transition-timing-function(ease-in); }
#element:hover {
width: 180%
}