スタイルシートのclass、大文字・小文字の違いに注意

大文字・小文字に注意

スタイルシートのクラス名を付ける際、大文字・小文字を意識していますか？

例えば、コンテンツ（Contents）というクラス名を付けようとした際、 様々な付け方があります。 先頭のみ大文字を使った「Contents」、全部大文字にした「CONTENTS」、全部小文字にした「contents」、 他にも「ConTenTs」など様々な書き方があります。
※8文字ですから256通りの組み合わせ（書き方）があります。

これらの違いを意識したことはありますか？

文法に厳しい標準モードでは大文字・小文字が区別される

最近の代表的なブラウザには、「標準(Standards)モード」と「互換(Quirks)モード」という2つの描画モードが備わっています。 「標準モード」とは、HTMLやCSSの文法解釈を厳格にしたモードのことで、 「互換モード」とは、従来のあまり正しくない文法でも適当に解釈して表示させるモードです。

※標準モードでは、文法ミスは無視されます。互換モードでは、文法ミスがあっても従来のブラウザのように解釈します。

さて、スタイルシートのクラス名は、実は（正しい文法規則では）大文字と小文字を区別します。 つまり、「CONTENTS」・「contents」・「ConTenTs」の3つは、すべて異なるクラス名と解釈されるはずです。

しかし、ブラウザの解釈モードが「互換モード」の場合、大文字・小文字は区別されず、 「CONTENTS」も「contents」も「ConTenTs」も、すべて同じ指定だと解釈されます。

困ったことになる可能性も…

大文字・小文字を気にせずにスタイルシートのクラス名を書いていた場合、スタイルが適用されなくなってしまう可能性があります。 例えば、文法をあまり気にせずに記述していたHTMLを、後から文法規則も気にした書き方に修正した場合です。

例えば、次のようなソースだと、「互換モード」ではスタイルが適用されますが、「標準モード」ではスタイルは適用されません。

スタイルシート：

<style type="text/css">
   p.MainContents { color: blue; }
</style>

HTML：

<p class="maincontents">
   ここは青色で表示されますか？
</p>

上記のソースでは、スタイルシートでのクラス名記述は「 MainContents 」と大文字を含んでいます。 しかし、HTML内のクラス名記述では「 maincontents 」とすべて小文字になっています。

この場合、大文字・小文字の違いを気にしない「互換モード」なら、スタイルが適用されて、文字は青色で表示されます。 しかし、文法規則に厳格な「標準モード」なら、該当するスタイルが存在しないため、文字色は変わりません。