CSS中属性的快捷写法是如何被识别的？ - 知乎129被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答235 条评论分享收藏感谢收起5381 PRBool CSSParserImpl::ParseBorderSide(nsresult& aErrorCode,
const nsCSSProperty aPropIDs[],
PRBool aSetAllSides)
const PRInt32 numProps = 3;
nsCSSValue
values[numProps];
PRInt32 found = ParseChoice(aErrorCode, values, aPropIDs, numProps);
if ((found & 1) || (PR_FALSE == ExpectEndProperty(aErrorCode))) {
return PR_FALSE;
if ((found & 1) == 0) { // Provide default border-width
values[0].SetIntValue(NS_STYLE_BORDER_WIDTH_MEDIUM, eCSSUnit_Enumerated);
if ((found & 2) == 0) { // Provide default border-style
values[1].SetNoneValue();
if ((found & 4) == 0) { // text color will be used
values[2].SetIntValue(NS_STYLE_COLOR_MOZ_USE_TEXT_COLOR, eCSSUnit_Enumerated);
if (aSetAllSides) {
static const nsCSSProperty kBorderSources[] = {
eCSSProperty_border_left_color_ltr_source,
eCSSProperty_border_left_color_rtl_source,
eCSSProperty_border_right_color_ltr_source,
eCSSProperty_border_right_color_rtl_source,
eCSSProperty_border_left_style_ltr_source,
eCSSProperty_border_left_style_rtl_source,
eCSSProperty_border_right_style_ltr_source,
eCSSProperty_border_right_style_rtl_source,
eCSSProperty_border_left_width_ltr_source,
eCSSProperty_border_left_width_rtl_source,
eCSSProperty_border_right_width_ltr_source,
eCSSProperty_border_right_width_rtl_source,
eCSSProperty_UNKNOWN
InitBoxPropsAsPhysical(kBorderSources);
// Parsing "border" set all four sides to the same thing
for (PRInt32 index = 0; index & 4; index++) {
NS_ASSERTION(numProps == 3, "This code needs updating");
AppendValue(kBorderWidthIDs[index], values[0]);
AppendValue(kBorderStyleIDs[index], values[1]);
AppendValue(kBorderColorIDs[index], values[2]);
// Just set our one side
for (PRInt32 index = 0; index & numProps; index++) {
AppendValue(aPropIDs[index], values[index]);
return PR_TRUE;
可以看出这里使用了 ParseChoice 去解析值放到 values 里面，然后判断值的个数。如果值有 3 个，就将 values 里的三个值依次放到所有 4 条边对应的属性数组里面去。然后我们再往上看，谁调用 ParseBorderSide 这个函数，搜索找到4257 PRBool CSSParserImpl::ParseProperty(nsresult& aErrorCode,
nsCSSProperty aPropID)
里面有4267
case eCSSProperty_border:
return ParseBorderSide(aErrorCode, kBorderTopIDs, PR_TRUE);
所以 Parser 应该是发现属性名为 border，就按照
里面定义的：&line-width& || &line-style& || &color&
去尝试解析属性值（注：在 spec 里面 || 表示值的顺序随意且可选填，按照类型（颜色、几何维度、某些特定关键词）区分，参考）。另外注意到这里传入的形参 aPropIDs，对应实参是 kBorderTopIDs，再找找看 kBorderTopIDs 的定义：3574 static const nsCSSProperty kBorderTopIDs[] = {
eCSSProperty_border_top_width,
eCSSProperty_border_top_style,
eCSSProperty_border_top_color
嗯看来只是复用了 border-top 的值列表，因为反正都是那三个值。接下来我们再挖一下 ParseBorderSide 里的这一行调用：PRInt32 found = ParseChoice(aErrorCode, values, aPropIDs, numProps);
4117 PRInt32 CSSParserImpl::ParseChoice(nsresult& aErrorCode, nsCSSValue aValues[],
const nsCSSProperty aPropIDs[], PRInt32 aNumIDs)
PRInt32 found = 0;
nsAutoParseCompoundProperty compound(this);
PRInt32 loop;
for (loop = 0; loop & aNumIDs; loop++) {
// Try each property parser in order
PRInt32 hadFound = found;
PRInt32 index;
for (index = 0; index & aNumIDs; index++) {
PRInt32 bit = 1 && index;
if ((found & bit) == 0) {
if (ParseSingleValueProperty(aErrorCode, aValues[index], aPropIDs[index])) {
found |= bit;
if (found == hadFound) {
// found nothing new
事到如今很明显了，就是遍历每种可能值的类型（比如 border 的情况就是依次尝试 width、style、color），尝试匹配读到的每一个值（看到两个 for loop 是不是有种微醺的感觉哈哈哈哈）。我们再看看 ParseSingleValueProperty 的实现：4637
case eCSSProperty_border_bottom_color:
case eCSSProperty_border_end_color_value: // for internal use
case eCSSProperty_border_left_color_value: // for internal use
case eCSSProperty_border_right_color_value: // for internal use
case eCSSProperty_border_start_color_value: // for internal use
case eCSSProperty_border_top_color:
return ParseVariant(aErrorCode, aValue, VARIANT_HCK,
nsCSSProps::kBorderColorKTable);
case eCSSProperty_border_bottom_style:
case eCSSProperty_border_end_style_value: // for internal use
case eCSSProperty_border_left_style_value: // for internal use
case eCSSProperty_border_right_style_value: // for internal use
case eCSSProperty_border_start_style_value: // for internal use
case eCSSProperty_border_top_style:
return ParseVariant(aErrorCode, aValue, VARIANT_HOK,
nsCSSProps::kBorderStyleKTable);
case eCSSProperty_border_bottom_width:
case eCSSProperty_border_end_width_value: // for internal use
case eCSSProperty_border_left_width_value: // for internal use
case eCSSProperty_border_right_width_value: // for internal use
case eCSSProperty_border_start_width_value: // for internal use
case eCSSProperty_border_top_width:
return ParsePositiveVariant(aErrorCode, aValue, VARIANT_HKL,
nsCSSProps::kBorderWidthKTable);
其中kBorderColorKTable、kBorderStyleKTable、kBorderWidthKTable 的定义可以在
找到，就是把各种类型的值的可能取值列出来，比如：863 const KTableValue nsCSSProps::kBorderStyleKTable[] = {
eCSSKeyword_none,
NS_STYLE_BORDER_STYLE_NONE,
eCSSKeyword_hidden, NS_STYLE_BORDER_STYLE_HIDDEN,
eCSSKeyword_dotted, NS_STYLE_BORDER_STYLE_DOTTED,
eCSSKeyword_dashed, NS_STYLE_BORDER_STYLE_DASHED,
eCSSKeyword_solid,
NS_STYLE_BORDER_STYLE_SOLID,
eCSSKeyword_double, NS_STYLE_BORDER_STYLE_DOUBLE,
eCSSKeyword_groove, NS_STYLE_BORDER_STYLE_GROOVE,
eCSSKeyword_ridge,
NS_STYLE_BORDER_STYLE_RIDGE,
eCSSKeyword_inset,
NS_STYLE_BORDER_STYLE_INSET,
eCSSKeyword_outset, NS_STYLE_BORDER_STYLE_OUTSET,
eCSSKeyword_UNKNOWN,-1
再在 ParseVariant 里找到这几行：3804
if ((aVariantMask & VARIANT_KEYWORD) != 0) {
PRInt32 value;
if (nsCSSProps::FindKeyword(keyword, aKeywordTable, value)) {
aValue.SetIntValue(value, eCSSUnit_Enumerated);
return PR_TRUE;
嗯就是查表，如果类型配上了就设值（VARIANT_* 是堆 mask，定义请参见 ）。如果没配上就 Unget 掉（上一层调用的那个 for loop 会继续尝试其他的类型或者进入错误处理）：3912
UngetToken();
return PR_FALSE;
ParsePositiveVariant 是调用 ParseVariant 的，多了一个正负判断而已，这里不赘述。所以综上所述，就是题主你说的那样，效率很低地遍历匹配的……当然你要考虑这是 C++，而且其实并不会遍历那么多遍（比如 border 才 3 x 3 而已），所以其实没有那么糟糕……（以前看 WebKit 代码的时候也经常有类似“卧槽你直接线性查找吗” 的时候，但是仔细一想好像最坏的场景数据量也大不到哪里去，真正比较关键的地方他们一般会做一些优化不这么暴力的）按理来说 WebKit 系那个 bison 生成的 shift-reduce parser 应该也是逐个尝试的，每遇上一个新值就查表找类型看符不符合写的规则，如果没有一个符合就进入错误处理，符合了就 shift 满了 3 个（可能不是硬写的 3，大概会有一些 trick 让它是个变量）（可能还要判断下分号）就 reduce 然后分析下一个。感兴趣的话可以去看比如 Blink 的那个塞给 bison 的文件 417 条评论分享收藏感谢收起目前最新的CSS是FPS联盟的4644吗？_百度知道
目前最新的CSS是FPS联盟的4644吗？
下吧里那个4624无法联网啊？因特网游戏无响应啥的？跪求大神。
我有更好的答案
反恐精英：全球攻势
为您推荐：
其他类似问题
您可能关注的内容
fps的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。