Security News
Python Overtakes JavaScript as Top Programming Language on GitHub
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
autoprefixer
Advanced tools
Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
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.
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.
});
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 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 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.
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter, and Taobao.
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
:fullscreen a {
display: flex
}
Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.
:-webkit-full-screen a {
display: -webkit-box;
display: flex
}
:-moz-full-screen a {
display: flex
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex
}
:fullscreen a {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
Twitter account for news and releases: @autoprefixer.
Working with Autoprefixer is simple: just forget about vendor prefixes and write normal CSS according to the latest W3C specs. You don’t need a special language (like Sass) or remember where you must use mixins.
Autoprefixer supports selectors (like :fullscreen
and ::selection
),
unit function (calc()
), at‑rules (@supports
and @keyframes
)
and properties.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors such as Sass, Stylus or LESS.
Just write normal CSS according to the latest W3C specs and Autoprefixer will produce the code for old browsers.
a {
display: flex;
}
compiles to:
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
Autoprefixer has 27 special hacks to fix web browser differences.
Autoprefixer utilizes the most recent data from Can I Use to add only necessary vendor prefixes.
It also removes old, unnecessary prefixes from your CSS
(like border-radius
prefixes, produced by many CSS libraries).
a {
-webkit-border-radius: 5px;
border-radius: 5px;
}
compiles to:
a {
border-radius: 5px;
}
Autoprefixer uses Browserslist, so you can specify the browsers
you want to target in your project by queries like last 2 versions
or > 5%
.
If you don’t provide the browsers option, Browserslist will try
to find the browserslist
config in parent dirs.
See Browserslist docs for queries, browser names, config format, and default value.
By default, Autoprefixer also removes outdated prefixes.
You can disable this behavior with the remove: false
option. If you have
no legacy code, this option will make Autoprefixer about 10% faster.
Also, you can set the add: false
option. Autoprefixer will only clean outdated
prefixes, but will not add any new prefixes.
Autoprefixer adds new prefixes between any unprefixed properties and already written prefixes in your CSS. If it will break the expected prefixes order, you can clean all prefixes from your CSS and then add the necessary prefixes again:
var cleaner = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
var prefixer = postcss([ autoprefixer ]);
cleaner.process(css).then(function (cleaned) {
return prefixer.process(cleaned.css)
}).then(function (result) {
console.log(result.css);
});
Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer to minify CSS by cleaning unnecessary prefixes.
If you set browsers list to Autoprefixer by browsers
option, only first
Autoprefixer will know your browsers. Autoprefixer inside webpack will use
default browsers list. As result, webpack will remove prefixes, that first
Autoprefixer added.
You need to put your browsers to browserslist
config in project root —
as result all tools (Autoprefixer, cssnano, doiuse, cssnext) will use same
browsers list.
No. Autoprefixer only adds prefixes.
Most new CSS features will require client side JavaScript to handle a new behavior correctly.
Depending on what you consider to be a “polyfill”, you can take a look at some other tools and libraries. If you are just looking for syntax sugar, you might take a look at:
border-radius
?Developers are often surprised by how few prefixes are required today. If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still required on Can I Use.
There is a list with all supported properties, values, and selectors.
@-webkit-keyframes
?Browser teams can remove some prefixes before others. So we try to use all combinations of prefixed/unprefixed values.
-webkit-
only code?Autoprefixer needs unprefixed property to add prefixes. So if you only
wrote -webkit-gradient
without W3C’s gradient
,
Autoprefixer will not add other prefixes.
But PostCSS has a plugins to convert CSS to unprefixed state. Use them before Autoprefixer:
-epub-
prefix?No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub for prefixing ePub3 properties.
In Gulp you can use gulp-postcss with autoprefixer
npm package.
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
});
With gulp-postcss
you also can combine Autoprefixer
with other PostCSS plugins.
In webpack you can use postcss-loader with autoprefixer
and other PostCSS plugins.
var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}
In Grunt you can use grunt-postcss with autoprefixer
npm package.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
With grunt-postcss
you also can combine Autoprefixer
with other PostCSS plugins.
autoprefixer
npm package and enable it:
environment.enable('autoprefixer')
autoprefixer-rails
and jekyll-assets
to Gemfile
There is postcss-js to use Autoprefixer in React Inline Styles, Free Style, Radium and other CSS-in-JS solutions.
let prefixer = postcssJs.sync([ autoprefixer ]);
let style = prefixer({
display: 'flex'
});
You can use the postcss-cli to run Autoprefixer from CLI:
npm install --global postcss-cli autoprefixer
postcss --use autoprefixer *.css -d build/
See postcss -h
for help.
You can use Autoprefixer with PostCSS in your Node.js application or if you want to develop an Autoprefixer plugin for new environment.
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
postcss([ autoprefixer ]).process(css).then(function (result) {
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
console.log(result.css);
});
There is also standalone build for the browser or as a non-Node.js runtime.
You can use html-autoprefixer to process HTML with inlined CSS.
Autoprefixer should be used in assets build tools. Text editor plugins are not a good solution, because prefixes decrease code readability and you will need to change value in all prefixed properties.
I recommend you to learn how to use build tools like Gulp. They work much better and will open you a whole new world of useful plugins and automatization.
But, if you can’t move to a build tool, you can use text editor plugins:
Autoprefixer uses the PostCSS warning API to warn about really important problems in your CSS:
display: box
instead of display: flex
by latest specification version.You can get warnings from result.warnings()
:
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
Every Autoprefixer runner should display this warnings.
Autoprefixer was designed to have no interface – it just works. If you need some browser specific hack just write a prefixed property after the unprefixed one.
a {
transform: scale(0.5);
-moz-transform: scale(0.6);
}
If some prefixes were generated in a wrong way, please create an issue on GitHub.
Autoprefixer has 4 features, which can be disabled by options:
supports: false
will disable @supports
parameters prefixing.flexbox: false
will disable flexbox properties prefixing.
Or flexbox: "no-2009"
will add prefixes only for final and IE
versions of specification.grid: false
will disable Grid Layout prefixes for IE.remove: false
will disable cleaning outdated prefixes.If you do not need Autoprefixer in some part of your CSS, you can use control comments to disable Autoprefixer.
a {
transition: 1s; /* it will be prefixed */
}
b {
/* autoprefixer: off */
transition: 1s; /* it will not be prefixed */
}
Control comments disable Autoprefixer within the whole rule in which
you place it. In the above example, Autoprefixer will be disabled
in the entire b
rule scope, not only after the comment.
You can also use comments recursively:
/* autoprefixer: off */
@supports (transition: all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}
Function autoprefixer(options)
returns new PostCSS plugin.
See PostCSS API for plugin usage documentation.
var plugin = autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false });
There are 4 options:
browsers
(array): list of browsers, which are supported in your project.
You can directly specify browser version (like IE 7
) or use selections
(like last 2 version
or > 5%
). See Browserslist docs for available
queries and default value.cascade
(boolean): should Autoprefixer use Visual Cascade,
if CSS is uncompressed. Default: true
add
(boolean): should Autoprefixer add prefixes. Default is true
.remove
(boolean): should Autoprefixer [remove outdated] prefixes.
Default is true
.supports
(boolean): should Autoprefixer add prefixes for @supports
parameters. Default is true
.flexbox
(boolean|string): should Autoprefixer add prefixes for flexbox
properties. With "no-2009"
value Autoprefixer will add prefixes only
for final and IE versions of specification. Default is true
.grid
(boolean): should Autoprefixer add IE prefixes for Grid Layout
properties. Default is true
.stats
(object): custom usage statistics for > 10% in my stats
browsers query.Plugin object has info()
method for debugging purpose.
You can use PostCSS processor to process several CSS files to increase performance.
You can check which browsers are selected and which properties will be prefixed:
var info = autoprefixer({ browsers: ['last 1 version'] }).info();
console.log(info);
FAQs
Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
The npm package autoprefixer receives a total of 16,660,775 weekly downloads. As such, autoprefixer popularity was classified as popular.
We found that autoprefixer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.