CSS 规则如何针对重复(后备)属性进行评估?
How is a CSS rule evaluated, with respect to duplicate (fallback) attributes?
Web 浏览器如何解释 CSS 规则中的重复属性?
这里有一个例子是什么意思:
body
{
background-color:red;
background-color:blue;
background-color:rgba(0,0,255,1);
}
对我来说重要的方面:
- 多次定义一个属性是否有效?
是否对规则进行了评估,以便将属性的值设置为遇到的最后一个值(last - 如稍后出现在规则文本中)用来?
通过实验,我看到在上面的示例中使用了 rgba(0,0,255,1)
,但这是巧合还是定义?
如果浏览器无法理解某个值会怎样?会不会"fallback"到之前看到的last value,还理解为或者会因为不理解last value而变成undefined?
例如,如果浏览器不支持 rgba(r,g,b)
,而是 red
和 blue
。然后将背景颜色设置为 blue
,因为它是最后一个值(某种后备),还是会完全失败?
(假设有一个定义的行为使用最后一个 "understood" 值),这对所有理解的属性都有效吗? (例如,Microsoft IE6 Apple 的 Safari 浏览器 并未实现所有 touch-action
值,只有 auto
和 manipulation
,因此我可以执行以下操作吗:
body
{
/* first set to manipulation, to at*/
/* least disable double-tap-zoom on iOS Safari*/
touch-action:manipulation;
/* then set it to the actually desired */
/* value of pan-y, supported by other */
/* modern browsers */
touch-action:pan-y;
}
您的假设是正确的。根据 MDN:CSS 如果浏览器遇到它不理解的声明或规则,它会完全跳过它而不应用它或抛出错误。
阅读此处:https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
由于我理解你的问题,我会尽量给你一个更广泛的画面,并会尽量解释你提到的每一个重要方面。
创建相同的规则并一遍又一遍地更改其值是没有意义的。正如 CSS 在标签中从上到下读取或 class 即; body{} 在上述情况下,每次它读取包中的相同规则时,它都会重新实例化该规则,直到在规则末尾使用“!important”明确定义。
是的,它的工作就像你为你的第二个方面所说的一样简单。
根据 MDN:CSS 如果浏览器遇到它不理解的规则,它将跳过它并继续执行。
一条CSS条规则编写完成,各部分命名,例如:
at-rule optional (conditions) {
/* rule */
/* begins with a selector list */
selector1, selector2 /* {
/* block rule */
property1: valueA;
property2: value2;
property1: valueB;
}
/* end of rule */
}
- at-rule like
@media <media-query-list>
必须应用,否则内部的所有内容都将被忽略(例如,如果用户调整其视口的大小,可能会在 2s 之后或之前应用)。如果无效,则永远不会应用
- 如果选择器列表中的任何选择器在此浏览器中无效,则忽略整个规则
- 对于每个 属性,应用浏览器理解的最后一个值。它是在同一条规则中还是在不同的规则中,在不同的样式表中,等等都没有关系。选择器的特异性适用(at-rules 没有任何附加的特异性)因此遇到的最后一个有效声明的选择器必须具有更高或与倒数第二个相同的特异性,否则它将不适用。
所以:
- 多次定义CSS属性有效
- 是
- 见上文(您有错别字:现代浏览器可以理解
rgb(r, g, b)
和 rgba(r, g, b, a)
,但 rgba(r, g, b)
不理解)
- 是的
编辑:这是作者样式表(你和我是作者,是网络developers/designers)当你考虑user agent stylesheets, user stylesheets and !important
时还有另一组优先级(用户总是对网络 :p).
Web 浏览器如何解释 CSS 规则中的重复属性?
这里有一个例子是什么意思:
body
{
background-color:red;
background-color:blue;
background-color:rgba(0,0,255,1);
}
对我来说重要的方面:
- 多次定义一个属性是否有效?
是否对规则进行了评估,以便将属性的值设置为遇到的最后一个值(last - 如稍后出现在规则文本中)用来? 通过实验,我看到在上面的示例中使用了
rgba(0,0,255,1)
,但这是巧合还是定义?如果浏览器无法理解某个值会怎样?会不会"fallback"到之前看到的last value,还理解为或者会因为不理解last value而变成undefined?
例如,如果浏览器不支持
rgba(r,g,b)
,而是red
和blue
。然后将背景颜色设置为blue
,因为它是最后一个值(某种后备),还是会完全失败?(假设有一个定义的行为使用最后一个 "understood" 值),这对所有理解的属性都有效吗? (例如,
Microsoft IE6Apple 的 Safari 浏览器 并未实现所有touch-action
值,只有auto
和manipulation
,因此我可以执行以下操作吗:
body { /* first set to manipulation, to at*/ /* least disable double-tap-zoom on iOS Safari*/ touch-action:manipulation; /* then set it to the actually desired */ /* value of pan-y, supported by other */ /* modern browsers */ touch-action:pan-y; }
您的假设是正确的。根据 MDN:CSS 如果浏览器遇到它不理解的声明或规则,它会完全跳过它而不应用它或抛出错误。
阅读此处:https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
由于我理解你的问题,我会尽量给你一个更广泛的画面,并会尽量解释你提到的每一个重要方面。
创建相同的规则并一遍又一遍地更改其值是没有意义的。正如 CSS 在标签中从上到下读取或 class 即; body{} 在上述情况下,每次它读取包中的相同规则时,它都会重新实例化该规则,直到在规则末尾使用“!important”明确定义。
是的,它的工作就像你为你的第二个方面所说的一样简单。
根据 MDN:CSS 如果浏览器遇到它不理解的规则,它将跳过它并继续执行。
一条CSS条规则编写完成,各部分命名,例如:
at-rule optional (conditions) {
/* rule */
/* begins with a selector list */
selector1, selector2 /* {
/* block rule */
property1: valueA;
property2: value2;
property1: valueB;
}
/* end of rule */
}
- at-rule like
@media <media-query-list>
必须应用,否则内部的所有内容都将被忽略(例如,如果用户调整其视口的大小,可能会在 2s 之后或之前应用)。如果无效,则永远不会应用 - 如果选择器列表中的任何选择器在此浏览器中无效,则忽略整个规则
- 对于每个 属性,应用浏览器理解的最后一个值。它是在同一条规则中还是在不同的规则中,在不同的样式表中,等等都没有关系。选择器的特异性适用(at-rules 没有任何附加的特异性)因此遇到的最后一个有效声明的选择器必须具有更高或与倒数第二个相同的特异性,否则它将不适用。
所以:
- 多次定义CSS属性有效
- 是
- 见上文(您有错别字:现代浏览器可以理解
rgb(r, g, b)
和rgba(r, g, b, a)
,但rgba(r, g, b)
不理解) - 是的
编辑:这是作者样式表(你和我是作者,是网络developers/designers)当你考虑user agent stylesheets, user stylesheets and !important
时还有另一组优先级(用户总是对网络 :p).