chromium CSS淺析（一） 默認htmlCss的形成邏輯（chromium39）
來源：程序員人生 發布時間：2015-03-26 09:37:26 閱讀次數：4060次
閱讀器在將資源加載下來以后，則開始將資源進行解析和渲染。對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()
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
