HTML and CSS Reference
In-Depth Information
Writing CSS3 easier with tools
CSS3 is at the bleeding edge. Some properties require what is known as a vendor
prefix. For example, the 3D transforms property perspective is implemented as fol-
lows, in different browsers:
-webkit-perspective //Safari, Chrome
-ms-perspective // Internet Explorer
perspective // Firefox
Only a short while ago, Firefox implemented this property as -moz-perspective ,
but have since dropped support for the -moz- prefix.
As you will come to realize, it is really hard to keep track of which browser requires a
prefix and which browser does not, and it is not quite feasible to keep all the sites that
we create updated on a regular basis every time a browser adds or drops support for
a prefix.
To make this easier, we could use abstractions without these prefixes such that a tool
that has an updated index of which property requires which prefix could convert them
into the required final CSS.
This is exactly what Sass ( sass-lang.com ) or Less ( lesscss.org ) provide. Sass
is a language that comes with a compiler that converts code written in Sass to CSS,
in Ruby. Less is a similar language, but written in JavaScript.
In both cases, the languages are extensions of the syntax used in CSS, which means
you can copy your existing CSS files into Sass or Less files and have them compile
into pure CSS files without any errors.
The extra features that these languages provide are the ability to use mixins, vari-
ables, functions, and more.
For Sass, Compass is an additional framework that provides a ready library of
CSS3 mixins found at compass-style.org/reference/compass/css3 . Less
has many options; the most popular and frequently updated can be found within
Twitter Bootstrap and are available at twitter.github.com/bootstrap/
Search WWH ::




Custom Search