82573731a397dd57ab8d7d8ef6d545c346578c0d02da1f72c2fa66af2cf12e98c18dcf48c2d1e3dbb1b23610f198fa7f4f526c47813441f0563dabbf45f802 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. # Autoprefixer [![Cult Of Martians][cult-img]][cult]
  2. <img align="right" width="94" height="71"
  3. src="http://postcss.github.io/autoprefixer/logo.svg"
  4. title="Autoprefixer logo by Anton Lovchikov">
  5. [PostCSS] plugin to parse CSS and add vendor prefixes to CSS rules using values
  6. from [Can I Use]. It is [recommended] by Google and used in Twitter and Alibaba.
  7. Write your CSS rules without vendor prefixes (in fact, forget about them
  8. entirely):
  9. ```css
  10. ::placeholder {
  11. color: gray;
  12. }
  13. .image {
  14. background-image: url(image@1x.png);
  15. }
  16. @media (min-resolution: 2dppx) {
  17. .image {
  18. background-image: url(image@2x.png);
  19. }
  20. }
  21. ```
  22. Autoprefixer will use the data based on current browser popularity and property
  23. support to apply prefixes for you. You can try the [interactive demo]
  24. of Autoprefixer.
  25. ```css
  26. ::-moz-placeholder {
  27. color: gray;
  28. }
  29. :-ms-input-placeholder {
  30. color: gray;
  31. }
  32. ::-ms-input-placeholder {
  33. color: gray;
  34. }
  35. ::placeholder {
  36. color: gray;
  37. }
  38. .image {
  39. background-image: url(image@1x.png);
  40. }
  41. @media (-webkit-min-device-pixel-ratio: 2),
  42. (min-resolution: 2dppx) {
  43. .image {
  44. background-image: url(image@2x.png);
  45. }
  46. }
  47. ```
  48. Twitter account for news and releases: [@autoprefixer].
  49. <a href="https://evilmartians.com/?utm_source=autoprefixer">
  50. <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
  51. </a>
  52. [interactive demo]: https://autoprefixer.github.io/
  53. [@autoprefixer]: https://twitter.com/autoprefixer
  54. [recommended]: https://developers.google.com/web/tools/setup/setup-buildtools#dont_trip_up_with_vendor_prefixes
  55. [Can I Use]: https://caniuse.com/
  56. [cult-img]: http://cultofmartians.com/assets/badges/badge.svg
  57. [PostCSS]: https://github.com/postcss/postcss
  58. [cult]: http://cultofmartians.com/tasks/autoprefixer-grid.html
  59. ## Docs
  60. Read **[full docs](https://github.com/postcss/autoprefixer#readme)** on GitHub.