2009.07.02 (Thu)
■ [雑記][PG] 自己流IEバージョン対策CSS(1)
もはやついったー上では爆発させられるのが当然なIEちゃんですが、いや全くそう思うです。今もひーたんちの某企画のサイト作ってるんですが、例によって例の如く、IEのバージョン違いでつまずきます。
で、自分のための備忘録も兼ねて、どんなケースがあるのかとそれに対する対策なんかをまとめてみようかなと。なんだかんだ言って何度もつまずくし、対策もケースバイケースなんですが、ある程度の法則はあるような気がするので。
ただしこれはあくまでも個人的にやってるむちゃくちゃ力業な対応です。Webのお仕事してる本業の方々はもっとちゃんと対応してるかと思いますので、本来のあり方はそう言う方々に聞いてね！ 昔は当方もここらへんのサイトを読みあさったものです。当時はお世話になりました。
■ [雑記][PG] 自己流IEバージョン対策CSS(2)
一番よく引っかかる属性。……といっても自分がですが。上で紹介したサイトのこの記事でも触れられてますが、paddingとborderが最も鬼門です。なんでこんな最も基本の属性に手間取らなきゃならんのだという話ですが……。
これら、IE6だと解釈がバグってて、widthの幅やheightの高さの内側にborderの幅が認識されるんですね。つまり、「width: 800px;」なdivの中に「width: 800px; border: 1px;」なdivがあったらはみ出ます。詳しく知りたい人はさっきのリンク先の記事を読みましょう、図解があります。これ、ホント勘弁してほしいです。
二番目によく引っかかる属性。やはりmin-height / min-widthと、max-height / max-widthは、便利で多用してしまうだけによっく引っかかります。
これも有名だと思いますが、これらの属性はIE6では未対応です。そう、使うなって話です。無茶言え、今のご時世これなしにどう生きろと！ これらの属性を初めて知った時はうちも狂喜乱舞したものですが、まさかIE6が未対応だとは……。なので最初は知っても使えなくて枕を涙に濡らしました。ちなみにIE7は対応してます。
■ [雑記][PG] 自己流IEバージョン対策CSS(3)
では、これらに対してどうするか？ 対策は色々あるらしいです。JavaScriptを使うとかそのブラウザ向けにCSSをもう一枚噛ませるとか。うちもよくは知らないんですが。
ここからは当方の自己流をご紹介。ものぐさな大臣がCSS一枚の中で何とかやりくりしてきた努力のたまもの（笑）です。
基本方針は、属性の上書きです。CSSは、同じ属性に対する操作を二度書いたら後に書いた方が有効になるので、それを利用します。問題になった属性（たとえばwidthなど）を、特定のブラウザでは問題にならないような値に上書きしてしまえば良いわけです。例えばIE8では「width: 800px;」なところを、IE6ではborder分込みで「width: 798px;」になるように再定義するといった方針です。
しかしながら普通に二度書いただけじゃ、IE8で見たときにも798pxになってしまう。そこで、ブラウザごとの特性を逆に利用するという力業です。
(1) アンダーバーを付けた属性を使う（IE6向け）
前にも日記で書いたような気がしますが。例えば「_width: 798px;」とか書きます。実際にこんな属性は定義されてないんですが、何故かおバカなIE6ちゃんは「_width」を「width」だと認識します。むかーし間違えてアンダーバー付きで書いてしまったにも関わらず何故かその属性が適用されたことがあって、それ以来悪用（笑）してるワザです。つまり、先ほどのようなケースでは以下のように書く訳です。
.hoge {
width: 800px;
_width: 798px; /* for IE6.0 */
border: 1px;
}
IE6向けとコメントを付けた3行目は、IE6でなければ発動しません。これでめでたく期待通りの横幅になるというわけですな。
ちなみにこれを使えば、IE6ではほぼ「min-height」と同じ意味を持つ属性「height」を、IE6にだけ適用させるという荒技もできます。要は「min-height」のあとに「_height」を定義すれば良いわけですな。うん、実に強引。残念ながら「max-height」の代わりはないのですが……。同じことは、他の属性全てに対して可能です。positionとかに使っても有用かもしれませんな。
(2) ダブルスラッシュのコメントを使う（IE6、IE7向け）
CSSでは「/* hogehoge */」と書くとhogehogeはコメントになって何の効果も持たなくなりますが、同様に、ある行内において「//」と書いた後ろの文字は全てコメントになるというのもあります。で、「//」はIE7以前は未対応です。これを使わない手はないでしょう。
これも上の(1)同様、IE7以前向けに属性を上書きする方向で使うのが常です。しかも(1)のアンダーバーと組み合わせれば、なんとIE6・IE7・IE8向けそれぞれのコードが書けるっていう！
こんな感じ。
.hoge {
width: 800px;
// width: 799px; /* for IE7.0 */
_width: 798px; /* for IE6.0 */
border: 1px;
}
色々強引すぎて我ながら笑いが出ますが。本職でないのでこんな力業でCSSを書いていますが、本職の人に見られたら怒られそうだなあ！ このあたり、正直仕様とかちゃんと知らずに経験則だけで書いてるので、ホントに場当たり的です。とは言えこれできちんと動いてるからいいじゃなーい、という感じで、当方が作るサイトは全て書かれています。適当と言われればそれまでだけど！
以上、長くなりましたが大臣のCSS小技でした。意外と使えるので、手っ取り早くぱぱっと対処したい時とかにオススメなのですよ！ 個人サイト・同人レベルだと、このくらいで良いだろーって思ってます。逆に言えば、プロの方々はこんな適当な対処しないでくださいねっていう希望もあったりなかったり……いや実際はどうなんだろう、ちゃんとやってそうだと期待してるんだけどっ。
文句、受け付けてます。
