Prefixes are a good thing. They help browser developers in realization of new possibilities. But with them developers’ lives get even more difficult. There are a lot of prefixes, and sometimes there are distinctions in syntax.
The problem is obvious. We need to find a method to facilitate the work with prefixes.
Of course, it would be unreasonable stop using prefixes. But it’s quite possible to shift a duty of their generation on specially existing for this purpose instruments. I tried to enumerate the possible variants.
Preprocessors
The essence of preprocessors is that the author of styles file can use additional possibilities, which are not presented in CSS, like variables, similarity of functions and much more, studying the syntax of preprocessor preliminary, a preprocessor will create the normal file of styles, substituting variables and other code for static values. Possibility of code’s replacement can be used in order to generate a cross browser code with prefixes automatically.
The most popular CSS preprocessors are LESS and SASS.
They are direct competitors, although there is a difference between them. Both can be used on the server-side, but LESS is also accessible as a javascript-file, therefore this feature could be dealt with separately.
LESS
This preprocessor possesses a syntax, which is simpler, than its competitor has. There is an ability to process the files of styles on the server-side, but now we are interested in the facility of working on a client-side through the javascript file.
Installation:
<!doctype html> <hеad> <link rеl="stylesheet/less" type="text/css" href="style.less"> <sсript src="less-1.1.3.min.js" type="text/javascript"></sсript> </hеad>
Mixin:
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Use:
#shape1{
.border-radius(10px);
}
In order to work with prefixes, it is needed to use mixins (the same code, which knows what and where to replace). There are the prepared sets of mixins and libraries for CSS3:
lesselements.com/
github.com/jdmiller82/-lessins-
snipplr.com/view/47181/less-classes/
roel.vanhintum.eu/more-less/
Not necessarily to compile .less files on a server or in a browser, it is possible to get a ready CSS file locally and use it on a web-site.
SimpLESS is an application that automatically compiles .less in standard CSS. Free of charge for all platforms.
Less App is analogical application, but for Mac only.
There is even an expansion for Dreamweaver, compiling files .less in CSS.
A client computer gets files .less and .js, after processing in a browser we get a file .css with all possible prefixes.
SASS
It is written on Ruby. Has more possibilities, than LESS, therefore it suits better for large projects. The use for the generation of prefixes will be practically as in its competitor, that is through mixins.
One of its pluses is that it has a Compass framework that contains the readymade libraries and mixins, including the one for working with CSS3. There is an application for the local compiling of SASS files in CSS. It is cross platform, but requires payment (graphic interface requires payment, and the compiler is opensource).
There are also CSS3 mixin libraries for SASS:
github.com/thoughtbot/bourbon
A processing of SASS files is being held on a server, and a client computer gets the readymade .css file.
Advantages of preprocessors:
+ There are a lot more things to do, except prefixes
+ Possibility to process the CSS files automatically (for example, to compress, deleting superfluous)
+ Normal caching (indeed, LESS is cached by means of localStorage)
Disadvantages of preprocessors:
- For a variant with javascript it is the dependence on the included scripts in a browser
- a code is Generated with all possible prefixes, not only with those that are need for a concrete browser
More competitors:
• CSS Agent on ASP.NET
• Stylus (it has CSS3 extension Nib)
• Turbine
• CSS Crush
• eCSStender
-Prefix-free
-Prefix-free is a script that must be connected to the pages. Unlike preprocessors, it processes the ordinary CSS file, that is there are no variables or mixins in the code, only the simplest CSS code, without vendor prefixes.
Processing pages of styles is done by means of Javascript.
Prefixes are added only for those properties, which are not supported by a concrete browser without prefixes.
A client computer gets a .css file without prefixes. After processing in a browser by means of javascript, only necessary prefixes are added to this file.
Advantages:
+ The author of styles file uses one variant of properties only, without prefixes
+ The user’s browser does not get styles with “strange” prefixes or prefixes that already became old
+ Valid code
+ It is possible to delete painlessly, when it won’t be necessary any more
Disadvantages:
- The styles connected through @import are not being processed
- After the loading of web-site and before a complete processing of CSS3 styles there is a barely noticeable pause
- When Javascript is disabled, a user will not see some of CSS3- styles
- Additional file for loading (indeed, only 2KB when compressed)
- The processed file of styles is not cached
Competitors:
• github.com/codler/jQuery-Css3-Finalize
• imsky.github.com/cssFx/
Generators
This method is already used by many of you. We simply open one of online generators and copy from there the ready code with prefixes.
Recently, I tried to look for a generator that automatically would add properties with prefixes to the standard property written by me. It turned out, that there are a few variants.
• prefixr.com It is possible to choose browsers for which the prefixes are used, it is possible to compress a code, use variables, it has plugins for the code editors
• prefixmycss.com
• cssprefixer.appspot.com Here a generator works as demonstration of possibilities of server script, accessible for free use
• imsky.github.com/cssFx/ This generator demonstrates possibilities of script on javascript, accessible for the free use
We download a file on a server with manually prepared .css file with all prefixes.
Advantages:
+ Nothing needs to be set and adjusted
+ A generator often gives an opportunity of the comfortable adjustment of values for CSS3 properties
Disadvantage:
- There is no automation at creation and subsequent change of CSS3 properties’ values
Code editor
Well, certainly there is a possibility of prefixes’ substitution automation for the code editors and programming environments. It would be very comfortable for prefixes to have Zen Coding on tap.
Currently, I couldn’t find plugins, which use Prefixr:
On this page plugins for Notepad++, TextMate, Espresso, Coda and some other are enumerated.
Prefixr for NetBeans
If your editor can do the processing of CSS3- properties automatically, or you’ve found a good plugin, you are welcome to share it via the comments section.