web-dev-qa-db-ja.com

<head>の後にCSSを含める正しい方法

どうやら、ドキュメント本体に<link rel="stylesheet" ...を追加することは、W3C標準では悪い習慣と見なされています。本体に<style>ブロックを追加する場合も同じです。

では、<head>タグの外にCSSを追加するための標準準拠のソリューションはありますか？ドキュメントの最後のように。

csshtmlw3c
18
Alex

特定のイベントにCSSスタイルのみを含めたい場合は、先頭でそれを妨げるものは何もありません。

var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here

document.head.appendChild(linkElement);

これには、ブラウザが他のものをダウンロードするのをブロックしない非同期の方法でスタイルシートを追加するという追加の利点があります。

26
Madara Uchiha

この問題を解決する1つの方法は、CSSに 。get（） をロードし、必要な場合にのみヘッドタグに追加することです。

[〜＃〜] jquery [〜＃〜]

var css = "foobar.css";
var callback = function() {
  alert("CSS is now included");
  // your jquery plugin for a navigation menu or what ever...
};

$.get(css, function(data){
  $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
  callback();
});

callback関数は、scriptファイルに依存するCSSコードを適切にフォーマットし、CSSが追加された後にのみ実行できるようにするのに役立ちます。

3
Zuul

サーバーサイドプログラミングやDHTMLのようなことを始めたら、この標準はほとんど無視されていると思います。

静的HTMLファイルの場合、HEADタグ内にCSSのみを含めるという規則に従うことができます/従う必要がありますが、条件付き出力と対話性の場合は、条件付きスタイルを使用することも簡単にできる場合があります。結局、これは結果のドキュメントを複雑にします。ブラウザはそれをうまくレンダリングするかもしれませんが、あなた自身がソースを見た場合、レイアウト/表示を定義するすべてのスタイルがHEAD内にあると読みやすくなります。もちろん、それが悪い習慣である理由に関する他の多くの例と理由があります。

HTML標準は、サーバーサイドスクリプトやDHTMLなどとは別に存在します。つまり、HTML/SSS/JavaScript標準ではありません。

2
Matthew

HTML5のみがscoped属性でそれを許可しますが、DOCTYPEを正しく宣言していることを確認してください。

<style type="text/css" scoped>
.textbox {
color: pink
}
</style>
1
PenguinKenny