登录  /  注册

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

php中文网
发布: 2016-06-24 11:48:43
原创
1263人浏览过

浏览器在将资源加载下来之后,则开始将资源进行解析和渲染。对于chromium来讲,它对网页有个默认的css,或者说缺省css。

一. 缺省样式表的形成

这些CSS有哪几个呢?我们来看看blink中文件:CSSDefaultStyleSheets.h

    在这个文件中定义了几个成员变量:


    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;</stylesheetcontents></stylesheetcontents></stylesheetcontents></stylesheetcontents></stylesheetcontents></stylesheetcontents></stylesheetcontents></ruleset></ruleset></ruleset></ruleset></ruleset></ruleset></ruleset>
登录后复制

从名字中,我们也大体也能知道其是作用于什么场景或者功能的。

这里,我们来看看m_defaultStyleSheet,这个样式表关系着整个网页的显示风格。

1. 我们来看看这个变量的初始化。

在类CSSDefaultStyleSheets的构造函数中,有代码段:

    String defaultRules = String(htmlCss, sizeof(htmlCss)) + RenderTheme::theme().extraDefaultStyleSheet();    m_defaultStyleSheet = parseUASheet(defaultRules);    m_defaultStyle-&gt;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': [            '  <br>      通过这段python代码我们知道,UserAgentStyleSheetsData.cpp和其头文件是通过该段编译脚本形成。我们要找的htmlCSS与这里面的文件:html.css有关系。其他的css与其他的样式表有关。  <p></p>  <p>    感兴趣的同学可以看看html.css内容。</p>  <p>  4. 我们来看看第二部分:RenderTheme::theme().extraDefaultStyleSheet()</p>  <p>      这个方法在文件RenderTheme.cpp中:</p>  <p>    </p>  <pre name="code" class="sycode">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&amp; 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()
登录后复制



智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号