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 follows, 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, variables, 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/less.html#mixins. The following sections show you how to create a rule that uses CSS transforms in Sass and Less.
The output CSS would be as follows:
.btn-arrow {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}You could typically just rename the main.css file to main.scss or main.less and start using that as your base Sass or Less file. To compile these files to the corresponding Less or Sass files, you can either use GUI-based browser refreshing software that compiles these files automatically like LiveReload
(livereload.com/) or Codekit
(incident57.com/codekit).
If you are someone familiar with the command line, you can install Less or Sass and run their respective command-line interpreters to compile the files into pure CSS.
If you wish to use a pure Sass or Less file to start with (instead of the contents of the main.css file), there are also forks of HTML5 Boilerplate that have the stylesheet converted to Sass. We will see two of them in the following sections.
There is a Compass extension that is available for use with Compass at github.com/sporkd/compass-html5-boilerplate. Note that it is not as frequently updated as the main.css file you find in HTML5 Boilerplate. This is extensively modularized and splits the main.css file into multiple Sass files. The CSS comments are also removed from the resulting CSS file.
There is a Sass fork of the main.css that is frequently updated at github.com/grayghostvisuals/html5-boilerplate/tree/h5bp-scss that you can use, if all you want is a base Sass file to start from. This version uses Sass variables but does not split the file into individual files.
Unfortunately, there is no up-to-date Less fork of HTML5 Boilerplate. However, you can rename the main.css to main.less and then use it as a Less file.