古いブラウザの話をしよう
こんにちわこんばんわ、ちばです。
最近冷え込んで来ましたね、今年ももう終りに近づいてきてるのでいろいろ振り返ってみているのですが、今年の前半はIE7とAndoroid2.3の対応していたような気がします…
そんなわけで彼らの話を少ししようと思います。
IE7との思い出
まずはIE7との思い出ですね。
もはや同年代でIE7を見たことある人がいないレベルだと思います。
彼は今から見るととても不器用で真面目なやつでした…
inline-blockが使えない
今ではメジャーなinline-blockですが、IE7までは使うことが出来ませんでした。
inline-blockを使う場合はその都度IE用の記述をしなければいけなかったのです。
.hoge{
display: inline-block;
/display: inline !important;
/zoom: 1;
}
上記のようにinlineとzoomの指定をIE用に記述してあげて初めて同じような挙動が実現できていました。
※zoomプロパティはIE独自のhaslayoutと言うものをtrueにしてあげるためにつけてます。
opacityが使えない
そうなんです、opacityが使えないのです。
他のブラウザではよくhoer時に透過させたりしたものですが、IE7ではIE独自のfilterプロパティを使用して再現していました。
.hoge{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
(Opacity=50) この部分でalpha値を指定します。
opacity: 1; が (Opacity=100) と同等になります。
透過の他にもモザイクを掛けたりグラデーションをかけたり等豊富なプロパティが用意されてます。
こちらに詳しいことが載ってますので興味がある方は是非
http://www.htmq.com/style/filter.shtml
png画像が汚くなる
これも透過関連の現象です。
IE7では透過pngを使うとopacityの効果がかかった際に境界線や透過部分が汚くなるという現象がありました。
これはJsのプラグインなどで解決はできたのですが、他のブラウザでは問題ない分それなりにめんどくさかったですね…
参考
http://takacworks.com/archives/8
position、z-indexで稀に不具合が出る
positionのfixidやabsoluteを使った際にdisplay: none;が効かなかったり、z-indexの重なり順がおかしくなったりという現象を経験したことがあります。
displayの問題については時間的に解決できず無理やり対処したのですが、z-indexは親子関係を意識してあげるとなんとかなるようです。
IE7のz-index関係は急にくるとめんどくさいので二度と関わりたくないですね…
Andoroid2.3との思い出
今では4系や5系からの対応が多いと思います、Andoroidもバグが多いですが2系は特にひどかったですね…
fixedを指定すると各所でバグる
はい、各所でバグります。
１つや２つじゃないです。
私が経験した中では、フローティングのナビゲーションを作る際に、対象の要素をネストしてしまうと機能しない現象と、
fixedした要素の中ではtransformが機能しないことですね。
覚えてないだけでもっとあるはずですがこの二点だけでも強烈でした…
当時はコーダー1年目でわからないことも多く唐突なバグに対応できずよく時間が奪われました…
backgroundをショートハンドで書くと…
ショートハンドで書くと指定しないものは基本的に初期値になりますが、background-sizeだけが何故か初期化されません。
なのでbackground-sizeをbackgroundより後に書いたり、各プロパティを別々に書く必要があったのです。
疲れるし見づらいったらないですね…
まとめ
長々と来てきましたが今ではあまり必要のない情報ばかりかと思いますので、そんなこともあったのかぁ程度に思っておいて頂けると良いかと思います。
IE7は基本的に気をつけていれば大きい問題はなく進められるかと思います。
ですが、Andoroidのfixed関連がほんとにめんどくさかったですね…（遠い目
そんなわけで思い出話でした。
過去のブラウザの事は忘れて今を楽しみましょう(っ’-‘)╮三(IE)∑
Writer
ちば
北海道から上京してきました。
コーダー歴二年目入りましたヽ(ﾟ∀｡)ﾉ
あわせて読みたい記事
