web-dev-qa-db-ja.com

HTML＆CSS-<head>の外側に<link>タグを配置

<link>を<head/>タグ外のcssファイルに、たとえばフッター側に配置しても問題ありませんか？

これの悪い結果と良い結果はどちらですか？

私はこれを尋ねます、実際には私は何もスタイルを設定していませんが私のcss3アニメーションだけを私のウェブサイトに持ってくるCSSファイルを持っているので、私はパフォーマンス上の理由でHTMLの最後にそれを置きたいです...

ありがとう

htmlcssperformancehyperlinkhead
24
itsme

スタイルシートは<head>ブラウザーがHTMLのスタイルを設定し、HTMLをレンダリングできるようにします。ドキュメントの下部にスタイル情報を配置すると、ブラウザはドキュメント全体を再度スタイル変更してレンダリングする必要があります。

これは、1つ目は時間がかかり、2つ目は見苦しいように見えます。

スクリプトはロードが完了するまでロードをブロックするため、これは含まれているスクリプトとは異なります。そのため、プロセスのできるだけ遅くにロードします。

22
user1864610

W3仕様によると、<link>タグは<head> セクション：

参照

HTML 4.01の場合：http://www.w3.org/TR/html401/struct/links.html#edef-LINK

HTML5の場合：http://www.w3.org/TR/html5/document-metadata.html#the-link-element

検証の問題：2017年10月27日更新

2013年に戻って、HTMLドキュメントのlink内にbodyタグを配置すると、HTMLに基づくルールで validate.w3.org を使用して検証されません。 4.01。

（HTML 4.01とHTML 5.0の検証を https://validator.n で試すことができます）

最初に読んだとき、HTML 5.0仕様ドキュメントは、linkがドキュメントのhead要素にのみ出現するべきであることを示唆しているようです。ただし、HTML 5.0バリデーターを使用して検証すると、フローコンテンツにlinkが含まれていても、ドキュメントは問題なく表示されます。

この不一致の最良の説明は次のとおりです。

linkエントリ（ MDNリンクエントリ） のMDNドキュメントを読むと、link要素にitemprop属性がある場合、次に、linkをフローおよびフレージングコンテンツに、つまりbodyに表示できます。

これが、itemprop属性が存在しない場合でもHTML 5.0バリデーターが警告を発行しない理由である可能性があります。

itempropはmicrodata仕様の一部であり、比較的新しい（ HTML Microdataについて読む） であり、読む価値があります。

現時点では、link内のスタイルシートにbodyを追加することができますが、その利点は明らかではありません。

18
Marc Audet

これは古い議論ですが、Google Pagespeed Insightsが実際に現在（2017）に推奨していることは、ここでは注目に値すると思います スクロールせずに大きなCSSファイルの読み込みを延期する 読み込みがブロックされないようにしますhtmlの。

3
daamsie

はい、body要素内にlink要素を配置することは、HTML5仕様では問題ありません。それが悪いアイデアか良いアイデアかは、リンクの内容によって異なります。サイトの最初のビューをレンダリングすることが重要でない場合は、できるだけ遅くロードすることをお勧めします。

2
Jonas Äppelgran

WHATWG HTML標準では<link>かなり多くの指定されたケース の本文で。

配置の「妥当性」は<link> の前に </body>、最近、ギャラリーでいくつかの大きな画像をプリロードするためにそれを使用しました：

<link rel="preload" href="images/big/01.jpg" as="image">

そのため、ユーザーがサムネイルをクリックしても、画像はすでにブラウザのキャッシュに読み込まれているため、通常はサーバーの応答を待つ必要はありませんでした。

1
Konstantin Smolyanin

ソフトウェア開発のすべてにおいて、状況は変化します。現在は、本文のCSSが適切であると見なされています。

<head>
</head>
<body>
  <!-- HTTP/2 Push this resource, or inline it, whichever's faster -->
  <link rel="stylesheet" href="/site-header.css">
  <header>…</header>

  <link rel="stylesheet" href="/article.css">
  <main>…</main>

  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>

  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…</section>

  <link rel="stylesheet" href="/site-footer.css">
  <footer>…</footer>
</body>

出典： https://jakearchibald.com/2016/link-in-body/

0
Johann Echavarria

<!DOCTYPE html>の前に<link>タグ。経験上、一部のページが誤動作する可能性があります。

0
Nathan