1. ホーム
  2. Web制作
  3. HTML/Xhtml

XHTML文書におけるJavaScriptとCSSの適切な使用方法

2022-02-05 23:19:01
HTML4に代わってXHTMLを採用するWebサイトが急増していますが、一部の主要ブラウザがXHTMLをサポートしていないことや、一部のWeb制作者がXHTMLとHTML4の違いを理解していないことが、Web上でのXHTML展開の遅れを招いているようです。
XHTMLはXMLであり、HTMLではない
今日、XHTMLに関する主な誤解の1つは、それが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. XHTML文書のコンテンツでは、CDATAタグに含まれない限り、文字 < および & は使用できません (<! [CDATA[...]] >)。
2. コメントタグ(<! --... -->)の内容には、2つの連続した横棒(--)を含めることはできません。
3.コメントタグに含まれる(<! --... -->)は無視されます。
スタイルとスクリプトの内容に問題がある
styleタグやscriptタグ内の内容は、XHTMLを(HTML形式ではなく)XML形式で解析した場合に、若干の差異が生じます。
JavaScriptにXHTMLに存在し得ない文字が含まれています。
Javascriptの特殊文字の中には、XHTMLのCDATAタグの外には存在できない文字があります。
<script type="text/javascript">
  var i = 0;
  while(++i < 10){。
    //...
  }
</script>
注:上記のコード例は、XHTMLやXML"で認められていないタグを使用しているため、良いXHTMLフォーマットではありません。 < "。
スタイルとスクリプトの内容でコメントを使用する
HTMLに詳しい作者は、styleタグやscriptタグの内容をコメントタグの中に入れると、ブラウザから隠れることを普通に理解していますが、ブラウザによっては理解できないものもあります。
<style type="text/css">
<! --
  body {background-color: blue; color: yellow;}.
-->
</style>
<script type="text/javascript">
<! --
  var i = 0;
  var sum = 0;
  for (i = 0; i < 10; ++i)
  {
    sum += i;
  }
  alert('sum = ' + sum);
// -->
</script>
上記の例は、コメントタグ内のコンテンツをブラウザで無視する方法を示しています。また、この例は、text/xml形式とapplication/xhtml+xml形式のコンテンツをブラウザで処理する方法の違いも示しています。
Mozilla 1.1+ / Opera 7
CSSの適用なし、JavaScriptの実行なし
ネットスケープ 7.0x / モジラ 1.0.x
CSSは適用せず、JavaScriptを実行します。
インターネットエクスプローラー5.5以上
ドキュメントを表示しない。(参照 https://developer.mozilla.org/Ta ... _in_XHTML_Documents )
スタイルとjavascriptに、2つの連続した横棒(--)が含まれています。
また、XHTMLのページでJavaScriptで処理するためのコメントタグを使用する場合、JavaScriptに2本連続した横棒(--)が存在することが問題となる。
<script type="text/javascript">
<! --
  var i;
  var sum = 0;
  for (i = 10; i > 0; --i)
  {
    sum += i;
  }
// -->
</script>
コメントの代わりにCDATAを使用する
scriptタグ内のコンテンツをCDATAブロックに入れることで、コメント中の2つの連続した横棒の問題をうまく処理できますが、これではXMLを理解できない一部の下位バージョンのブラウザではサポートされません。
<script type="text/javascript">
//<! [CDATA[
  var i = 0;
  while (++i < 10)
  {
    // ...
  }
//]]>
</script>
xhtmlとhtmlの互換性のために推奨される処理
XHTMLのページに直接スタイルやスクリプトを書かないこと。外部ファイルを使ってCSSやJavaScriptを記述し、XHTMLに導入するのが良い方法です。
この推奨されるソリューションは、とにかく非常に良さそうで、少なくとも今後数年間は、text/htmlからapplication/xhtml+xmlへのページの移行をより問題なく行えるようにします。