CSS属性/值的放置在用作后备时是否重要？ [英] Does the placement of a CSS property/value matter when it is used as a fallback?

问题描述

当CSS属性/值用作与某个CSS3属性/值不兼容的浏览器的后备广告时，CSS属性/值的位置是否重要？

例如， CSS3 calc（）函数仅适用于某些浏览器。假设我想要一个div，它的宽度是其父级的1/3。我可以使用 width：calc（100％/ 3）来实现这个浏览器 calc（）兼容。那么，对于不兼容的浏览器，我可以使用 width：33.33％作为后备。

：将 width：33.33％置于上方或下方width：calc（100％/ 3）在其有效性？一个层次结构是否有效，而另一个层次结构是否有效？

也就是说，我们的CSS属性如下：

  div.column {
 width：33.33％; / *后退在浏览器不支持calc（）* / 
 
 width：-webkit-calc（100％/ 3）; 
 width：-moz-calc（100％/ 3）; 
 width：calc（100％/ 3）; 
} 
  

与下列命令不同：

  div.column {
 width：-webkit-calc（100％/ 3）; 
 width：-moz-calc（100％/ 3）; 
 width：calc（100％/ 3）; 
 
 width：33.33％; / *如果浏览器不支持calc（）* / 
} 
  

是的，顺序很重要。浏览器将使用他们理解的最后一个规则，所以你的第二个例子将否定对于理解它的浏览器的calc（）调用。

由于 W3 说明：

...如果两个声明具有相同的权重，起源和特异性，则
后面指定的胜利。

Does the placement of a CSS property/value matter when it is being used as a "fallback" for browsers not compatible with a certain CSS3 property/value?

For example, the CSS3 calc() function only works with certain browsers. Let's say I want to have a div whose width is 1/3 its parent. I could use width:calc(100%/3) to achieve this with browsers that are calc() compatible. Then, for browsers that are not compatible, I could use width:33.33% as a fallback.

My question: does placing the width:33.33% above or below the width:calc(100% / 3) make a difference in its effectiveness? Would one hierarchy work, while the other would not?

That is, would ordering my CSS properties like this:

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */

    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
}

Be different than ordering them like this:

div.column {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);

    width: 33.33%; /* Fallback in case the browser does not support calc() */
}

解决方案

Yes, the order matters. Browsers will use the last rule they understand, so your second example would negate the calc() call for browsers that understand it.

As the W3 states:

...if two declarations have the same weight, origin and specificity, the latter specified wins.

这篇关于CSS属性/值的放置在用作后备时是否重要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！