XHTML文書における内部スタイルシートの正しい書き方

2007年1月16日
仕事で作成しているサイトをできるだけweb標準に準拠した形にしようと試みています。
その際に、内部スタイルシートのコメントの正しい書き方の議論になりました。
現状にマッチした内部スタイルシートの書き方を考えてみました。
これまで、内部スタイルシートを記述するときは、以下のような書き方が一般的でした。
<style type="text/css">
<!--
   p { color:red; }
-->
</style>
なぜコメントをしているのかというと、スタイルシートに対応していないブラウザ対策です。
HTMLは、style要素の中にタグなどが書かれていても無視する仕様になっています。
つまりここでコメントをしていても、スタイルシートに対応しているブラウザは、コメント部分が無視されスタイルが有効になります。
style要素に対応していないブラウザは中のスタイルシート部分をテキストとして認識しますが、コメントを認識するので、中身はブラウザ上には表示されません。

ただし、XHTMLではstyle要素の中のタグや文字参照を認識します。つまり、「<」は開始タグと認識されたり、「&amp;」は&と認識されたりして、下手をすると不具合が起きてしまう可能性もあります。
なので、上記の書き方をしてしまうとコメントが認識され、スタイルシートは無効になってしまいます。
スタイル要素の中にタグや文字参照をテキストとして扱いたい場合は、XML文書などで使われるCDATAセクションを使用します。
上記のスタイルシートの書き方をCDATAセクションを使って書くと以下のようになります。
<style type="text/css">
<![CDATA[
p { color:red; }
]]>
</style>
しかし、現状を考えてみましょう。
今、ブラウザの仕様というのは非常に不安定で、完全にXHTMLに対応していなかったりします。一部のモダンブラウザでは対応していたりもしますが。
CDATAセクションが使用できるのは完全なXHTML文書とみなされた場合だけです。つまり、XML宣言がされ、拡張子が.xhtmlでなければならないと、いろいろ条件があります。

今ではXHTMLといっても、XML宣言がなされていなかったり、拡張子は.htmlのままだったりすることが多いですね。これはブラウザがついていってくれていないので、悲しいことにこうせざるを得ないという現状です。

拡張子が.htmlであれば、モダンブラウザでもコメント形式の内部スタイルシートの書き方は有効です。つまり、コメントは実行されず、きちんとスタイルシートが適用されます。
このことを考えると、今のところ、コメント形式を採用するのが一番いいのかもしれません。

でも、本当にいいのは、内部スタイルシートを使用せず、外部スタイルシートを使用することです。
外部スタイルシートにすれば、これまで通り、タグも文字参照もテキスト(文字)として認識されるので、深く考えることはないと思います。

完全にXHTMLに移行した未来では、CDATAセクションも有効になってくるのか、はたまたそれまでに内部スタイルシートが廃止されてしまうのか、わかりません。


今回記事を書くにあたって、参考にさせていただきました。ありがとうございます。
XHTML/CSS~ページ内にCSSを指定する~
投稿日:2007年1月16日

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top