Auto Prefix - Ultimate CSS Prefix Solution

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

You just write plain CSS:

a {
    transition: transform 1s
}

The auto-prefixer itself will replace the necessary (and only the necessary) properties and values ​​(pay attention to -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 do not solve the problem well:

• Writing strings of properties with your hands is obviously a bad decision. It is impossible to read such code; it is easy to forget to fix the remaining properties when editing.
• In Sass and LESS, you yourself need to monitor the relevance of prefixes and copy impurities from project to project. In addition, impurities can solve the problem only for properties, and not for values ​​(for example, calc()).
• Compass or Bourbon is already better, there the list of impurities is stored centrally and it is easier to keep up to date (but practice shows that usually all prefixes are added to an impurity without monitoring the relevance). The value problem is still not resolved.
• The main problem with Sass and LESS is that you still need to constantly think “is this property from 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 usual properties, so prefixes are added invisibly. However, the problem of relevance and values ​​still remained.
• There are also scripts for adding prefixes directly in the browser, for example, Prefix Free , but it is best to process the styles at the development and calculation stages, and not repeat the processing every time in the client browser.

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

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

• First, the CSS parser built a style tree;
• then the JS functions changed this tree as you like;
• at the end, the 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

Auto-prefixer works on top of regular CSS - so you don’t need to migrate to a new language with the whole team. However, 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 impurity is needed here or not - you can completely forget about the prefixes. The auto-prefixer itself will find what needs to be changed - you write regular CSS with the usual properties and values.

Prefixes for Values

Due to the flexibility of Rework, the AutoPrefixer can add prefixes for @keyframesboth and values. For example, in Compass, it’s very difficult to specify an transitionanimation for properties from CSS 3, such as impurities cannot be specified and you have to list all possible prefixes for transform.

Always up-to-date data

Firstly, 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 indicate the versions of browsers that you support (by default, as in Google, the last 2 versions of each browser are taken) - you can also indicate according to global usage statistics, for example, “more than 1%”.

As a result, in CSS there will be only really necessary prefixes, the files will be neat and they will be easy to see in the Web Inspector of the browser.

Using

Ruby on Rails

For Rails there is a gem “ autoprefixer-rails ” - you only need to connect the gem and the prefixes will be added to your CSS files from app/assets/and lib/assets. Just add in Gemfileand continue to write regular CSS:

gem "autoprefixer-rails"

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

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

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

Ruby

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

AutoprefixerRails.install(sprockets_env)

You can handle CSS without Sprockets at all:

prefixed = AutoprefixerRails.compile(css))

Javascript

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

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

If you need to handle CSS in a browser, then you can take a special build of the script .

If you are already using Rework, then you can connect a separate Auto Prefix filter:

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

Other

The auto-prefixer can be integrated with other languages ​​and systems using a separate application:

sudo npm install --global autoprefixer
autoprefixer *.css

References

• GitHub repository
• Channel Twitter with news and releases