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.
Документация на русском: habrahabr.ru/company/evilmartians/blog/176909
- 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 intransition
.
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 lastn
versions for each browser (for example, Google also uses “last 2 version” strategy). -
> n%
is browser versions, which global usage statistics is more thann
%. - You can also set browsers directly.
Add autoprefixer-rails gem
to Gemfile
and write CSS in usual way:
gem "autoprefixer-rails"
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)
You can use grunt-autoprefixer plugin for Grunt. Install npm-package and add it to Gruntfile:
grunt.loadNpmTasks('grunt-autoprefixer');
Use autoprefixer
npm-package:
var autoprefixer = require('autoprefixer');
var prefixed = autoprefixer.compile(css);
You can use Autoprefixer in browser or non-node JS runtime by standalone version.
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();
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.
You can process your styles directly in Sublime Text by sublime-autoprefixer plugin.