更多
黑客联盟 黑客软件
学生黑客联盟
您现在的位置:学生黑客联盟 > 编程频道 > WEB前端 > 浏览信息
chromium CSS浅析(一) 默认htmlCss的形成逻辑(chromium39)
时间:2015-03-20 22:05 来源:www.stuhack.com 作者:学盟网
浏览器在将资源加载下来之后,则开始将资源进行解析和渲染。对于chromium来讲,它对网页有个默认的CSS,或者说缺省CSS。 一. 缺省样式表的形成 这些CSS有哪几个呢?我们来看看blink中文件:CSSDefaultStyleSheets.h 在这个文件中定义了几个成员变量: OwnPtr

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

学盟网

一. 缺省样式表的形成
www.stuhack.com

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

www.stuhack.com

在这个文件中定义了几个成员变量: copyright www.stuhack.com


www.stuhack.com

    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; 学生黑客联盟 www.stuhack.com 

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

www.stuhack.com

这里,我们来看看m_defaultStyleSheet,这个样式表关系着整个网页的显示风格。 内容来自学生黑客联盟

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

内容来自学生黑客联盟

在类CSSDefaultStyleSheets的构造函数中,有代码段: www.stuhack.com

copyright www.stuhack.com

    String defaultRules = String(htmlCss, sizeof(htmlCss)) + RenderTheme::theme().extraDefaultStyleSheet();

    m_defaultStyleSheet = parseUASheet(defaultRules);
    m_defaultStyle->addRulesFromSheet(defaultStyleSheet(), screenEval()); 本文来自学盟网(www.stuhack.com) 
2. 我们来分析下上面代码段中defaultRules的构成。

www.stuhack.com

其由两部分构成:String(htmlCss, sizeof(htmlCss)) 和 RenderTheme::theme().extraDefaultStyleSheet()
3. 我们先来看看第一部分:String(htmlCss, sizeof(htmlCss))
这里有个变量是htmlCss,这个变量定义在文件:UserAgentStyleSheets.h 学盟网

这个文件是在out目录下,编译过程中形成的。

学生黑客联盟 www.stuhack.com

我们接着看看这个文件的形成。

内容来自学生黑客联盟

先看看文件:core_generated.gyp

学生黑客联盟 www.stuhack.com

其中有代码段: 学盟网

www.stuhack.com

 {
          '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': [
            '<@(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)/UserAgentStyleSheets.h',
            '--out-cpp=<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',
            '<@(stylesheets)',
          ],
        }, 

www.stuhack.com


通过这段python代码我们知道,UserAgentStyleSheetsData.cpp和其头文件是通过该段编译脚本形成。我们要找的htmlCSS与这里面的文件:html.css有关系。其他的css与其他的样式表有关。

www.stuhack.com

感兴趣的同学可以看看html.css内容。

学生黑客联盟 www.stuhack.com

4. 我们来看看第二部分:RenderTheme::theme().extraDefaultStyleSheet() 本文来自学盟网(www.stuhack.com)

这个方法在文件RenderTheme.cpp中:

copyright www.stuhack.com

内容来自学生黑客联盟

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();
} copyright www.stuhack.com 

内容来自学生黑客联盟

这个缺省样式表,只会初始化一次。这里介绍了它的组成,有兴趣的同学可以继续研究下。通过缺省样式表的更改,可以做好多事。 学生黑客联盟 www.stuhack.com

接下来我们来看看这个缺省样式表的创建逻辑。

内容来自学生黑客联盟

二. 缺省样式表的创建逻辑

本文来自学盟网(www.stuhack.com)

我们从DocumentLoader::finishedLoading方法来看起。

学盟网

方法DocumentLoader::finishedLoading,会调用同文件中方法:DocumentLoader::endWriting 本文来自学盟网(www.stuhack.com)

从该方法开始的调用堆栈如下:

www.stuhack.com

学生黑客联盟 www.stuhack.com

W/WebKit  ( 8157): DocumentLoader::endWriting
W/WebKit  ( 8157): DocumentWriter::end() 
W/WebKit  ( 8157): HTMLDocumentParser::finish()
W/WebKit  ( 8157): HTMLDocumentParser::attemptToEnd()
W/WebKit  ( 8157): HTMLDocumentParser::prepareToStopParsing() 本文来自学盟网(www.stuhack.com) 
从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::updateRenderTree
W/WebKit  ( 8157): Document::updateStyle
W/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() 

学盟网

学生黑客联盟 www.stuhack.com


学盟网


学生黑客联盟 www.stuhack.com




本文标题:chromium CSS浅析(一) 默认htmlCss的形成逻辑(chromium39)

本文地址:http://www.stuhack.com/bc/qianduan/032014202.html

免责声明:本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。




百度钱包“落子

一个商户通过审核入驻百度钱包,将获得百度[查看详细]

移动搜索&发

移动搜索在移动端的创新和颠覆也为百度探索[查看详细]

张向宁:移动互联

张向宁回顾了他2002年提出的“互联网十大预[查看详细]

淘宝开卖二维码门

截至4月20日,淘宝已经售出车展的实体门票[查看详细]

百度钱包杀入移动

“百度钱包”将完成的 “搜索用户”与“消[查看详细]