Analysis of chromium CSS (i) The formation logic of the default htmlcss (CHROMIUM39)

Source: Internet
Author: User

After the browser has loaded the resource, it begins to parse and render the resource. For chromium, it has a default CSSfor the Web page, or a default CSS.

I. Formation of the default style sheet

How many of these css are there? Let's take a look at the files in Blink: CSSDefaultStyleSheets.h

Several member variables are defined in this file:

Ownptrwillbemember<ruleset> M_defaultstyle;    Ownptrwillbemember<ruleset> M_defaultviewportstyle;    Ownptrwillbemember<ruleset> M_defaultquirksstyle;    Ownptrwillbemember<ruleset> M_defaultprintstyle;    Ownptrwillbemember<ruleset> M_defaultviewsourcestyle;    Ownptrwillbemember<ruleset> M_defaultxhtmlmobileprofilestyle;    Ownptrwillbemember<ruleset> M_defaulttransitionstyle;    Refptrwillbemember<stylesheetcontents> M_defaultstylesheet;    Refptrwillbemember<stylesheetcontents> M_viewportstylesheet;    Refptrwillbemember<stylesheetcontents> M_quirksstylesheet;    Refptrwillbemember<stylesheetcontents> M_svgstylesheet;    Refptrwillbemember<stylesheetcontents> M_mathmlstylesheet;    Refptrwillbemember<stylesheetcontents> M_mediacontrolsstylesheet; Refptrwillbemember<stylesheetcontents> M_fullscreenstylesheet;

From a name, we can also generally know what the scene or function is.

Here, let's look at M_defaultstylesheet, a style sheet that is related to the display style of the entire Web page.

1. Let's look at the initialization of this variable.

In the constructor for class Cssdefaultstylesheets , there is a code snippet:

    String defaultrules = string (htmlcss, sizeof (HTMLCSS)) + Rendertheme::theme (). Extradefaultstylesheet ();    M_defaultstylesheet = Parseuasheet (defaultrules);    M_defaultstyle->addrulesfromsheet (Defaultstylesheet (), Screeneval ());
2. Let's analyze the composition of the Defaultrules in the code snippet above.

It is composed of two parts: String (htmlcss, sizeof (HTMLCSS)) and Rendertheme::theme (). Extradefaultstylesheet ()
3. Let's take a look at the first part:String (htmlcss, sizeof (HTMLCSS))
Here is a variable that is HTMLCSS, which is defined in the file: UserAgentStyleSheets.h

This file is formed during the compilation process in the Out directory.

Let's take a look at the formation of this file.

First look at the file: Core_generated.gyp

There are code snippets:

 {' Action_name ': ' useragentstylesheets ', ' variables ': {' scripts ': ['. /build/scripts/ ',], ' stylesheets ': [' css/html.css ', ' Css/quirks.css ', ' css/view-source.css ', ' css/themechromium.css ', ' Css/themechromium Android.css ', ' css/themechromiumlinux.css ', ' css/themechromiumskia.css ', ' Css/theme Inputmultiplefields.css ', ' css/thememac.css ', ' css/themewin.css ', ' Css/themewinquir              Ks.css ', ' css/svg.css ', ' css/navigationtransitions.css ', ' css/mathml.css ',              ' Css/mediacontrols.css ', ' css/mediacontrolsandroid.css ', ' css/fullscreen.css ', ' Css/xhtmlmp.css ', ' css/viewportandroid.css ',],}, ' Inputs ': [' &L t;@ (Scripts) ', ' <@ (stylesheets) ', ' Outputs ': [' < (Blink_core_output_dir)/useragentstylesheets.h ',            ' < (blink_core_output_dir)/useragentstylesheetsdata.cpp ',], ' action ': [' python ', ' <@ (Scripts) ', '--namespace ', ' blink ', '--out-h=< (blink_core_output_dir)/use RAgentStyleSheets.h ', '--out-cpp=< (blink_core_output_dir)/useragentstylesheetsdata.cpp ', ' <@ (s Tylesheets) ',],},

Through this Python code we know that the UserAgentStyleSheetsData.cpp and its header files are formed by the script that compiles the section. The htmlcss we are looking for is related to the document in this area: Html.css. Other CSS is related to other style sheets.

Interested students can look at the html.css content.

4. Let's take a look at Part two: Rendertheme::theme (). Extradefaultstylesheet ()

This method is in the file RenderTheme.cpp:

String Rendertheme::extradefaultstylesheet () {    StringBuilder runtimecss;    if (runtimeenabledfeatures::d ialogelementenabled ()) {        runtimecss.appendliteral ("Dialog:not ([open]) {display: None }");        Runtimecss.appendliteral ("dialog {Position:absolute; left:0; right:0; Width:-webkit-fit-content; Height:-webkit-fit-content; Margin:auto; Border:solid; Padding:1em; Background:white; Color:black;} ");        Runtimecss.appendliteral ("Dialog::backdrop {position:fixed; top:0; right:0; bottom:0; left:0; Background:rgba (0,0,0,0.1); }");    }    if (runtimeenabledfeatures::contextmenuenabled ()) {        runtimecss.appendliteral ("menu[type=\" Popup\ "I" {display: None }");    }    return runtimecss.tostring ();}

This default style sheet is initialized only once. Here is a description of its composition, interested students can continue to study under. By changing the default style sheet, you can do a lot of things.

Let's take a look at the creation logic for this default style sheet.

Two. Creation logic for default style sheets

We look at the Documentloader::finishedloading method.

Method Documentloader::finishedloading, the method in the same file is called: documentloader::endwriting

The call stack starting from this method is as follows:

W/webkit  (8157): Documentloader::endwritingw/webkit  (8157): Documentwriter::end () W/webkit  (8157): Htmldocumentparser::finish () W/webkit  (8157): Htmldocumentparser::attempttoend () W/webkit  (8157): Htmldocumentparser::p reparetostopparsing ()
The invocation logic starting from the Preparetostopparsing method is as follows:

W/webkit (8157): Htmldocumentparser::p reparetostopparsing () W/webkit (8157): Htmldocumentparser:: Attempttorundeferredscriptsandend () W/webkit (8157): Htmldocumentparser::end () W/webkit (8157): HTMLTreeBuilder:: Finished () W/webkit (8157): Htmlconstructionsite::finishedparsing () W/webkit (8157): document::finishedparsing () W/ WebKit (8157): Frameloader::finishedparsing () W/webkit (8157): Document::explicitclose () W/webkit (8157): FrameLoader :: checkcompleted () W/webkit (8157): frameloader::completed () W/webkit (8157): Frameview:: Maintainscrollpositionatanchor W/webkit (8157): Frameloader::checkloadcomplete () W/webkit (8157): FrameLoader:: Checkloadcompleteforthisframe () W/webkit (8157): updaterendertreeifneeded () W/webkit (8157): Document:: Updaterendertreew/webkit (8157): Document::updatestylew/webkit (8157): Document::ensurestyleresolver () W/WebKit (815 7): styleresolver& ensureresolver () W/webkit (8157): Styleengine::createresolver () W/webkit (8157): StyleEnGine::appendactiveauthorstylesheets () W/webkit (8157): Styleresolver::finishappendauthorstylesheets () W/WebKit ( 8157): Styleresolver::collectfeatures () W/webkit (8157): Cssdefaultstylesheets::instance () W/WebKit (8157): Cssdefaultstylesheets::cssdefaultstylesheets ()

Analysis of chromium CSS (i) The formation logic of the default htmlcss (CHROMIUM39)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.