Web ブラウザーに HTML コンテンツが提供され、それがレンダリングされるとき、舞台裏では何が行われているのでしょうか?
たとえば、ブラウザがたとえば<h1>
タグに遭遇した場合、最初に定義されたスタイルをどのように探し、そうでない場合はデフォルトの<h1>
フォント スタイルを探すのでしょうか? このデフォルト スタイルはどこでどのように定義されていますか?
HTML をレンダリングするために CSS を実装するブラウザーは、ユーザー エージェントの既定のスタイルシートを利用します (カスケード内での優先度が低いため、独自の CSS でオーバーライドするのは簡単です)。これは、作成者のスタイルシートがない場合に、さまざまな要素のデフォルト スタイルを取得する方法です。
一部のベンダーは、UA デフォルト スタイルシートのソース コードを提供しているため、それらを見て、特定のブラウザが特定の要素をデフォルトでどのようにスタイル設定しているかを確認できます。この質問にいくつかのリンクがあります。
ほとんどのブラウザーは、ユーザー スタイルシート機能を提供します。この機能では、すべての Web サイト (または@document
ルールを使用して特定のサイトのみ) に適用される CSS を記述します。!important
作成者のスタイル (つまり、Web サイト自体から取得したスタイル) は通常、ユーザーのスタイルをオーバーライドするため、これは一般的かつ容認されて使用される場所です。まったく新しいものにフォークする予定がなく、そのフォークに固有のスタイルを追加する必要がある場合を除き、一般に、ブラウザーのユーザー エージェント スタイルシートは、たとえそれがオープン ソースであっても、まったく変更したくありません。
ブラウザーがスタイル定義を探す方法については、非常に幅広い質問ですが、主に各スタイルシートとインライン スタイル属性を調べ、それに応じてカスケードやその他の環境制約を解決して、次の値を取得する必要があります。実際の描画に使用できます。カスケード自体はやや広いトピックであり、ブラウザーが CSS を解析してカスケード解決を実装する方法は実装の詳細であるため、表示しているブラウザーに大きく依存します。血みどろの詳細に興味がある場合は、Tali Garsiel が、Web ページを受信して表示するプロセス全体についての信じられないほどの記事を書いています。
ブラウザーを言語インタープリターと考えてください。ここの言語は CSS、JS、HTML などです。そのため、html タグを処理し、仕様に従って適切にレンダリングするエンジンが組み込まれています。
私の経験によると、私はそれで大丈夫です。また、Flash と php でどのターゲットの CSS スタイルがサポートされているかについても説明します。