XHTML ドキュメントで JavaScript と CSS を正しく使用する方法

ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しかし、主流のブラウザの中には XHTML を十分にサポートしていないものもあります。また、一部のウェブページ作成者は XHTML と HTML4 の違いをよく理解していないため、WEB の発展における XHTML の進歩は遅くなっています。

XHTML は HTML ではなく XML です

現在、XHTML に関する主な誤解の 1 つは、XHTML が HTML の単なる別のバージョンであるというものです。この誤解は、Microsoft Internet Explorer が、推奨される application/xhtml+xml 形式ではなく、MIME 形式の text/html の XHTML のみをサポートしているという事実によって発生します。

XHTML ページを text/html MIME 形式で解析すると、HTML ページと違いはありません。ただし、text/xml または application/xhtml+xml MIME 形式で解析すると、厳密な XML の記述および表示ルールに従います。

正しくフォーマットされた XHTML は XML プログラムであり、記述時には厳格なルールに従う必要があります。

1. 文字 < および & は、CDATA タグ (<![CDATA[...]]>) に含まれていない限り、XHTML ドキュメントのコンテンツに表示することはできません。

2. コメントタグ () には、連続する 2 つのハイフン (--) を含めることはできません。

3. コメントタグ（）に含まれるコンテンツは無視されます

スタイルとスクリプトの内容に関する問題

XHTML が HTML 形式ではなく XML 形式として解析される場合、スタイルタグとスクリプトタグ内のコンテンツによって若干の違いが生じます。

JavaScript には XHTML に存在できない文字が含まれています

JavaScript の一部の特殊文字は、XHTML の CDATA タグの外部には存在できません。

<script type="text/javascript">
var i = 0;
(++i < 10) の間{
//...
}
</スクリプト>

注意: 上記のサンプルコードは、XHTML または XML では許可されていないタグ " < " を使用しているため、整形式の XHTML ではありません。

スタイルとスクリプトコンテンツでのコメントの使用

HTML に精通している作成者は通常、スタイルタグとスクリプトタグの内容をコメントタグ内に配置すると、これらの内容がブラウザーで非表示になることを理解していますが、一部のブラウザーはこれを理解できません。

<スタイルタイプ="text/css">

</スタイル>
<script type="text/javascript">

</スクリプト>

上記の例は、ブラウザでコメントタグ内のコンテンツを無視する方法を示しています。同時に、この例では、text/xml 形式と application/xhtml+xml 形式のコンテンツをブラウザが処理する際の違いも示しています。

Mozilla 1.1+ / Opera 7
CSSは適用されず、JavaScriptも実行されません

Netscape 7.0x / Mozilla 1.0.x
CSSを適用せずJavaScriptを実行する

インターネットエクスプローラー5.5以上
ドキュメントが表示されません。(参照: https://developer.mozilla.org/Ta ... _in_XHTML_Documents )

スタイルと JavaScript に 2 つの連続したダッシュ (--) が含まれています

XHTML ページの JavaScript でコメントタグを使用するときに発生するもう 1 つの問題は、JavaScript に連続する 2 つのハイフン (--) が存在することです。

<script type="text/javascript">

</スクリプト>

コメントの代わりにCDATAを使用する

スクリプトタグの内容を CDATA ブロックに配置すると、コメント内の 2 つの連続したダッシュの問題に対処できますが、一部の低バージョンのブラウザーでは XML を理解できないためサポートされません。幸いなことに、JavaScript でコメント記号を使用して CDATA ブロックをコメント化することで互換性を実現できます。

<script type="text/javascript">
//<![CDATA[
var i = 0;

一方 (++i < 10)
{
// ...
}
//]]>
</スクリプト>

推奨される xhtml および html 互換性処理方法

XHTML ページにスタイルとスクリプトを直接記述しないでください。良い代替策としては、外部ファイルを使用して CSS と JavaScript を記述し、それを XHTML にインポートすることです。

この勧告は良いものであるように思われます。いずれにせよ、少なくとも今後数年間は、ページを text/html から application/xhtml+xml に変換するプロセスで問題が発生しないことが保証されます。

<<: CSSとJSでロマンチックな流星群アニメーションを実現

>>: MySQLクエリキャッシュの簡単な使い方の詳細な説明