余分な閉じ波括弧が存在するスタイルシートとブラウザの挙動

掲題の通り、閉じ波括弧（}）が余分にあるスタイルシートとブラウザの挙動についてです。

余分な閉じ波括弧

スタイルシート内に閉じ波括弧が余分に記述された状態は宜しくないです。
そのようなスタイルシートはCSS Validatorで文法解析エラーとなります。

body {
   background-color: blue;
   }
   }

文法解析エラーとなってもその直前の閉じ波括弧までは正しく認識されているので、上記のように閉じ波括弧が全体の最後に余っている状態なら実害はないでしょう。

それでは、閉じ波括弧がスタイルシート内の途中で余っている状態ではどうでしょうか。

body {
   background-color: blue;
   }
   }
body {
   background-color: red;
   }

こちらの場合をCSS Validatorで検証した場合、先程のと同様に文法解析エラーが発生します。
それでも、余分な閉じ波括弧を除いた状態に認識されます。

ところが、ブラウザの認識はCSS Validatorと異なります。

ブラウザの挙動

余分な閉じ波括弧が中盤にあるスタイルシートを表示させた場合、ブラウザによって表示が異なります。

例えば、上記の余分な閉じ波括弧が中盤にある状態のスタイルシートを開いた場合。

Internet Explorer6では背景色が青（blue）の状態で表示されます。
一方、Firefox2での背景色は赤（red）に表示され、Opera9でも同じく赤になります。

この結果から、余分な閉じ波括弧が存在するスタイルシートに対する処理がブラウザごとに異なるとわかります。

IEでは余分な閉じ波括弧の後に続く指定も通常通りに適用されました。
しかし、FirefoxとOperaでは余分な閉じ波括弧に続いた指定は適用されませんでした。

ところが、スタイルシートの記述が更に違うものになるとFirefoxとOperaの挙動は更に変わります。
その挙動が変わるスタイルシートは次のような場合のものです。

body {
   background-color: blue;
   }
   }
body {
   background-color: red;
   }
body {
   background-color: green;
   }

こちらのスタイルシートを先程と同じブラウザで表示させた場合、
IEでの背景色は緑（green）、
Firefoxでの背景色も緑（green）、
そしてOperaでの背景色も同じく緑（green）になるのです。

先程のスタイルシートの時と異なり、今度は三つのブラウザ全ての表示が一致しました。
この結果を先程の結果とあわせると、FirefoxとOperaの挙動が明確になります。

つまり、FirefoxとOperaでは余分な閉じ波括弧の直後に記述されたセレクタの指定を適用しないのです。

これは私の推測ですが、FirefoxとOperaは余分な閉じ波括弧をセレクタとして認識しようするのではないでしょうか。

} body {
   background-color: red;
   }

それは兎も角、閉じ波括弧を余分に記述しないように気をつけましょう。

妙案

この不具合を利用したCSSハックはどうだろうか。
名前は閉じ波括弧ハック、ブレースハック、波波括弧ハックとか。

……使いずらくて実用的じゃないな。
CSSハックを見つけた先人は凄いと、つくづく思った。

余談：波括弧閉じ

記事中では閉じ波括弧という言葉を使ったが、正しくは波括弧閉じもしくは右波括弧と書くべきだったと思う。

でも、波括弧閉じはどうも歯切れが悪い感じがして……気に入らなかった。