18

HTML ページのセクションに外部スタイルシートが含まれている場合<head></head>、それらは HTML の前に読み込まれ、レンダリング時にすぐに適用されますか? 私の具体的なユースケースを紹介しましょう。

外部の styles.css ファイル:

form label {
    display: none;
}

フォームを含むページ:

<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
</form>

ページの読み込み時にラベルが見えなくなる (CSS のダウンロードによるちらつきがない) と確信できますか?

それ以外の場合は、スタイル属性をインラインで追加できますが、これはメンテナンスの悪夢になる可能性があります。

4

4 に答える 4

13

head セクションに CSS を含めると、ラベルが表示されないことを確信できます。

HTML が最初にダウンロードされます。ブラウザーは html を先頭から読み取り、HEAD セクションで参照されているすべての CSS および JavaScript ファイルの取得を開始します。HEAD 内のすべての CSS および JavaScript ファイルがダウンロードされて評価されるまで、ページは描画 (表示) されません。

于 2011-06-28T00:06:00.447 に答える
7

スタイル シートによってドキュメントのダウンロードが妨げられることはありませんが、リンクされたすべてのスタイルシートがダウンロードされて DOM に読み込まれるまで、ブラウザーはドキュメントをレンダリングしません。

これは、ブラウザーがページを 2 回レンダリングする必要がなく (プロセスで時間を浪費する)、スタイルシートがダウンロードされて解析される前にスタイル設定されていないページがユーザーの前に表示されないようにするためです。

于 2011-06-28T00:06:43.987 に答える
1

作成した html (または任意の形式) ドキュメントに配置した正確な順序ですべてが読み込まれると思います。

したがって、スタイルシート呼び出しの場合は、それを記述した場所 (通常は ) に関連して直接読み取られたときに呼び出されます。

これの良い「概念実証」は、一定の時間が経過した後にスタイルシートをロードする JavaScript 関数を作成することです。この関数では、スタイルシートを ajax でロードできます。

于 2011-06-27T23:59:46.307 に答える
0

あなたの質問に対する最も簡単な答えは「はい」だと思います...スタイルシートが最初に読み込まれます。" そのため、ヘッドでそれらにリンクします。上でゴーストケーキが示唆したように、ブラウザが応答して html ファイル内の命令をレンダリングする順序を調整するために、奇妙なことを行うことができますが、ブラウザのデフォルトの機能は、基本的にマークアップの各行を表示順に処理しようとすることです. したがって、トラッキング スクリプトなどをページの下部 (フッターの下) に配置するのが最善である理由もここにあります。 、しかしボディタグの上. (そうしないと、ユーザーに表示されない機能を処理する前に、ページをレンダリングしましょう.) ブラウザーを、何かを描くように依頼するアーティストまたはドラフトマンのように考える場合は、アーティストにその方法を伝えなければなりません/紙にペンを置く前に何を描画するか. 同様に、ブラウザに指示を取得する場所を伝えます。ヘッド内のリンクを介したスタイリングにより、何をどのように「描画」するかを「知る」ことができます「描き」始める 前に。

于 2011-07-20T05:45:13.057 に答える