web-dev-qa-db-ja.com

HTML本文のスタイルタグとスクリプトタグ...

[これは この質問 に関連していますが、電子メールに関するものではないため、]

多くの場合-特にCMSまたは他の誰かのフレームワークを使用する場合、<style>に<script>タグと<body>タグを埋め込む方が、<head>よりもはるかに簡単です。これはIE6、IE7（Windows）、Firefox 3.xおよびSafari（OS X）で動作するようです。

厳密に言えば、これは間違っていますか？そうである場合、それはどのような悪影響を引き起こす可能性があります...一部のクライアントでは完全に無視されることを除いて？

注：DRYとスタイルの集中化について話したいと思ってうれしいです。スタイルを使用したいことを想像してみてくださいグローバルではなく、ページごとにHEADへのアクセス権がないため、ドキュメント内のタグです。理由は何であれ、サイトごとに異なるため、ページごと、段落ごとなど、追跡や変更が難しいことに興味はありません。本文でスタイルを使用することで起こり得る結果について心配しています。

あなたは中心的なものを集中化します。中央のスタイルシートでは、他のすべてが膨らんでいます。

htmlsyntax
45
Dan Rosenstark

仕様ではbodyタグでスタイルタグを明示的に指定することはできませんが、仕様がすべてではありません。スタイルタグは、すべての主要なブラウザーで本文でサポートされており、最終的にはユーザーがサイトを見る方法です。ドキュメントだけでなくすることができます。

HTML5仕様の取り組みをリードするGoogleは、CSS仕様に対するセレクターハックを使用して、引用符を属性値から除外することで、仕様に違反してバイトを節約するgoogle.comを同時に維持します。タイプのないタグ。純粋主義者は、インターネットで最も使用されているサイトの1つが仕様に違反しており、ひどく誤ってレンダリングされるという深刻な危険にさらされていると主張する可能性があります。または、このような広く使用されているハックを仕様でレンダリングできない一般的な用途にブラウザが使用されないことも考えられます。

したがって、問題は、ブラウザ業界がどのように進んでいるのかということです。これもまた、両方の優れた仕様の1つですが、それらの仕様に違反するページの意図を尊重するために最善を尽くしています。私の賭けは、スタイルタグが長い間ボディで機能し続けることです。

*これを書いている時点で、本文のスタイルタグは、Firefox 3以降、IE 6以降、Safari 2以降、Chrome 12以降）のHTML5 doctypeでサポートされています。インターウェブではめったに見られません。

27
Chris Moschini

<script>および<style>タグを使用できるコンテキストは、使用しているdoctypeによって異なります。たとえば、HTML5 Doctypeを使用していると仮定します。

<!DOCTYPE html>

script tag には、HTML5 doctypeの下に3つのコンテキストがあります。

  1. metadata content が必要です。
  2. フレージングコンテンツ が必要です。
  3. script-supporting elements が期待される場所。

style tag は、HTML5 doctypeの下でやや複雑なコンテキスト構造を持っています。

  1. scoped attribute がない場合： metadata content が期待されます。
  2. scoped attribute が存在しない場合： head 要素の子である noscript 要素内。
  3. scoped attribute が存在する場合： flow content が期待されますが、要素間の空白とスタイル要素以外の他のフローコンテンツの前であり、コンテンツモデルが透明な要素。

ボディはフローコンテンツとフレージングコンテンツを配置する場所であるため、基本的に、これはスタイルタグとスクリプトタグをボディに配置できることを示しています。

いつものように、使用しているdoctypeの仕様を調べてください。

16
Sampson

短い答え：

詳細な答え：

STYLEは head.misc に定義されています=：

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

また、head.miscの要素は、HEAD要素の子にすることのみが許可されています。したがって、STYLEはHEAD要素の子にすることのみが許可されます。

SCRIPTはhead.miscと スペシャル ：

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

そしてspecialは inline にあるように定義されています：

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

さらに、SCRIPTもBODY要素の子にすることができます。したがって、SCRIPTは、inlineが許可されている場所であればどこでも、HEAD要素で許可されます。

10
Gumbo

本文のスタイルについて考えられる2つの答え：

  1. インラインスタイルを使用します。確かに、内部および外部のスタイル設定の利点は失われますが、ヘッダーにアクセスできない場合、ヘッダーにアクセスできません。

  2. Style要素でscoped属性を使用します。これはHTML5の新機能ですが、CSSの範囲を1つのdivなど、ページの一部に制限するという考え方です。悪いニュースは、それがまだサポートされていないことです（2011年7月現在）。また、下位互換性もありません。しかし、（申し立てれば）役立つJQueryプラグインがあります。詳細：

3
james.garriss

そうですね、スタイルとスクリプトをコンテンツに直接埋め込むという問題があります。 DRY（Do n't Repeat Yourself）Principleです。スクリプトまたは特定のスタイルを複数の場所で使用できます。そのスタイルまたはスクリプトに変更が必要な場合は、次のようになります。そのコードが存在するすべての場所のスカベンジャーハントで、スタイルとスクリプトを共通の場所に保持することが理想的です。

一方、マイナーなスタイルの問題（ピクセルプッシュまたはその1つのビューに関連する何か）の場合は、おそらく問題ありません。

2
Doctor Blue

しかし、なぜ本文にstyle- tagsがあるのでしょうか？スタイルはとにかくグローバルなので、そうする論理的な理由を見つけることができません。

物事をさらに単純化して分離するには、外部スタイルシートも使用する必要があります。

スクリプトは許可されており、そこには理由があります。スクリプトは出力を提供する可能性があり、特定の時間に実行する必要があるなどの理由があります。

1
Arve Systad

私の意見では、最大の問題は利便性です。ページのスタイルを変更する場合、すべてのスタイルとスクリプト情報が1つの領域にあると、変更がはるかに簡単になります。スタイル/スクリプト情報は、<style>ノード、ノードのstyle属性（つまり<body style='...'>）、または外部ファイル（つまり<link rel='stylesheet' type='text/css' href='style.css' />）に含めることができます。 ）。スタイルが発生する可能性のあるすべての場所を探し出すよりも、一貫した場所を使用する方がはるかに簡単です。

また、「一部のクライアントでは完全に無視されることを除けば」と言うことは、「後ろからぶつかったときに爆発することを除けば」または「オフコースで飛行して民間人の近所に着陸することを除けば」と同じことです。これは、標準的な手法を使用することを正当化するのに十分な問題です。

0
Imagist