# Autoprefixer [![Cult Of Martians][cult-img]][cult]
<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):
```css
::placeholder {
color: gray;
}
.image {
background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
.image {
background-image: url(image@2x.png);
}
}
```
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.
```css
::-moz-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
.image {
background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
.image {
background-image: url(image@2x.png);
}
}
```
Twitter account for news and releases: [@autoprefixer].
<a href="https://evilmartians.com/?utm_source=autoprefixer">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
</a>
[interactive demo]: https://autoprefixer.github.io/
[@autoprefixer]: https://twitter.com/autoprefixer
[recommended]: https://developers.google.com/web/tools/setup/setup-buildtools#dont_trip_up_with_vendor_prefixes
[Can I Use]: https://caniuse.com/
[cult-img]: http://cultofmartians.com/assets/badges/badge.svg
[PostCSS]: https://github.com/postcss/postcss
[cult]: http://cultofmartians.com/tasks/autoprefixer-grid.html
## Contents
* [Contents](#contents)
* [Browsers](#browsers)
* [FAQ](#faq)
* [Does Autoprefixer polyfill Grid Layout for IE?](#does-autoprefixer-polyfill-grid-layout-for-ie)
* [Does it add polyfills?](#does-it-add-polyfills)
* [Why doesn’t Autoprefixer add prefixes to `border-radius`?](#why-doesnt-autoprefixer-add-prefixes-to-border-radius)
* [Why does Autoprefixer use unprefixed properties in `@-webkit-keyframes`?](#why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes)
* [How to work with legacy `-webkit-` only code?](#how-to-work-with-legacy--webkit--only-code)
* [Does Autoprefixer add `-epub-` prefix?](#does-autoprefixer-add--epub--prefix)
* [Why doesn’t Autoprefixer transform generic font-family `system-ui`?](#why-doesnt-autoprefixer-transform-generic-font-family-system-ui)
* [Usage](#usage)
* [Gulp](#gulp)
* [Webpack](#webpack)
* [CSS-in-JS](#css-in-js)
* [CLI](#cli)
* [Other Build Tools](#other-build-tools)
* [Preprocessors](#preprocessors)
* [GUI Tools](#gui-tools)
* [JavaScript](#javascript)
* [Text Editors and IDE](#text-editors-and-ide)
* [Warnings](#warnings)
* [Disabling](#disabling)
* [Prefixes](#prefixes)
* [Features](#features)
* [Control Comments](#control-comments)
* [Options](#options)
* [Environment Variables](#environment-variables)
* [Using environment variables to support CSS Grid prefixes in Create React App](#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app)
* [Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie)
* [Beware of enabling autoplacement in old projects](#beware-of-enabling-autoplacement-in-old-projects)
* [Autoplacement limitations](#autoplacement-limitations)
* [Both columns and rows must be defined](#both-columns-and-rows-must-be-defined)
* [Repeat auto-fit and auto-fill are not supported](#repeat-auto-fit-and-auto-fill-are-not-supported)
* [No manual cell placement or column/row spans allowed inside an autoplacement grid](#no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid)
* [Do not create `::before` and `::after` pseudo elements](#do-not-create-before-and-after-pseudo-elements)
* [When changing the `grid gap` value, columns and rows must be re-declared](#when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared)
* [Debug](#debug)
* [Security Contact](#security-contact)
* [For Enterprise](#for-enterprise)
## Browsers
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.
[Browserslist docs]: https://github.com/browserslist/browserslist#queries
[babel-preset-env]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
[Best Practices]: https://github.com/browserslist/browserslist#best-practices
[Browserslist]: https://github.com/browserslist/browserslist
[Stylelint]: https://stylelint.io/
## FAQ
### Does Autoprefixer polyfill Grid Layout for IE?
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.
Also you can use environment variable to enable Grid:
`AUTOPREFIXER_GRID=autoplace npm build`.
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](#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`.
```css
.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:
* [The guide about Grids in IE and Autoprefixer].
* [`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.
[The guide about Grids in IE and Autoprefixer]: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
[`postcss-gap-properties`]: https://github.com/jonathantneal/postcss-gap-properties
[`postcss-grid-kiss`]: https://github.com/sylvainpolletvillard/postcss-grid-kiss
### Does it add polyfills?
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:
- [postcss-preset-env] is a plugins preset with polyfills and Autoprefixer
to write future CSS today.
- [Oldie], a PostCSS plugin that handles some IE hacks (opacity, rgba, etc).
- [postcss-flexbugs-fixes], a PostCSS plugin to fix flexbox issues.
[postcss-flexbugs-fixes]: https://github.com/luisrudge/postcss-flexbugs-fixes
[postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env
[Oldie]: https://github.com/jonathantneal/oldie
### Why doesn’t Autoprefixer add pref
没有合适的资源?快使用搜索试试~ 我知道了~
sublimetext3 sublimetext3工具
共2000个文件
js:8451个
py:1504个
md:398个
需积分: 8 0 下载量 8 浏览量
2023-03-27
17:04:34
上传
评论
收藏 83.16MB ZIP 举报
温馨提示
sublimetext3 sublimetext3工具
资源推荐
资源详情
资源评论
收起资源包目录
sublimetext3 sublimetext3工具 (2000个子文件)
styles.min.css 20KB
styles.min.css 20KB
default.css 7KB
default.css 7KB
default.css 7KB
default.css 7KB
default.css 7KB
default.css 7KB
default.css 7KB
default.css 7KB
extra-06017885a7.css 6KB
extra-d04c85ed4a.css 5KB
extra-d04c85ed4a.css 5KB
test.css 43B
test.css 43B
test.css 43B
test.css 43B
test.css 43B
test.css 43B
test.css 43B
test.css 43B
test.css 43B
index.html 446KB
index.html 444KB
test.html 90B
test.html 90B
test.html 90B
test.html 90B
test.html 90B
test.html 90B
test.html 90B
test.html 90B
test.html 90B
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.debug.js 266KB
source-map.js 104KB
source-map.js 104KB
source-map.js 104KB
source-map.js 104KB
source-map.js 104KB
source-map.js 104KB
source-map.js 104KB
source-map.js 104KB
source-map.js 104KB
container.js 74KB
container.js 74KB
container.js 74KB
container.js 74KB
container.js 65KB
container.js 65KB
container.js 65KB
parser.js 57KB
parser.js 57KB
parser.js 57KB
parser.js 57KB
parser.js 55KB
parser.js 55KB
parser.js 55KB
node.js 51KB
node.js 51KB
node.js 51KB
node.js 51KB
node.js 46KB
node.js 46KB
node.js 46KB
scss-tokenize.js 43KB
scss-tokenize.js 43KB
semver.js 41KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
source-map-consumer.js 40KB
scss-tokenize.js 39KB
scss-tokenize.js 39KB
scss-tokenize.js 39KB
semver.js 38KB
stringifier.js 36KB
stringifier.js 36KB
stringifier.js 36KB
stringifier.js 36KB
lazy-result.js 36KB
lazy-result.js 36KB
lazy-result.js 36KB
lazy-result.js 36KB
lazy-result.js 35KB
lazy-result.js 35KB
lazy-result.js 35KB
stringifier.js 34KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
chenabin_php
- 粉丝: 8
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功