<head>または<body>内にcssファイルを置いた場合の違いは何ですか?


155

通常cssファイルはに入れられますが、中<head></head>に入れたらどう<body></body>なりますか?

回答:


116

jdelStrotherがw3の仕様とARTstudioについてブラウザのレンダリングについて述べたことに追加するだけです。

<body>開始前にCSSが宣言されている場合、スタイルは実際に既にロードされているため、この方法をお勧めします。そのため、ユーザーは画面に何かが表示されるのをすぐに確認できます(背景色など)。そうでない場合、CSSがユーザーに到達する前のしばらくの間、ユーザーには空白の画面が表示されます。

また、スタイルをのどこかに残した<body>場合、宣言されたスタイルが解析されたときに、ブラウザーはページを再レンダリングする必要があります(ロード時に新旧)。


10
はい、もちろんHTML5では問題ありません。しかし、レンダリングに関しては、ブラウザが先ほど述べたようにページを再レンダリングするため、処理が遅くなる可能性があります。
mauris

4
はい、間違いありません。受け入れた回答を読んだだけの人が見逃さないように、ここに追加しました。:)
Vilx-

3
@Vilxそれは間違った情報です!linkそしてstyle彼らはどちらか(スタイル)スコープや属性持っている場合を除き、本体に表示されていなければなりませんitemprop(リンク)を宣言しました。
クリストフ

2
@Christophこれは、真実ではないstyleですフロー要素 HTML5とhtml4.1で(それがスコープされていない場合でも)と体内に入れることができます。
Kpym 2018年

1
@Kpymあなたはパーティーに3年遅れています;-)しかし、あなたは正しいです、スタイルは現在フロー要素であり、scoped属性は廃止されました。
Christoph

40

HTML仕様の最新バージョンでは、<style>body要素内のタグを使用できるようになりました。 https://www.w3.org/TR/html5/dom.html#flow-contentにタグを付けるscopedための前提条件であっ た属性も廃止されました。stylebody

これは、styleタグを好きな場所で使用できることを意味します。唯一の影響は、ブラウザーがページツリーのさらに下のスタイルに到達すると、可能なリフロー/再描画が原因でページのパフォーマンスが低下することです。

時代遅れの答え:

<style>タグは内部に許可されていません<body>W3の仕様に応じました。(もちろん、<div style="color:red">必要に応じてインラインスタイルを適用することもできますが、一般的にはスタイルとコンテンツの分離が悪いと考えられています)


3
これは真実ではない、<style>あるフロー要素 HTML 5と4.1と(他のすべてのフロー要素として)体内に入れることができます。
Kpym 2018年

1
あなたの答えを最新に保つための私の+1!
ベンジャミン

14

本文にCSSを入れると、後で読み込まれます。これは、ブラウザがインターフェイスの描画を高速化するために使用する手法です(つまり、ブロッキングステップを削除します)。これは、スマートフォンのユーザーエクスペリエンスにとって重要です。

私は1つの小さなcssを維持するために最善を尽くし<head>、残りを一番下に移動します。たとえば、ページでJQuery UI CSSを使用している場合は、常にの一番下、<body>JQuery JavaScriptへのリンクの直前に移動します。少なくとも、すべての非Jqueryアイテムは既に描画されている可能性があります。


7

頭はのために設計されています(W3Cを引用):

「タイトル、検索エンジンに役立つ可能性のあるキーワード、ドキュメントのコンテンツは見なされないその他のデータなど、現在のドキュメントに関する情報」

HTMLドキュメントのグローバル構造を参照してください。CSSはドキュメントのコンテンツではないため、先頭に置く必要があります。

また、他のすべてのWeb開発者はそこに表示されることを期待しているので、動作しても、本文に入れて混乱させないでください。

本文に入れる必要がある唯一のCSSはインラインCSSですが、通常はインラインスタイルは避けます。


3
私はあなたが言っていることを完全にフォローします。しかし、多くのページがあり、その一部に個別のファイル(私の場合は.NET Razorの部分ページ)のコンテンツが含まれ、そのファイルが含まれる場合は常に特定のスタイルシートもリンクする必要がある状況にどのように対処しますか?各includ_ing_ページのヘッダーにリンクするか、includ_ed_ページの本文にリンクします。前者は「ヘッダーのcss」に準拠し、後者は「1回書き込む」に準拠しています。
OutstandingBill

4

標準(HTML 4.01:スタイル要素)では、スタイルタグはヘッドタグ内でのみ許可されることを明確に規定しています。bodyタグにスタイルタグを配置すると、ブラウザはとにかくそれを最大限に活用しようとします。

厳密なドキュメントタイプを指定すると、ブラウザが本文のスタイルタグを無視する可能性があります。現在のブラウザでこれができるかどうかはわかりませんが、スタイル要素をどこに配置するかについて、今後のすべてのバージョンでリラックスできるとは思っていません。


1
@Pacerier:HTML5では、styleタグにscoped属性がある場合、タグを本文で使用できます。
グッファ2014

まあ、誰もが矛盾する答えを与えている:stackoverflow.com/questions/4957446/...
Pacerier

2
@Pacerier:そのコメントの情報が不完全なためです。bodyタグにスタイルタグを含めることはできますが、それらにscoped属性がある場合のみです。以下は、スタイルタグを指定する標準のドキュメントです。dev.w3.org
html5

W3のスコープ属性によると、Firefoxでのみサポートされているので、ポイントは何ですか?
JSON


1

以前の回答に加えて、要素内にスタイルコードブ​​ロックを配置すると、最新のブラウザで機能する場合があります(ただし、正しく機能しない場合もあります)。特に、古いブラウザでは、ブラウザがコードをテキストとしてレンダリングする危険が常にあります。 CDATAセクション内にスタイルセクションが含まれていない限り。

もちろん、要素をインラインスタイル以外で要素内に配置することの他のことは、W3C HTML / XHTML仕様に適合しないため、本文内にそれを含むページはW3Cバリデーターで失敗するということです。すべてのコードが有効であれば、予期しない表示の問題を簡単にバグ発見できるため、間違いを見つけやすくなります。無効なHTML要素は、コード内で発生する場所を超えてすべての要素のレンダリングに悪影響を与える可能性があるため、ブラウザーが無効な要素を見つけたときに、要素が存在してはならない場所に要素があると、予期しない効果が発生する可能性があります。どのように表示するかを推測します。ブラウザによって、レンダリング方法が異なる場合があります。

(X)HTML仕様によれば、トランジショナルDoctypeとストリクトDoctypeのどちらを使用しても無効です。


0

スタイルを本文に入れることで、CSSを使用する目的を実際には無効にします。ポイントは、コンテンツをプレゼンテーション(および機能)から分離することです。このように、スタイルの変更はコンテンツではなくスタイルシートで行うことができます。インラインスタイルメソッドを使用すると、インラインスタイルを持つすべてのページを1つずつ変更する必要があります。退屈で、1ページまたは3ページ、または10ページを逃す可能性があるため、危険です。

スタイルシートを使用すると、スタイルシートを変更するだけで済みます。変更は、スタイルシートにリンクするすべてのHTMLページに自動的に伝播します。

ネオンブルのポイントももう一つの大きな理由です。CSSインラインを追加してHTMLを台無しにすると、レンダリングが問題になります。HTMLはコードに例外をスローしません。代わりに、それは外に出て、それを可能な限り最良の方法でレンダリングし、次に進みます。

スタイルシートを使用してWeb標準に準拠すると、より良いWebサイトになります。また、ページの内容が意図したとおりではないためにヘルプが必要な場合は、CSSを本文ではなく頭に配置すると、自分自身や助けを求める人にとってトラブルシューティングが大幅に改善されます。


2
私はあなたが何を話しているのか理解できません。「インラインスタイルのメソッドを使用したら」 -インラインスタイルの使用について誰が話しているのですか?質問はCSSファイルを言います
TJ

0

2つの矛盾する答え:

リンクタグのMDN ページから:

<link>要素は、のいずれかで発生することができ<head>、または<body> それは身体-OKでリンクタイプを有するかどうかに応じて、要素。たとえば、スタイルシートのリンクタイプはbody-okであるため<link rel="stylesheet">、本文ではa が許可されます。ただし、これはベストプラクティスではありません。<link>要素を体のコンテンツから分離して、頭の中に入れる方が理にかなっています。

CSS The Definitive Guide(4th Edition / 2017)page 10より

外部スタイルシートを正常にロードするには、リンクをヘッド要素内に配置する必要がありますが、他の要素には配置できません。


-1

違いは。ページの読み込みは非同期であるため、外部スタイルシートを使用している場合、リンクタグに到達するとすぐにcssファイルが読み込まれます。そのため、上部に配置するのが適切です。


-1

どのような違いがありますか?

長所:特定の属性を特定の場所に適用する方が簡単な場合があります(特に、コードがオンザフライで生成されている場合(phpを介してビルドしたり、動的にサイズ変更された各リストに独自のクラスが必要な場合など...変換のアイテムのタイミングなど))。

短所:少し遅く、遠い将来、いつか機能しない可能性があります。

それに対する私の一般的な意見:する必要はありませんが、する必要がある場合は、その上で睡眠を失わないでください。


-3

<style>本文を置くことは、すべての最新のブラウザでうまく機能します。

私はこれをeBayで使用していました。

動作する場合は、キックしないでください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.