【问题标题】:What mind is behind this prioritize of CSS3 cross browser?CSS3跨浏览器的这种优先级背后的想法是什么?
【发布时间】:2024-04-26 16:25:02
【问题描述】:

CSS3 跨浏览器的这种优先级背后的想法是什么?

例如:

.box_scale {
  -webkit-transform: scale(0.8);  /* Chrome, Safari 3.1+ */
     -moz-transform: scale(0.8);  /* Firefox 3.5+ */
      -ms-transform: scale(0.8);  /* IE 9 */
       -o-transform: scale(0.8);  /* Opera 10.50-12.00 */
          transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

第一个是-webkit-,第二个是-moz-,第三个是-ms-,第四个是-o-,最后没有任何前缀。这个优先级有什么意义?或者这无关紧要?

【问题讨论】:

标签: css cross-browser


【解决方案1】:

您可以在属性名称中看到一个倒置的阶梯,从最长的 (-webkit-) 开始,以最短的 (-o-) 和无前缀的属性结尾,通过缩进声明来支持冒号和值行起来。

除了前缀的顺序没有实际意义——你可以随意混合和匹配你的前缀的顺序,除了一个例外:无前缀的属性总是排在最后,因为它是属性的标准化版本,并且您希望浏览器选择使用它而不是其前缀版本,以确保您获得该属性最符合标准的行为。

【讨论】:

    【解决方案2】:

    顺序无关紧要,因为选择器针对特定的浏览器。大多数人选择这种方法纯粹是因为它看起来比不使用标签的方式更好。

    【讨论】:

      【解决方案3】:

      因为浏览器会忽略他们不理解的 CSS 代码,所以顺序并不重要。浏览器会使用它理解的那个,而忽略其他的。

      【讨论】: