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

明らかにドキュメント本体に<link rel="stylesheet" ...を追加することは、W3C標準によって悪い習慣とみなされます。本文に<style>ブロックを追加する場合も同様です...<head>の後にCSSを含める正しい方法

<head>タグの外側にCSSを追加するための標準準拠のソリューションはありますか？文書の終わりのように。

出典

2012-05-19 Alex

なぜあなたはそれをしたいですか？ちょっと好奇心が強い –

まあまあ、後でスタイルを組み込むのが便利なまれな状況がいくつかあります。私の場合、CSSでスタイル付けされた情報を出力する素敵なデバッグ機能があります。私はいつでもこの機能を呼び出すかもしれないし、そうでないかもしれない。しかし、CSSを使用しない場合は、CSSを含めたくありません。 – Alex

特定の状況で*使用されるかもしれないことが分かっている限り、常に*使用されないCSSを含めることには害はありません。 – BoltClock

あなたが唯一の特定のイベントであなたのCSSスタイルを含める場合は、頭でそうすることからあなたを止めるものは何もありません：

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

document.head.appendChild(linkElement);

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

出典

2012-05-19 13:00:14

ありがとう、@IonicãBizãu、あなたの編集はうまくいきました。 –

ようこそ。あなたは私の兄弟を助け、私たちは皆あなたに投票しました。 :-) –

@IonicãBizãu：\ o / –

HTML5のみがスコープ付き属性を許可しますが、DOCTYPEを正しく宣言してください。

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

出典

2012-05-19 12:46:31 PenguinKenny

私は 'scoped'をそこに置くとどこでも使えるのですか？それは最高です：D – Alex

この機能のブラウザサポートはまだありません。ブラウザは単に 'scoped'属性を無視して、スタイルシートをドキュメントのグローバルとして解釈します。 bodyの 'style'要素は実際にはうまくいきます.HTML仕様では無効と宣言されています。 –

@ JukkaK.Korpela：シャベルを使って釘を壁に打ち込むと、それはおそらく機能します。それはそれをOKにしません。無効であることは、ブラウザが正しく動作するように非常にうまく動作するためです。それを機能させないでください。 –

その問題を解決する1つの方法は、.get()でCSSをロードすることであると、必要なときだけheadタグにそれを追加：

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関数でありますCSSの後にのみ実行するように、CSSファイルが適切にフォーマットされていることに応じて、scriptコードを有効にすると便利です追加されました！

出典

2012-05-19 12:46:56 Zuul

http://stackoverflow.com/a/2826810/871050 –

真実！しかし、文書を正しく応答させるためには、頭に動的に必要なときに 'css'ファイルを読み込む方法はありますか？私のプロジェクトはPHPベースなので、何かがブラウザに到達する前にサーバ側のスクリプトでこの問題を解決しますが、この場合は... – Zuul

私の答えを見てください。これは簡単なJavaScriptで簡単に行うことができます。私はあなたよりも短いコードを手に入れます。 –

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

静的なHTMLファイルの場合、HEADタグ内のCSSのみを含むルールに従うことができますが、条件付き出力と対話性のために条件付きスタイリングも簡単に行うことができます。最後に、結果として得られる文書を畳み込むことを考えてみましょう。ブラウザがうまくいくかもしれませんが、自分でソースを見れば、レイアウト/表示を定義するすべてのスタイルがHEAD内にあれば、読みやすくなります。もちろん、なぜそれが悪い習慣であるかについての他の多くの例と理由があります。

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

出典

2012-05-19 14:57:21 Matthew

-2

あなたは外部CSSシートについて話している場合は、次のように正しい方法は次のとおりです。

<link href="....link to your style...." rel="stylesheet">

あなたはインラインCSSを含めたい場合は、あなただけの、次のように実行する必要があります。

<style> 
....Your style here... 
</style>

出典

2015-11-25 14:09:15

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

答えて

関連する問題