web-dev-qa-db-ja.com

「HTML」ページの「HEAD」要素の外側でCSSスタイルを宣言しますか？

私のユースケースは次のとおりです：

有効なHTMLフラグメントであるが有効なページではない部分を使用して、Divs;のようにHTMLページを作成しています。これらの要素は、スタイルを管理するために[〜＃〜] css [〜＃〜]を使用しています。

各フラグメントが独自のスタイリング要件を担当できるようにし、メインフラグメント（「HTML」タグを持つもの）のスタイルシートの宣言に依存しないようにします。

そこで質問があります：CSSスタイリングをHEAD element（「style」属性によるインラインスタイリングを除く）の外側に追加する（標準）方法はありますか） ？

フレームを使用できると思いますが、この解決策は避けたいと思います。

よろしくお願いします。

最終編集：

zzzzBov、JMC Creative and moontearそして、いくつかのテストの後、ここに答えがあります：

  • JavaScriptを使用して一部のCSSスタイルシートを動的に読み込む：HTML4/XHTMLおよびHTML5準拠
  • 「スタイル」要素を埋め込むフラグメント内に直接：非準拠 with HTML4/XHTMLしかし、そうだと思われる広くサポートされている =、およびHTML5準拠です。

メールクライアントをサポートする必要があるため、さらにシンプルな2番目のソリューションを使用しました。

ご関心とご参加ありがとうございました。

htmlcsstemplatestemplate-engine
57
Pragmateek

tl; dr：

W3C Recommendation の成熟度レベルに達していないHTML機能を使用することに不安がある場合、<style>を<body>に追加する標準的な方法はありません。ページ。

あまり成熟していない機能を使用することに慣れている場合、HTML5.2は<style>要素を標準化して、フローコンテンツが予想されるすべての場所（つまり、<body>およびそのほとんどの要素）を許可しているようです。

既に[scoped]属性を使用している場合は、[scoped]属性の使用を停止してください。これは標準化されておらず、ブラウザーのサポートが失われているためです。

歴史：

HTML 4.01

HTML4.01では、<head>でのみスタイル要素が許可されていました。ブラウザは、作者wroteが<style>要素を尊重したのではなく、作者が望むものをレンダリングしようとすることに熱心ですそれらのページが技術的に無効であるにもかかわらず、<body>で。

HTML 5

<style>要素は、<body>で引き続き無効です

HTML 5.1

一部の HTML5.1仕様の草案 では、<style>要素が[scoped]属性を許可し、<style>要素を フローコンテンツ （つまり、<body>内）。

それがどのように使用されたのかの例としては：

<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
  <style scoped>
    p {
      color: darkred;
    }
  </style>
  <p>this text would be dark red</p>
</div>
<p>this text would be black</p>

スコープ機能のサポートはバージョン21でFirefoxに追加され、Chromeバージョン20のフラグの後ろ に追加されました。機能は十分なサポートを受けていなかったため、後で HTML5.1ワーキングドラフト から削除されました。

Chromeはバージョン36の機能を最初に削除しました 。それ以降、Firefoxはバージョン55で機能をフラグの後ろに設定しました。

HTML 5.2

HTML5.2仕様の2017年7月のワーキングドラフト で、フローコンテンツで許可される<style>要素のサポートが追加されました。

この要素を使用できるコンテキスト：

  • メタデータコンテンツが予想される場所。
  • <noscript>要素の子である<head>要素。
  • フローコンテンツが期待されるボディ内。

重点鉱山

執筆時点では、この追加はHTML5.2仕様に残っており、現在は 勧告候補の成熟度レベル です。

これにより、<style>内の<body>要素を使用することには多少のリスクが伴いますが、この特定の変更により、ブラウザーが長年サポートしてきたものが標準化されています。

62
zzzzBov

HTML5のようにstandard方法（EDIT：はありません！）<style>タグの外側に<head>要素を追加する-<body>タグ内では許可されず、ここでのみ許可されます（ DTDはこちらを参照してください ）。

HTMLフラグメントを個別にスタイルし、頭でCSSスタイルを使用しない場合は、インラインスタイルに頼る必要があります。ただし、ほとんどのブラウザーは本文内の<style>タグを理解しているため、使用することもできますが、ページは標準に準拠していません。

とにかく：

  • インラインスタイルを使用しないでください
  • あなたは標準に従うべきです
  • あなたはそれが属する頭にCSSを置くべきです

私が理解していることから、あなたはある種のテンプレートを使用し、異なるデザインのページに異なるHTMLスニペットを挿入します。 1つの大きなCSSファイル内にすべてのスタイルを配置するのはとても悪いですか？

HTMLフラグメントがページに挿入されたときに（JSまたはサーバー側スクリプトを使用して）別のCSSファイルを動的にロードすることは不可能でしょうか（これが推奨される方法です）。

13
Dennis G

そのために、2つのhacksを見つけました。どちらも完全に有効なhtmlでなければなりません。

SVGの方法

<style />要素を<svg />要素内にラップします。

<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>

データURIリンク

CssをデータURIとしてフォーマットし、<link />要素で使用します。

<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />
10
loominade