You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
1.7 KiB

6 months ago
  1. # Autoprefixer [![Cult Of Martians][cult-img]][cult]
  2. <img align="right" width="94" height="71"
  3. src="https://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. ::placeholder {
  30. color: gray;
  31. }
  32. .image {
  33. background-image: url(image@1x.png);
  34. }
  35. @media (-webkit-min-device-pixel-ratio: 2),
  36. (min-resolution: 2dppx) {
  37. .image {
  38. background-image: url(image@2x.png);
  39. }
  40. }
  41. ```
  42. Twitter account for news and releases: [@autoprefixer].
  43. <a href="https://evilmartians.com/?utm_source=autoprefixer">
  44. <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
  45. </a>
  46. [interactive demo]: https://autoprefixer.github.io/
  47. [@autoprefixer]: https://twitter.com/autoprefixer
  48. [Can I Use]: https://caniuse.com/
  49. [cult-img]: https://cultofmartians.com/assets/badges/badge.svg
  50. [PostCSS]: https://github.com/postcss/postcss
  51. [cult]: https://cultofmartians.com/tasks/autoprefixer-grid.html
  52. ## Docs
  53. Read full docs **[here](https://github.com/postcss/autoprefixer#readme)**.