chromium CSS浅析（一） 默认htmlCss的形成逻辑（chromium39）
来源：程序员人生 发布时间：2015-03-26 09:37:26 阅读次数：3881次
阅读器在将资源加载下来以后，则开始将资源进行解析和渲染。对chromium来说，它对网页有个默许的CSS，或说缺省CSS。
1. 缺省样式表的构成
这些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. 我们先来看看第1部份：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. 我们来看看第2部份：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();
}
这个缺省样式表，这里介绍了它的组成，有兴趣的同学可以继续研究下。通过缺省样式表的更改，可以做好多事。
接下来我们来看看这个缺省样式表的创建逻辑。
2. 缺省样式表的创建逻辑
我们从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()
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
