chromium CSS の簡単な解析 (1) デフォルト htmlCss (chromium39)_html/css_WEB-ITnose の生成ロジック-htmlチュートリアル-php.cn

chromium CSS の簡単な解析 (1) デフォルト htmlCss (chromium39)_html/css_WEB-ITnose の生成ロジック

WBOY

リリース： 2016-06-24 11:48:43

オリジナル

1432 人が閲覧しました

リソースをロードした後、ブラウザはリソースの解析とレンダリングを開始します。クロムの場合、Web ページ用のデフォルト CSS、またはデフォルト CSS があります。

1. デフォルトのスタイルシートの形成

これらの CSS とは何ですか?ファイルを簡単に見てみましょう: 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;

ログイン後にコピー

名前から、それがどのようなシーンまたは関数に作用するのかを一般的に知ることもできます。

ここでは、Webページ全体の表示スタイルに関わるm_defaultStyleSheetを見てみましょう。

1. この変数の初期化を見てみましょう。

クラス CSSDefaultStyleSheets のコンストラクターには、コードセグメント

    String defaultRules = String(htmlCss, sizeof(htmlCss)) + RenderTheme::theme().extraDefaultStyleSheet();    m_defaultStyleSheet = parseUASheet(defaultRules);    m_defaultStyle->addRulesFromSheet(defaultStyleSheet(), screenEval());

ログイン後にコピー

2 があります。上記のコードセグメント内のdefaultRules の構成を分析してみましょう。

これは 2 つの部分で構成されています: 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. 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::endWritingW/WebKit  ( 8157): DocumentWriter::end() W/WebKit  ( 8157): HTMLDocumentParser::finish()W/WebKit  ( 8157): HTMLDocumentParser::attemptToEnd()W/WebKit  ( 8157): HTMLDocumentParser::prepareToStopParsing()

ログイン後にコピー

prepareToStopParsing メソッドから始まる呼び出しロジックは次のとおりです:

れーい