<style>要素をコメント化する必要はとっくに無くなっている

HTMLに直接style要素を記述して、CSSプロパティを指定する際、こんな感じにコメントアウトしていませんか?

 
<style type="text/css">
<!--
p {
color:red;
}
-->
</style>
クリップボードにコピーする

style要素の中身を<!-- -->(HTMLの書き方)でコメントアウトしていてもしっかり動作するようになっていて、不具合を引き起こすことはありません。

ではなぜこのような奇妙な書き方をする必要があるのでしょうか?

昔はstyle要素のコメントアウトが必須だった

相当昔のブラウザではstyle要素がサポートされておらず、定義したstyle要素の中身がテキストとしてそのまま表示されてしまう問題がありました。

その対策として取られたのがコメントアウトです。style要素の中身をコメントアウトすることで、

  • style要素をサポートしているブラウザではstyleを適用
  • style要素非対応ブラウザでは、ただただコメントアウト(非表示に)するだけ

といった処置を施すことが出来ます。

ですが、最近のブラウザは例外なくstyle要素をサポートしているため、わざわざコメントアウトする必要がないのです。

むしろ、コメントアウトするとWordPressのキャッシュプラグインでstyle要素の中身が削除されて不具合を起こすなど、不具合が起きる可能性の方が高いでしょう。

現に、HTML5より前に制定されたXHTMLでは

style要素をコメントアウトしてはならない。本当に読み飛ばされて機能しなくなってしまう

とされています。

HTML入門書ではstyle要素をコメントアウトすると学んだかもしれませんが、それは今の時代では全く役に立たない知識ですので、ドブに捨ててしまいましょう。

タイトルとURLをコピーしました