打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
chromium CSS浅析(一) 默认htmlCss的形成逻辑(chromium39)

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

一. 缺省样式表的形成

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

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

  1. OwnPtrWillBeMember<RuleSet> m_defaultStyle;

  2. OwnPtrWillBeMember<RuleSet> m_defaultViewportStyle;

  3. OwnPtrWillBeMember<RuleSet> m_defaultQuirksStyle;

  4. OwnPtrWillBeMember<RuleSet> m_defaultPrintStyle;

  5. OwnPtrWillBeMember<RuleSet> m_defaultViewSourceStyle;

  6. OwnPtrWillBeMember<RuleSet> m_defaultXHTMLMobileProfileStyle;

  7. OwnPtrWillBeMember<RuleSet> m_defaultTransitionStyle;

  8. RefPtrWillBeMember<StyleSheetContents> m_defaultStyleSheet;

  9. RefPtrWillBeMember<StyleSheetContents> m_viewportStyleSheet;

  10. RefPtrWillBeMember<StyleSheetContents> m_quirksStyleSheet;

  11. RefPtrWillBeMember<StyleSheetContents> m_svgStyleSheet;

  12. RefPtrWillBeMember<StyleSheetContents> m_mathmlStyleSheet;

  13. RefPtrWillBeMember<StyleSheetContents> m_mediaControlsStyleSheet;

  14. RefPtrWillBeMember<StyleSheetContents> m_fullscreenStyleSheet;


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

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

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

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

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

  2. m_defaultStyleSheet = parseUASheet(defaultRules);

  3. 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

   其中有代码段:

  1. {

  2. 'action_name': 'UserAgentStyleSheets',

  3. 'variables': {

  4. 'scripts': [

  5. '../build/scripts/make-file-arrays.py',

  6. ],

  7. 'stylesheets': [

  8. 'css/html.css',

  9. 'css/quirks.css',

  10. 'css/view-source.css',

  11. 'css/themeChromium.css',

  12. 'css/themeChromiumAndroid.css',

  13. 'css/themeChromiumLinux.css',

  14. 'css/themeChromiumSkia.css',

  15. 'css/themeInputMultipleFields.css',

  16. 'css/themeMac.css',

  17. 'css/themeWin.css',

  18. 'css/themeWinQuirks.css',

  19. 'css/svg.css',

  20. 'css/navigationTransitions.css',

  21. 'css/mathml.css',

  22. 'css/mediaControls.css',

  23. 'css/mediaControlsAndroid.css',

  24. 'css/fullscreen.css',

  25. 'css/xhtmlmp.css',

  26. 'css/viewportAndroid.css',

  27. ],

  28. },

  29. 'inputs': [

  30. '<@(scripts)',

  31. '<@(stylesheets)'

  32. ],

  33. 'outputs': [

  34. '<(blink_core_output_dir)/UserAgentStyleSheets.h',

  35. '<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',

  36. ],

  37. 'action': [

  38. 'python',

  39. '<@(scripts)',

  40. '--namespace',

  41. 'blink',

  42. '--out-h=<(blink_core_output_dir)/UserAgentStyleSheets.h',

  43. '--out-cpp=<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',

  44. '<@(stylesheets)',

  45. ],

  46. },


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

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

  4. 我们来看看第二部分:RenderTheme::theme().extraDefaultStyleSheet()

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

  1. String RenderTheme::extraDefaultStyleSheet()

  2. {

  3. StringBuilder runtimeCSS;

  4. if (RuntimeEnabledFeatures::dialogElementEnabled()) {

  5. runtimeCSS.appendLiteral("dialog:not([open]) { display: none; }");

  6. 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;}");

  7. runtimeCSS.appendLiteral("dialog::backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.1); }");

  8. }

  9. if (RuntimeEnabledFeatures::contextMenuEnabled()) {

  10. runtimeCSS.appendLiteral("menu[type=\"popup\" i] { display: none; }");

  11. }

  12. return runtimeCSS.toString();

  13. }

  这个缺省样式表,这里介绍了它的组成,有兴趣的同学可以继续研究下。通过缺省样式表的更改,可以做好多事。

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

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

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

     方法DocumentLoader::finishedLoading,会调用同文件中方法:DocumentLoader::endWriting

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

  1. W/WebKit ( 8157): DocumentLoader::endWriting

  2. W/WebKit ( 8157): DocumentWriter::end()

  3. W/WebKit ( 8157): HTMLDocumentParser::finish()

  4. W/WebKit ( 8157): HTMLDocumentParser::attemptToEnd()

  5. W/WebKit ( 8157): HTMLDocumentParser::prepareToStopParsing()

从prepareToStopParsing方法开始的调用逻辑如下:
  1. W/WebKit ( 8157): HTMLDocumentParser::prepareToStopParsing()

  2. W/WebKit ( 8157): HTMLDocumentParser::attemptToRunDeferredScriptsAndEnd()

  3. W/WebKit ( 8157): HTMLDocumentParser::end()

  4. W/WebKit ( 8157): HTMLTreeBuilder::finished()

  5. W/WebKit ( 8157): HTMLConstructionSite::finishedParsing()

  6. W/WebKit ( 8157): Document::finishedParsing()

  7. W/WebKit ( 8157): FrameLoader::finishedParsing()

  8. W/WebKit ( 8157): Document::explicitClose()

  9. W/WebKit ( 8157): FrameLoader::checkCompleted()

  10. W/WebKit ( 8157): FrameLoader::completed()

  11. W/WebKit ( 8157): FrameView::maintainScrollPositionAtAnchor

  12. W/WebKit ( 8157): FrameLoader::checkLoadComplete()

  13. W/WebKit ( 8157): FrameLoader::checkLoadCompleteForThisFrame()

  14. W/WebKit ( 8157): updateRenderTreeIfNeeded()

  15. W/WebKit ( 8157): Document::updateRenderTree

  16. W/WebKit ( 8157): Document::updateStyle

  17. W/WebKit ( 8157): Document::ensureStyleResolver()

  18. W/WebKit ( 8157): StyleResolver& ensureResolver()

  19. W/WebKit ( 8157): StyleEngine::createResolver()

  20. W/WebKit ( 8157): StyleEngine::appendActiveAuthorStyleSheets()

  21. W/WebKit ( 8157): StyleResolver::finishAppendAuthorStyleSheets()

  22. W/WebKit ( 8157): StyleResolver::collectFeatures()

  23. W/WebKit ( 8157): CSSDefaultStyleSheets::instance()

  24. W/WebKit ( 8157): CSSDefaultStyleSheets::CSSDefaultStyleSheets()

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
理解WebKit和Chromium: 前言
Qt决定将Web渲染引擎从WebKit改为Chromium
开发者需要了解的WebKit
Webkit 内核初探
Chromium网页Render Layer Tree创建过程分析
Playwright快速上手指南
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服