您好,欢迎访问一九零五行业门户网

chromium CSS浅析(一) 默认htmlCss的形成逻辑(chromium39)_html/css_WEB-ITnose

浏览器在将资源加载下来之后,则开始将资源进行解析和渲染。对于chromium来讲,它对网页有个默认的css,或者说缺省css。
一. 缺省样式表的形成
这些css有哪几个呢?我们来看看blink中文件:cssdefaultstylesheets.h
    在这个文件中定义了几个成员变量:
ownptrwillbemember m_defaultstyle; ownptrwillbemember m_defaultviewportstyle; ownptrwillbemember m_defaultquirksstyle; ownptrwillbemember m_defaultprintstyle; ownptrwillbemember m_defaultviewsourcestyle; ownptrwillbemember m_defaultxhtmlmobileprofilestyle; ownptrwillbemember m_defaulttransitionstyle; refptrwillbemember m_defaultstylesheet; refptrwillbemember m_viewportstylesheet; refptrwillbemember m_quirksstylesheet; refptrwillbemember m_svgstylesheet; refptrwillbemember m_mathmlstylesheet; refptrwillbemember m_mediacontrolsstylesheet; refptrwillbemember m_fullscreenstylesheet;
从名字中,我们也大体也能知道其是作用于什么场景或者功能的。
这里,我们来看看m_defaultstylesheet,这个样式表关系着整个网页的显示风格。
1. 我们来看看这个变量的初始化。
在类cssdefaultstylesheets的构造函数中,有代码段:
string defaultrules = string(htmlcss, sizeof(htmlcss)) + rendertheme::theme().extradefaultstylesheet(); m_defaultstylesheet = parseuasheet(defaultrules); m_defaultstyle->addrulesfromsheet(defaultstylesheet(), screeneval());
2. 我们来分析下上面代码段中defaultrules的构成。
    其由两部分构成:string(htmlcss, sizeof(htmlcss))  和 rendertheme::theme().extradefaultstylesheet()
3. 我们先来看看第一部分:string(htmlcss, sizeof(htmlcss))
    这里有个变量是htmlcss,这个变量定义在文件:useragentstylesheets.h
    这个文件是在out目录下,编译过程中形成的。
    我们接着看看这个文件的形成。
   先看看文件:core_generated.gyp
   其中有代码段:
{ 'action_name': 'useragentstylesheets', 'variables': { 'scripts': [ '../build/scripts/make-file-arrays.py', ], 'stylesheets': [ 'css/html.css', 'css/quirks.css', 'css/view-source.css', 'css/themechromium.css', 'css/themechromiumandroid.css', 'css/themechromiumlinux.css', 'css/themechromiumskia.css', 'css/themeinputmultiplefields.css', 'css/thememac.css', 'css/themewin.css', 'css/themewinquirks.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': [ '
     通过这段python代码我们知道,useragentstylesheetsdata.cpp和其头文件是通过该段编译脚本形成。我们要找的htmlcss与这里面的文件:html.css有关系。其他的css与其他的样式表有关。
    感兴趣的同学可以看看html.css内容。
  4. 我们来看看第二部分:rendertheme::theme().extradefaultstylesheet()
      这个方法在文件rendertheme.cpp中:
string rendertheme::extradefaultstylesheet(){ stringbuilder runtimecss; if (runtimeenabledfeatures::dialogelementenabled()) { 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();}
这个缺省样式表,只会初始化一次。这里介绍了它的组成,有兴趣的同学可以继续研究下。通过缺省样式表的更改,可以做好多事。
   接下来我们来看看这个缺省样式表的创建逻辑。
二. 缺省样式表的创建逻辑
    我们从documentloader::finishedloading方法来看起。
     方法documentloader::finishedloading,会调用同文件中方法:documentloader::endwriting
从该方法开始的调用堆栈如下:
w/webkit ( 8157): documentloader::endwritingw/webkit ( 8157): documentwriter::end() w/webkit ( 8157): htmldocumentparser::finish()w/webkit ( 8157): htmldocumentparser::attempttoend()w/webkit ( 8157): htmldocumentparser::preparetostopparsing()
从preparetostopparsing方法开始的调用逻辑如下:
w/webkit ( 8157): htmldocumentparser::preparetostopparsing() 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 ( 8157): 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()
其它类似信息

推荐信息