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へのページの移行をより問題なく行えるようにします。
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へのページの移行をより問題なく行えるようにします。
関連
-
指定した行の無線ラジオボックスをチェックし、その行までスクロールするLayuiフォームの実装コード
-
HTML共通メタブック(推奨)
-
HTML6 メニューの折りたたみとアコーディオンメニューのサンプルコード
-
DIVのピントずれ(ぼかし)実装方法
-
Htmlで水平ナビゲーションの構造を設定する方法
-
cssを使ったhtmlフォームコントロールの美化(フォームビューティフィケーション)の詳細例
-
HTML+CSS の相対幅と絶対幅が競合する場合、div ソリューションの場合
-
HTML初心者のための15のベストプラクティス
-
TinyEditorは、シンプルで使いやすいhtml WYSIWYGエディタです。
-
共通するイベントやメソッドをhtmlテキストで詳しく解説
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLで入力ボックスを純粋な数値に制限する
-
1分で実感!html+vue+element-uiのサラサラ感
-
iframeのパラメータを解説と使用例で整理してみました
-
htmlインライン要素とhtmlブロックレベル要素の概要と相違点
-
htmlと埋め込みFlashの両方にスクロールバーがある場合の解析と対処法
-
htmlに要素href URLリンクの自動更新または新しいウィンドウを開く機能実装
-
テーブルのサンプルコードをチェックするためのHTML正規表現
-
HTMLマークアップの一般的なエラー
-
htmlのhyperlinkタグのTARGET属性の説明A
-
Web制作の基本 文書型記述(DTD)を宣言する