Is there a CSS tool / language / syntax to simplify "-moz" "-webkit" "-ms" "-o" statements compatibility?

huangapple
go评论97阅读模式
英文:

Is there a CSS tool / language / syntax to simplify "-moz" "-webkit" "-ms" "-o" statements compatibility?

问题

这是一个具有许多兼容性版本的示例代码：

  1. .shake {
  2.   background-color: #2bd993;
  3.   color: #fff;
  4.   font-size: 24px;
  5.   margin: 30px 0 0;
  6.   padding: 20px;
  7.   text-transform: uppercase;
  8. }
  10. .shake:hover {
  11.   animation: shake 150ms 2 linear;
  12.   -moz-animation: shake 150ms 2 linear;
  13.   -webkit-animation: shake 150ms 2 linear;
  14.   -o-animation: shake 150ms 2 linear;
  15. }
  17. @keyframes shake {
  18.   0% {
  19.     transform: translate(3px, 0);
  20.   }
  21.   50% {
  22.     transform: translate(-3px, 0);
  23.   }
  24.   100% {
  25.     transform: translate(0, 0);
  26.   }
  27. }
  29. @-moz-keyframes shake {
  30.   0% {
  31.     -moz-transform: translate(3px, 0);
  32.   }
  33.   50% {
  34.     -moz-transform: translate(-3px, 0);
  35.   }
  36.   100% {
  37.     -moz-transform: translate(0, 0);
  38.   }
  39. }
  41. @-webkit-keyframes shake {
  42.   0% {
  43.     -webkit-transform: translate(3px, 0);
  44.   }
  45.   50% {
  46.     -webkit-transform: translate(-3px, 0);
  47.   }
  48.   100% {
  49.     -webkit-transform: translate(0, 0);
  50.   }
  51. }
  53. @-ms-keyframes shake {
  54.   0% {
  55.     -ms-transform: translate(3px, 0);
  56.   }
  57.   50% {
  58.     -ms-transform: translate(-3px, 0);
  59.   }
  60.   100% {
  61.     -ms-transform: translate(0, 0);
  62.   }
  63. }
  65. @-o-keyframes shake {
  66.   0% {
  67.     -o-transform: translate(3px, 0);
  68.   }
  69.   50% {
  70.     -o-transform: translate(-3px, 0);
  71.   }
  72.   100% {
  73.     -o-transform: translate(0, 0);
  74.   }
  75. }

是否有CSS语言/语法/编写更少代码同时最大化向后兼容性的技巧？

到目前为止，我所取得的最好成果是使用CSS变量，但我想知道是否可以进一步简化。

英文:

This is an example code with many compatibility versions:

  1. .shake {
  2. background-color: #2bd993;
  3. color: #fff;
  4. font-size: 24px;
  5. margin: 30px 0 0;
  6. padding: 20px;
  7. text-transform: uppercase;
  8. }
  9. .shake:hover {
  10. animation: shake 150ms 2 linear;
  11. -moz-animation: shake 150ms 2 linear;
  12. -webkit-animation: shake 150ms 2 linear;
  13. -o-animation: shake 150ms 2 linear;
  14. }
  15. @keyframes shake {
  16. 0% {
  17. transform: translate(3px, 0);
  18. }
  19. 50% {
  20. transform: translate(-3px, 0);
  21. }
  22. 100% {
  23. transform: translate(0, 0);
  24. }
  25. }
  26. @-moz-keyframes shake {
  27. 0% {
  28. -moz-transform: translate(3px, 0);
  29. }
  30. 50% {
  31. -moz-transform: translate(-3px, 0);
  32. }
  33. 100% {
  34. -moz-transform: translate(0, 0);
  35. }
  36. }
  37. @-webkit-keyframes shake {
  38. 0% {
  39. -webkit-transform: translate(3px, 0);
  40. }
  41. 50% {
  42. -webkit-transform: translate(-3px, 0);
  43. }
  44. 100% {
  45. -webkit-transform: translate(0, 0);
  46. }
  47. }
  48. @-ms-keyframes shake {
  49. 0% {
  50. -ms-transform: translate(3px, 0);
  51. }
  52. 50% {
  53. -ms-transform: translate(-3px, 0);
  54. }
  55. 100% {
  56. -ms-transform: translate(0, 0);
  57. }
  58. }
  59. @-o-keyframes shake {
  60. 0% {
  61. -o-transform: translate(3px, 0);
  62. }
  63. 50% {
  64. -o-transform: translate(-3px, 0);
  65. }
  66. 100% {
  67. -o-transform: translate(0, 0);
  68. }
  69. }

Are there CSS languages / syntax / tips to write less code while maximizing retrocompatibility ?

The best I have achieved so far was with the use of CSS variables, but I wonder if we can simplify further.

答案1

得分: 1

如果您使用SASS或类似工具，可以添加Autoprefixer，您还可以查看https://caniuse.com/，看看是否仍然需要添加前缀。

英文:

If you would use SASS or the like you could add an Autoprefixer, you can also check https://caniuse.com/ and see if it is still necessary to add the prefixes

huangapple
  • 本文由 发表于 2023年4月20日 06:28:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/76059252.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定