CSSの記述とHack

CSSとは

インターネット文書(html)では、体裁を整えるCSSが使われます

このファイルは、プログラムなどとは異なり、設定ファイルのように、ユーザーが変更したりする事が出来ます

一部の記述ミスを除いて、多くの間違った記述は無視します。便利に思えますが、指定が、団子になって、もうどこでどうしていいるんだか、めちゃくちゃになっているCSSもよくあります

ブラウザによって、表示が微妙に異なったりするために、簡易的に修正する手段として、ブラウザHackという作業が行われます

ブラウザの表示が同じでも、CSSのバージョンや、機能の実装状況の違いをうまくまとめるためにも使います

このページでは、この、Hackって何ですか？についてのメモです

結局Hackって何ですか？

バックスラッシュを使ったエスケープを考えてみる

何色ですか　IE8ではミドリですよね

<style type="text/css">
.ie8{ color:green\9; }
</style>

<p class="ie8">何色ですか</p>

これは、バックスラッシュを使ったHackの一つですが、なぜこんなんで、特定のブラウザだけが挙動を変えるのか？知りたいと思いました

以下は、想像力の産物

ブラウザに「ソノントコどうなっているのか」自白をせまる

スタイル指定で、スタイルの中身を見る

IEの解釈、IEでみてください

<style type="text/css">
.ie8:after{ content:'color:green\9;'; }

margin-left:1em;
</style>

さて、これでは、あまりよくわかりませんから、\9以外を試してみましょう

IEの解釈、IEでみてください

<style type="text/css">
.speak2:after{ content:'color:green\10;'; }

margin-left:1em;
</style>

IE8は、なんとなく\9は、例えば、ホリゾンタルタブ、\10は何か文字のようです

ブラウザを変えて試していただくと解りますが、ほかのブラウザでは、\10が文字に変換しないようです。文字コードを変換するテーブルが異なっている感じです。（fx3.6.16でも、何かしらに変換されてるようですが、文字化けしています。)

ほかのブラウザは、\9を見た時点で、無視しているのかもしれないです


では、ほかのブラウザのCSSパーサは、文字参照を受け付けないのでしょうか?

バックスラッシュつきの文字で、スタイル指定をしてみます


以下のスタイル指定は、h2{color:red;}と同じですから、h2が赤く表示されていれば、適用されています。

<style type="text/css">
\68\32{\63\6f\6c\6f\72:\72\65\64;}

margin-left:1em;
</style>

赤い文字で表示されていますか？

CSS Hackは、神様のような人が、ひねり出す魔法じゃない

各ブラウザが、どう解釈するのかを見ていけば、理由が見えてくるかも

今回調べてみて、バックスラッシュの直後は、無視されるのではなくて、何かの文字列の変換された結果がスタイル指定として、成立していなければ無視、\9のように、変換結果が解釈可能ならそのままスタイルが適用されている感じがした