Webkit kernel exploration [2] -- Webkit CSS implementation

Note:[Reprinted please indicate the source of the article and keep it as it is]

Source: http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html please
Author: Li Jiayi

The implementation of CSS in Webkit is a relatively independent module. Note that this is relative.

The role of CSS in Webkit is self-evident. In the era when the structure and style of documents were not separated in the early days of the Web, HTML took the two important responsibilities of document structure and style, that is, HTML is responsible for the structure of the document, and the document style is also specified through the tag attribute in HTML. It can be imagined that at that time, the development and use of the HMTL page was much inconvenient than it is now.

However, if you think about it carefully, it may be very close to the degree of technological development at that time. First, the Internet was far less popular at that time, and the web page was far less complex than it was now, unlike today, it can be said that the main dissemination of information in the world is in the form of web pages. There is no data to explain, but I think at least the trend is like this. In this way, the Internet is constantly moving forward, until the emergence of CSS, greatly improved the Web development model, from then on, the structure and style of the document is clearly divided into two. HTML is mainly responsible for document structure, while CSS is responsible for document style designation.

The introduction to CSS is already available on the Internet. Here we will introduce it from the perspective of Webkit implementation.

What is CSS?

CSS is short for Cascading Style Sheets. According to official definitions, it can be considered as a Style sheet language, which allows users to specify styles for structured documents (HTML documents. By using CSS, you can separate the content and style of documents to simplify the development and maintenance of web pages.

Since it is a style sheet language, it has corresponding syntax rules, specifying how to write a style sheet, so that its role and document content can become what the author wants. CSS statements are relatively simple. from the top down, a Cascading Style Sheet (CSS) is composed of a series of rules (rule, each rule is composed of a selector and several declarations. Each declaration is a key-value Pair consisting of a property and a value, as shown in.

 

Original Image Source: http://dabrook.org/cc/Basic-Anatomy-of-a-CSS-Rule.png

From here, we can see that the syntax is very simple, and it is actually very easy to use. Note: I am only talking about the ease of use here, just like a pencil, which can be used by anyone. The use of a pencil is certainly simple and cannot be simplified, but it is such a common tool, what Professionals and ordinary people can create is completely different. So what I want to say is that you can quickly learn how to use CSS does not mean that you have woven beautiful web pages. It is just a tool and you have to look at people to make full use of it.

From the perspective of its simple syntax, it seems that we only need to simply convert it into a corresponding program design model, but in reality, the implementation of CSS is still relatively complicated, the complexity lies in the complexity of CSS. It defines a series of rules to determine which elements to specify the style, the inheritance relationship of the style, and which are inherited, which are non-inherited and the overlapping of multiple styles acting on the same element? In addition, it has a complete attribute set for all the styles that can be specified. From the implementation point of view, there are still a lot of things to be taken into account for a complete and compatible standard CSS implementation.

CSS Implementation Model

The implementation code of webkit css is in The webcore/css directory. It is a relatively independent module in webkit. The following class diagram is used to better understand css implementation, outlines the internal implementation of CSS.

The css document written by the user will eventually be converted to the internal model representation of webkit. There are several important classes here.

(To be continued ...)

CSS default style sheet

You can see from the implementation of Webkit CSS that even if you do not specify any style sheets, in fact, when the CSS module runs, it will load several default style sheets, in the CSSStyleSelector constructor, The loaddefastyle style () function is always called to load the default style table.

These default Style Sheets contain the most basic style information of Some HTML elements. I believe that most users who use CSS will not add a display: block to the <div> style, right, almost all people who use css html know that DIV is a block-level element, so no one will do this. But by understanding the specific implementation of its CSS module, we can know that, these default style sheets have already specified a series of rules that we consider as true.

The four default style sheets are

• Html4UserAgentStyleSheet
• QuirksUserAgentStyleSheet
• SvgUserAgentStyleSheet
• SourceUserAgentStyleSheet

In terms of the name, you can also get to know 1 and 2. They are not stored as files, but appear as character arrays in CSS, that is to say, if the data is compiled into the code, the default style sheet should be used every time to reduce the performance loss caused by I/O.

To illustrate what I mentioned above, these default style sheets describe some of the most basic information about HTML elements. Let's look at an example,

For example, html4useragentstylesheet can be seen from its name. This is the default style table of the legendary browser. Let's take a look. Here we only take a clip.

 

  1 html {
 2     display: block
 3  }
 4 
 5 head {
 6     display: none
 7  }
 8 
 9 meta {
10     display: none
11  }
12 
13 title {
14     display: none
15  }
16 
17 link {
18     display: none
19  }
20 
21 style {
22     display: none
23  }
24 
25 script {
26     display: none
27  }
28 
29 body {
30     display: block;
31     margin: 8px
32  }
33 
34 p {
35     display: block;
36     margin: 1.0__qem 0px
37  }
38 
39 div {
40     display: block
41  }
42 
43 layer {
44     display: block
45  }

 

Html {display: block} head {display: none} meta {display: none} title {display: none} link {display: none} style {display: none} script {display: none} body {display: block; margin: 8px} p {display: block; margin: 1.0 _ qem 0px} div {display: block} layer {display: block}

From the above, we can see that some of the most basic attributes are actually specified. If these default values are not specified, you have to add these rules on your own, which is very troublesome.

Other tables are not analyzed here.

CSS Parsing

When using CSS, just write a regular set and save it as a .css file. You can reference it in HTML. Of course, the external style table is used here, But CSS is used. I do not intend to discuss several CSS usage methods here, therefore, they are all external.

Then how can we convert the CSS style table written according to the syntax rules to the CSS model inside Webkit? This naturally requires lexical syntax analysis. Here, Webkit uses an automatic code generation tool to generate the corresponding code. That is to say, lexical analysis and syntax analysis are automatically generated, but they are incomplete, then, we need to write some intrusive code to make the CSS module work, we need to write some functions to Call Back the automatically generated code. Those who have used other types of parser should be familiar with this. If anyone is interested in this part of the code, you can study it. I have called this part of code for finding a cross-platform bug. The structure is quite simple, and the code looks a little more. The portal is yylex and yyparse. If you are interested, you can check it yourself.

Where are the Call Back implemented in Webkit? It's in CSSParser. Obviously, this is the part of the Code that needs to be manually parsed by CSS. Some CSS parsing functions are also provided here. They call lex, parse, and other code generation functions. The Call Back required in the generated code also needs to be implemented here.

For example, now we can look at the implementation of a large callback function, createStyleRule (), which will be called when general rules need to be established.

  1 CSSRule* CSSParser::createStyleRule(CSSSelector* selector)
 2 {
 3     CSSStyleRule* rule = 0;
 4     if (selector) {
 5         rule = new CSSStyleRule(styleElement);
 6         m_parsedStyleObjects.append(rule);
 7         rule->setSelector(sinkFloatingSelector(selector));
 8         rule->setDeclaration(new CSSMutableStyleDeclaration(rule, parsedProperties, numParsedProperties));
 9     }
10     clearProperties();
11     return rule;
12 }

 

CSSRule * CSSParser: createStyleRule (CSSSelector * selector) {CSSStyleRule * rule = 0; if (selector) {rule = new CSSStyleRule (styleElement); rule (rule ); rule-> setSelector (sinkFloatingSelector (selector); rule-> setDeclaration (new CSSMutableStyleDeclaration (rule, parsedProperties, numParsedProperties);} clearProperties (); return rule ;}

From the implementation of this function, we can clearly see that when the parser creates a CSSStyleRule to meet a certain condition, it will call this function. The function is to create a CSSStyleRule, and add it to the parsed style Object List m_parsedStyleObjects. The object here refers to the Rule. As a result, after such resolution, all Style Rule in the input Style table will be converted to the internal model object CSSStyleRule of Webkit and stored in m_parsedStyleObjects, it is a Vector.

Such functions include createCharsetRule, createImportRule, and createMediaRule. Their functions are basically similar to those of createStyleRule. They are all prepared to create Rule, but they are different types of Rule.

After learning about the above, you will be able to understand how the CSS analytical expression works. But what are the results of our analysis? By calling the parseString function of CSSStyleSheet, the CSS parsing process is started. After parsing, all the Rule will be stored in the corresponding CSSStyleSheet object. However, the rules at this time are still not easy to process and need to be converted to CSSRuleSet. CSSRuleSet provides an addRulesFromSheet method to convert the rule in CSSStyleSheet to the rule in CSSRuleSet, in this way, all style-only rules are stored in the corresponding set. The abstract of this set is CSSRuleSet. Later, we can determine the style of elements on each page based on these cssrulesets, which will be introduced later.

(...)

How CSS acts on the Render Tree

The so-called effect on the Render Tree actually refers to specifying a specific style for the corresponding Render Object based on the above parsing results, this style is abstracted as RenderStyle (for more information about Render Tree, see my other articles ).

(...)

(To be continued ..)