12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- # 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.
|