浏览器了解(三)CSS解析

2023-06-02

CSS解析

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{
mso-style-parent:"";
font-size:10.5pt;"Calibri","sans-serif";
mso-bidi-"Times New Roman";}

CSS的解析涉及到两大部分

1.       CSS词法分析(Lexer)

CSS的词法分析通过flex来实现,可以在Tokenizer.cpp中找到定义的token

2.       CSS语法分析(Parser)

CSS语法分析通过bison来实现,可以在CSSGrammar.h中找到语法的具体实现
         基于以上两点,可以生成可执行的CSS解释器的C代码。
下面看解析的结构
 

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{
mso-style-parent:"";
font-size:10.5pt;"Calibri","sans-serif";
mso-bidi-"Times New Roman";}

C×××ule由selector和Declaration组成。CSSStyleSheet是C×××ule的集合。在render时,CSSStyleSheet将和DOMTree一起Attachment,构成RenderTree。