Autoprefixer - the ultimate solution to the prefix problem in CSS

Auto prefixer is a new generation utility for adding prefixes to experimental properties from CSS 3. It takes Can I Use with the latest data on browser prefixes and popularity, reads your style file, finds properties and values that really need prefixes and adds them.

You just write regular CSS:

a { transition: transform 1s }

The autoprefixer itself will replace the necessary (and only necessary) properties and values (note the -webkit-transform ):

 a { -webkit-transition: -webkit-transform 1s; -o-transition: -o-transform 1s; transition: -ms-transform 1s; transition: transform 1s }

')
This utility works while laying out the site on the server (and on the programmer’s machine during development), so it is not noticeable to clients and does not require any support from browsers.

Problem

Unfortunately, current tools poorly solve the problem:

Writing a string of properties with your hands is obviously a bad decision. This code is impossible to read, it is easy to forget to fix the other properties when editing.
In Sass and LESS, you need to keep track of the prefixes yourself and copy the impurities from project to project. In addition, impurities can solve the problem only for properties, not values (for example, calc() ).
Compass or Bourbon is already better, there the list of impurities is stored centrally and it is easier to keep it up-to-date (but practice shows that all prefixes are usually added to the impurity without following the relevance). The problem of meanings is still not solved.
The main problem of Sass and LESS is that you still need to constantly think “is this property out of CSS 3 or not?” - and depending on this, use an admixture or not. Stylus solved this problem a bit - its syntax of impurities does not differ from ordinary properties, so prefixes are added invisibly. However, the problem of relevance and values still remained.
There are also scripts for adding prefixes right in the browser, for example, Prefix Free , but the best way is to process the styles at the design and display stage, rather than repeat the processing each time in the client browser.

It is clear that the languages of preprocessors do not allow solving the problem completely, a fundamentally new tool was needed.

The Stylus developer, TJ Holowaychuk, also understood this, so he began developing a new generation preprocessor, Rework . This is not a separate language that has been compiled into CSS (like Sass or Stylus), but rather a preprocessor of the CSS tree:

First, the CSS parser built a style tree;
then the JS functions changed this tree as desired;
at the end a new tree was saved to a CSS file.

As a result, the new tool was much more flexible - you could really do anything with CSS. Therefore, it was Rework that formed the basis of the Autoprefixer.

Benefits

You do not need to learn a new language.

Autoprefixer works on top of regular CSS - so you don’t need the entire team to migrate to a new language. At the same time, it remains compatible with other languages such as Sass and Stylus - you only need to run it after compiling CSS.

You do not need to think whether an admixture is needed here or not - you can completely forget about the prefixes. The autoprefixer will find what needs to be changed - you write regular CSS with the usual properties and values.

Value prefixes

Thanks to the flexibility of Rework, Auto Prefixer can add prefixes for @keyframes and values. For example, in Compass, it is very difficult to specify a transition animation for properties from CSS 3, such as - impurities cannot be specified and you have to list all possible prefixes for the transform .

Always up to date

First of all, in order not to depend on the authors' free time, the Autoprefixer database is updated with automatic scripts from Can I Use , so that the data always remains fresh.

Secondly, you specify the versions of browsers that you support (by default, as in Google, the latest 2 versions of each browser are taken) - you can also specify by the statistics of global usage, for example, “more than 1%”.

As a result, in CSS there will be only really necessary prefixes, files will be neat and they will be easy to look at in the Web Browser Inspector.

Using

Ruby on rails

For Rails, there are autoprefixer-rails gems - all you have to do is plug in the gems and the prefixes will be added to your CSS files from app/assets/ and lib/assets . It is enough to add in Gemfile and continue to write the usual CSS:

 gem "autoprefixer-rails"

Thanks to the flexibility of Assets Pipeline, prefixes will be added to both your styles in Sass and Stylus. Browsers can be specified in the config/autoprefixer.yml :

 browsers: - "last 1 version" - "> 1%" - "ie 8"

You can find out which prefixes will be added using the rake autoprefixer:inspect task.

Ruby

If you use Sprockets without Rails (for example, together with Sinatra), then you can connect Autoprefixer to it:

 AutoprefixerRails.install(sprockets_env)

You can handle CSS without any Sprockets at all:

 prefixed = AutoprefixerRails.compile(css))

Javascript

To compile in node.js, you can use a package with npm:

 var autoprefixer = require('autoprefixer'); var prefixed = autoprefixer.compile(css);

If you need to process CSS in the browser, then you can take a special assembly script .

If you are already using Rework, you can connect a separate Autoprefixer filter:

 rework(css). use( autoprefixer.rework(['> 1%', 'opera 12.5']) ). use( rework.references() ). toString();

Other

Autoprefix can be integrated with other languages and systems using a separate application:

 sudo npm install --global autoprefixer autoprefixer *.css