r-Studio

文字サイズ変更：

現在の文字サイズ：

昨日、IE7で面倒な動作確認作業が減ると書いたのですが、しばらくは逆に動作確認作業が煩雑になるようです。

今日早速本格的に検証したところ、やはり細かい部分でFirefoxやOperaとはCSSの解釈が違うため、基本的には同じCSSを適用させても大丈夫ですが、目視しながら修正していく必要があります。

会社のサイトで微妙におかしかった部分を修正したら、IE6以前で大きく表示が崩れ、HTMLとCSSを大幅に修正せざるを得ない部分もありました。
もっともこれは、FirefoxとIE6で同じように表示されるようなHTMLとCSSの小細工を施した部分をIE7がうまく解釈してくれず、IE7に合わせたら小細工が崩壊したというわけです。

こういう小細工をしていると、新ブラウザが出たときに苦労しますね･･･。
ちょうどいい機会なのでもう少しまともな小細工に修正しておきました（ぉ

さて、いわゆる"CSS Hack"と呼ばれる手法ですが、IE6用のHackはIE7ではほとんど無視されるようです。
例えば、

div {
	width: 100px !important;
	width: 80px;
}

このような、IE6は同じ要素内の!important側を無視するHackや、

div {
	width: 100px;
	_width: 80px;
}

このような、IE6はプロパティの前のアンダースコアを無視するHackなどはIE7では使えません。

まあ、大幅にCSS関係が改善されているようなので、Hackなどする必要はあまりないのですけどね。
むしろ、IE6以前用のHackとしてこれからも使えるわけです。

また、CSSをブラウザごとに分けているサイトでは、

<link rel="stylesheet" href="main.css" type="text/css" media="all" />
<!--[if gte IE 5 ]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
<!--[if IE 7 ]><link rel="stylesheet" type="text/css" href="main.css" /><![endif]-->

上のようにHTMLに記述すればいいでしょう。
これは、まず全ブラウザに"main.css"を読み込ませ、次にIE5以上のブラウザには"ie.css"をさらに読み込ませ、最後にIE7にはさらにもう一度"main.css"を読み込ませるというわけです。
かなり煩雑だなぁ。他にもっといい方法がありそうな気がします。

しかしIE7の登場で、「IE6が世界標準だから他のブラウザなんか無視しても全然オッケーだぜ！」と豪語しながらCSSのみでWebサイトを作った人は、多分この先苦労するでしょうね。
また、そもそも他のIE6以外のブラウザの存在すら知らない初心者さんがCSSに目覚めてIE6のみで動作確認しながら作ったWebサイトも、多分崩壊するでしょう。もしかしたらその原因が自分の誤ったCSSだと気づかず、IE7がクソブラウザだからだと思う人もいるかもしれません。

何はともあれ、CSSをきちんと勉強しておいて良かったです。