chromium CSS浅析(一) 默认htmlCss的形成逻辑(chromium39)
浏览器在将资源加载下来之后,则开始将资源进行解析和渲染。对于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;
从名字中,我们也大体也能知道其是作用于什么场景或者功能的。
这里,我们来看看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': [ '<@(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)', ], },
通过这段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::endWriting W/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::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()
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。