74 lines
1.9 KiB
Markdown
74 lines
1.9 KiB
Markdown
|
# 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;
|
|||
|
|
}
|
|||
|
|
::-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
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Docs
|
|||
|
|
Read **[full docs](https://github.com/postcss/autoprefixer#readme)** on GitHub.
|