What is autoprefixer?
The autoprefixer npm package is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is a tool that automates the process of adding vendor prefixes to CSS rules to ensure cross-browser compatibility.
What are autoprefixer's main functionalities?
Adding vendor prefixes
This feature automatically adds necessary vendor prefixes to CSS rules. The code sample shows how to use autoprefixer with PostCSS to process a CSS string that includes the 'display: flex;' rule, which then outputs the rule with the appropriate vendor prefixes.
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
postcss([ autoprefixer ]).process('a { display: flex; }').then(result => {
console.log(result.css);
// Output: 'a { display: -webkit-box; display: -ms-flexbox; display: flex; }'
});
Customizing browser support
Autoprefixer allows customization of the browsers you want to target. The code sample demonstrates how to specify the browsers using the 'overrideBrowserslist' option to target the last 2 versions of all browsers.
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
postcss([ autoprefixer({ overrideBrowserslist: ['last 2 versions'] }) ])
.process('a { display: flex; }').then(result => {
console.log(result.css);
// Output will include prefixes for the last 2 versions of all browsers.
});
Removing unnecessary prefixes
Autoprefixer can also remove outdated prefixes if they are no longer needed for the specified browser range. The code sample shows how to disable this feature using the 'remove' option.
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
postcss([ autoprefixer({ remove: false }) ])
.process('a { -webkit-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black; }').then(result => {
console.log(result.css);
// Output will keep the -webkit-box-shadow prefix even if it's not necessary for the specified browsers.
});
Other packages similar to autoprefixer
postcss-preset-env
postcss-preset-env is a plugin that allows you to use future CSS features today. It includes autoprefixer functionality and extends it by allowing you to use future CSS syntax that is not yet fully supported in browsers.
cssnano
cssnano is a modular CSS minifier that includes autoprefixing as one of its optimizations. While autoprefixer focuses solely on adding prefixes, cssnano aims to reduce the size of CSS files by performing a variety of optimizations, including autoprefixing.
pleeease
pleeease is a CSS processor that combines several tools, including autoprefixer, to streamline the process of writing CSS. It simplifies the workflow by integrating autoprefixing, minification, and other features into one package.
Autoprefixer
Parse CSS and add prefixed properties and values by
Can I Use database for actual browsers.
Write your CSS usual code without prefixes (forget about them at all,
Autoprefixer will think for you):
var css = 'a { transition: transform 1s }';
var prefixed = autoprefixer.compile(css);
Autoprefixer will take database with current browser statistics
and properties support and adds only actual prefixes:
a {
-webkit-transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s
}
Sponsored by Evil Martians.
Translations
Документация на русском: habrahabr.ru/company/evilmartians/blog/176909
Features
- You write normal CSS (or use Autoprefixer after Sass, Stylus
or another preprocessor).
- You write normal properties (not special mixins), so you don’t need to
remember which properties need to be prefixed.
- Autoprefixer uses only really necessary prefixes. You set browsers (by default
last 2 version for each browsers). Did you know that prefixes for
border-radius
are not necessary
for a long time? - Properties and browsers database is updated automatically
(from Can I Use), so prefixes will be always actual
(scripts don’t have holidays and work).
- It also adds prefixes to the values. For example, to
calc(1em + 5px)
or
to properties names in transition
.
Browsers
You can specify browsers actual for your project (by default, it’s
"last 2 versions"
):
autoprefixer.compile(css, ["last 1 version", "> 1%", "ie 8", "ie 7"]);
last n versions
is last n
versions for each browser (for example,
Google also uses
“last 2 version” strategy).> n%
is browser versions, which global usage statistics is more than n
%.- You can also set browsers directly.
Usage
Ruby on Rails
Add autoprefixer-rails gem
to Gemfile
and write CSS in usual way:
gem "autoprefixer-rails"
Ruby
You can integrate Autoprefxier to your Sprockets environment
by autoprefixer-rails
gem:
AutoprefixerRails.install(sprockets_env)
or process CSS from plain Ruby:
prefixed = AutoprefixerRails.compile(css)
Grunt
You can use grunt-autoprefixer
plugin for Grunt. Install npm-package and add it to Gruntfile:
grunt.loadNpmTasks('grunt-autoprefixer');
Node.js
Use autoprefixer
npm-package:
var autoprefixer = require('autoprefixer');
var prefixed = autoprefixer.compile(css);
JavaScript
You can use Autoprefixer in browser or non-node JS runtime
by standalone version.
Rework
Autoprefixer is a Rework filter,
so you can can combine it with other filters:
rework(css).
use( autoprefixer.rework(['> 1%', 'opera 12.5']) ).
use( rework.references() ).
toString();
Others
You can use autoprefixer
binary to process CSS files in any assets manager:
sudo npm install --global autoprefixer
autoprefixer *.css
See autoprefixer -h
for help.
Sublime Text
You can process your styles directly in Sublime Text by
sublime-autoprefixer
plugin.