lihai 8d6c751f49 feat: push | 2 yıl önce | |
---|---|---|
.. | ||
bin | 2 yıl önce | |
data | 2 yıl önce | |
lib | 2 yıl önce | |
CHANGELOG.md | 2 yıl önce | |
LICENSE | 2 yıl önce | |
README.md | 2 yıl önce | |
package.json | 2 yıl önce |
<img align="right" width="94" height="71"
src="http://postcss.github.io/autoprefixer/logo.svg"
title="Autoprefixer logo by Anton Lovchikov">
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 Alibaba.
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
::placeholder {
color: gray;
}
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-input-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
Twitter account for news and releases: @autoprefixer.
-webkit-min-device-pixel-ratio
?border-radius
?@-webkit-keyframes
?-webkit-
only code?-epub-
prefix?system-ui
?Autoprefixer uses Browserslist, so you can specify the browsers
you want to target in your project with queries like > 5%
(see Best Practices).
The best way to provide browsers is a .browserslistrc
file in your project
root, or by adding a browserslist
key to your package.json
.
We recommend the use of these options over passing options to Autoprefixer so that the config can be shared with other tools such as babel-preset-env and Stylelint.
See Browserslist docs for queries, browser names, config format, and defaults.
Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.
First, you need to enable Grid prefixes by using either the grid: "autoplace"
option or the /* autoprefixer grid: autoplace */
control comment.
Second, you need to test every fix with Grid in IE. It is not an enable and forget feature, but it is still very useful. Financial Times and Yandex use it in production.
Third, there is only very limited auto placement support. Read the Grid Autoplacement support in IE section for more details.
Fourth, if you are not using the autoplacement feature, the best way
to use Autoprefixer is by using grid-template
or grid-template-areas
.
.page {
display: grid;
grid-gap: 33px;
grid-template:
"head head head" 1fr
"nav main main" minmax(100px, 1fr)
"nav foot foot" 2fr /
1fr 100px 1fr;
}
.page__head {
grid-area: head;
}
.page__nav {
grid-area: nav;
}
.page__main {
grid-area: main;
}
.page__footer {
grid-area: foot;
}
See also:
postcss-gap-properties
to use new gap
property
instead of old grid-gap
.postcss-grid-kiss
has alternate “everything in one property” syntax,
which makes using Autoprefixer’s Grid translations safer.Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer to minify CSS by cleaning unnecessary prefixes.
If you pass your browsers to Autoprefixer using its browsers
option, the other
tools will use their own config, leading webpack to remove the prefixes that
the first Autoprefixer added.
To avoid this, ensure you use either the browserslist config file or
browsers
key in your package.json
, so that all tools (Autoprefixer,
cssnano, doiuse, cssnext, etc) use the same browsers list.
-webkit-min-device-pixel-ratio
?@media (min-resolution: 2dppx) {
.image {
background-image: url(image@2x.png);
}
}
Will be compiled to:
@media (-webkit-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-resolution: 2dppx) {
.image {
background-image: url(image@2x.png);
}
}
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.
@-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 plugins to convert CSS to unprefixed state. Use postcss-unprefix 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.
system-ui
?system-ui
is technically not a prefix and the transformation is not
future-proof. You can use postcss-font-family-system-ui to transform
system-ui
to a practical font-family list.
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() ]))
.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.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
And create a postcss.config.js
with:
module.exports = {
plugins: [
require('autoprefixer')
]
}
The best way to use PostCSS with CSS-in-JS is astroturf
.
Add it’s loader to your webpack.config.js
:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
}
]
}
}
Then create postcss.config.js
:
module.exports = {
plugins: [
require('autoprefixer')
]
}
You can use the postcss-cli to run Autoprefixer from CLI:
npm install postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/
See postcss -h
for help.
autoprefixer-rails
and jekyll-assets
to Gemfile
autoprefixer
npm package and enable it:
environment.enable('autoprefixer')
You can use Autoprefixer with PostCSS in your Node.js application or if you want to develop an Autoprefixer plugin for a 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 a standalone build for the browser or for 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 values in all prefixed properties.
I recommend you to learn how to use build tools like Parcel. They work much better and will open you a whole new world of useful plugins and automation.
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 these 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 incorrectly, please create an issue on GitHub.
You can use these plugin options to control some of Autoprefixer’s features.
grid: "autoplace"
will enable -ms-
prefixes for Grid Layout including some
limited autoplacement support.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.remove: false
will disable cleaning outdated prefixes.You should set them inside the plugin like so:
autoprefixer({ grid: "autoplace" });
If you do not need Autoprefixer in some part of your CSS, you can use control comments to disable Autoprefixer.
.a {
transition: 1s; /* will be prefixed */
}
.b {
/* autoprefixer: off */
transition: 1s; /* will not be prefixed */
}
.c {
/* autoprefixer: ignore next */
transition: 1s; /* will not be prefixed */
mask: url(image.png); /* will be prefixed */
}
There are three types of control comments:
/* autoprefixer: (on|off) */
: enable/disable all Autoprefixer translations for the
whole block both before and after the comment./* autoprefixer: ignore next */
: disable Autoprefixer only for the next property
or next rule selector or at-rule parameters (but not rule/at‑rule body)./* autoprefixer grid: (autoplace|no-autoplace|off) */
: control how Autoprefixer handles
grid translations for the whole block:
autoplace
: enable grid translations with autoplacement support.no-autoplace
: enable grid translations with autoplacement support disabled.
(alias for deprecated value on
)off
: disable all grid translations.You can also use comments recursively:
/* autoprefixer: off */
@supports (transition: all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}
Note that comments that disable the whole block should not be featured in the same block twice:
/* How not to use block level control comments */
.do-not-do-this {
/* autoprefixer: off */
transition: 1s;
/* autoprefixer: on */
transform: rotate(20deg);
}
Function autoprefixer(options)
returns a new PostCSS plugin.
See PostCSS API for plugin usage documentation.
autoprefixer({ cascade: false })
Available options are:
env
(string): environment for Browserslist.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 10 versions of specification. Default is true
.grid
(false|"autoplace"|"no-autoplace"): should Autoprefixer
add IE 10-11 prefixes for Grid Layout properties?
false
(default): prevent Autoprefixer from outputting
CSS Grid translations."autoplace"
: enable Autoprefixer grid translations
and include autoplacement support. You can also use
/* autoprefixer grid: autoplace */
in your CSS."no-autoplace"
: enable Autoprefixer grid translations
but exclude autoplacement support. You can also use
/* autoprefixer grid: no-autoplace */
in your CSS.
(alias for the deprecated true
value)stats
(object): custom usage statistics for > 10% in my stats
browsers query.browsers
(array): list of queries for target browsers. Try to not use it.
The best practice is to use .browserslistrc
config
or browserslist
key in package.json
to share target browsers
with Babel, ESLint and Stylelint. See Browserslist docs
for available queries and default value.ignoreUnknownVersions
(boolean): do not raise error on unknown browser
version in Browserslist config or browsers
option. Default is false
.Plugin object has info()
method for debugging purpose.
You can use PostCSS processor to process several CSS files to increase performance.
If the grid
option is set to "autoplace"
, limited autoplacement support is added to Autoprefixers grid translations. You can also use the /* autoprefixer grid: autoplace */
control comment to enable autoplacement
Autoprefixer will only autoplace grid cells if both grid-template-rows
and grid-template-columns
has been set. If grid-template
or grid-template-areas
has been set, Autoprefixer will use area based cell placement instead.
Autoprefixer supports autoplacement by using nth-child
CSS selectors. It creates [number of columns] x [number of rows] nth-child
selectors. For this reason Autoplacement is only supported within the explicit grid.
/* Input CSS */
/* autoprefixer grid: autoplace */
.autoplacement-example {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 20px;
}
/* Output CSS */
/* autoprefixer grid: autoplace */
.autoplacement-example {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto 20px auto;
grid-template-rows: auto auto;
grid-gap: 20px;
}
.autoplacement-example > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.autoplacement-example > *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.autoplacement-example > *:nth-child(3) {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.autoplacement-example > *:nth-child(4) {
-ms-grid-row: 3;
-ms-grid-column: 3;
}
Be careful about enabling autoplacement in any already established projects that have previously not used Autoprefixer's grid autoplacement feature before.
If this was your html:
<div class="grid">
<div class="grid-cell"></div>
</div>
The following CSS will not work as expected with the autoplacement feature enabled:
/* Unsafe CSS when Autoplacement is enabled */
.grid-cell {
grid-column: 2;
grid-row: 2;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
Swapping the rules around will not fix the issue either:
/* Also unsafe to use this CSS */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.grid-cell {
grid-column: 2;
grid-row: 2;
}
One way to deal with this issue is to disable autoplacement in the grid-declaration rule:
/* Disable autoplacement to fix the issue */
.grid {
/* autoprefixer grid: no-autoplace */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.grid-cell {
grid-column: 2;
grid-row: 2;
}
The absolute best way to integrate autoplacement into already existing projects though is to leave autoplacement turned off by default and then use a control comment to enable it when needed. This method is far less likely to cause something on the site to break.
/* Disable autoplacement by default in old projects */
/* autoprefixer grid: no-autoplace */
/* Old code will function the same way it always has */
.old-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.old-grid-cell {
grid-column: 2;
grid-row: 2;
}
/* Enable autoplacement when you want to use it in new code */
.new-autoplace-friendly-grid {
/* autoprefixer grid: autoplace */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
}
Note that the grid: "no-autoplace"
setting and the
/* autoprefixer grid: no-autoplace */
control comment share identical functionality
to the grid: true
setting and the /* autoprefixer grid: on */
control comment.
There is no need to refactor old code to use no-autoplace
in place of the old
true
and on
statements.
Autoplacement only works inside the explicit grid. The columns and rows need to be defined
so that Autoprefixer knows how many nth-child
selectors to generate.
.not-allowed {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.is-allowed {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(10, auto);
}
The repeat(auto-fit, ...)
and repeat(auto-fill, ...)
grid functionality relies on
knowledge from the browser about screen dimensions and the number of available grid
items for it to work properly. Autoprefixer does not have access to this information
so unfortunately this little snippet will never be IE friendly.
.grid {
/* This will never be IE friendly */
grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
}
Elements must not be manually placed or given column/row spans inside an autoplacement grid. Only the most basic of autoplacement grids are supported. Grid cells can still be placed manually outside the the explicit grid though. Support for manually placing individual grid cells inside an explicit autoplacement grid is planned for a future release.
.autoplacement-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
}
/*
grid cells placed inside the explicit grid
will break the layout in IE
*/
.not-permitted-grid-cell {
grid-column: 1;
grid-row: 1;
}
/*
grid cells placed outside the
explicit grid will work in IE
*/
.permitted-grid-cell {
grid-column: 1 / span 2;
grid-row: 4;
}
If manual cell placement is required, we recommend using grid-template
or
grid-template-areas
instead:
.page {
display: grid;
grid-gap: 30px;
grid-template:
"head head"
"nav main" minmax(100px, 1fr)
"foot foot" /
200px 1fr;
}
.page__head {
grid-area: head;
}
.page__nav {
grid-area: nav;
}
.page__main {
grid-area: main;
}
.page__footer {
grid-area: foot;
}
::before
and ::after
pseudo elementsLet's say you have this HTML:
<div class="grid">
<div class="grid-cell"></div>
</div>
And you write this CSS:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.grid::before {
content: 'before';
}
.grid::after {
content: 'after';
}
This will be the output:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
}
.grid > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.grid > *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.grid::before {
content: 'before';
}
.grid::after {
content: 'after';
}
IE will place .grid-cell
, ::before
and ::after
in row 1 column 1.
Modern browsers on the other hand will place ::before
in row 1 column 1,
.grid-cell
in row 1 column 2, and ::after
in row 2 column 1.
See this Code Pen to see a visualization of the issue. View the Code Pen in both a modern browser and IE to see the difference.
Note that you can still create ::before
and ::after
elements as long as you manually
place them outside the explicit grid.
grid gap
value, columns and rows must be re-declaredIf you wish to change the size of a grid-gap
, you will need to redeclare the grid columns and rows.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 50px;
}
/* This will *NOT* work in IE */
@media (max-width: 600px) {
.grid {
grid-gap: 20px;
}
}
/* This will *NOT* work in IE */
.grid.small-gap {
grid-gap: 20px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 50px;
}
/* This *WILL* work in IE */
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
}
/* This *WILL* work in IE */
.grid.small-gap {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
Run npx autoprefixer --info
in your project directory to check
which browsers are selected and which properties will be prefixed:
$ npx autoprefixer --info
Browsers:
Edge: 16
These browsers account for 0.26% of all users globally
At-Rules:
@viewport: ms
Selectors:
::placeholder: ms
Properties:
appearance: webkit
flow-from: ms
flow-into: ms
hyphens: ms
overscroll-behavior: ms
region-fragment: ms
scroll-snap-coordinate: ms
scroll-snap-destination: ms
scroll-snap-points-x: ms
scroll-snap-points-y: ms
scroll-snap-type: ms
text-size-adjust: ms
text-spacing: ms
user-select: ms
JS API is also available:
var info = autoprefixer().info();
console.log(info);
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.