最低対応ブラウザがIE8になったので実用段階に達したもののリスト

最低対応ブラウザがIE6対応からIE8対応にアップデートされました。
いろいろ解禁されたので、個人的に整理しておきます。

HTML5

こちらを当ててあげます
html5shiv.js

一部cssセレクタ

selectivizr.js
こちらを当てて対応できる部分は解禁してしまって大丈夫です。

フロートしている要素に横マージンを指定してもいい

IE6において、フロートしている要素に横マージンを指定すると幅が二倍になるというバグがありました。
でもIE8以上対応の場合、無視して大丈夫ですね。

overflow:visible;の挙動

IE6において、overflow:visible;を行い、子要素が親要素より大きかった場合、表示が変になっていました。
IE8ではキレイに表示されます。

透過png

IE6では使えなかった透過pngも使えるようになりました。
ただし透明度の変更には対応していないので注意が必要です。
一応いろいろすれば対応できるという話もあるのですが、弊社では基本的には対応していません。

box-sizing:border-box;

リキッドレイアウトがしやすくなりますね!
微調整も行いやすくなります。
ベンダープレフィックスはつけておきましょう。

	-webkit-box-sizing : border-box ;
	-moz-box-sizing:border-box;
	box-sizing:border-box;

参考:ベンダープレフィックスの整理整頓

min-width min-height max-width max-height

普通に使えるようになりました!
DOCTYPE宣言をしないと使えないという報告が上がっています。
http://blog.livedoor.jp/webprog/archives/1422035.html

displayプロパティの使える種類が増えた

inline-blockやtableなどなどが使えるようになりました!!
詳しい対応情報はこちらです。
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20373825/

IE6で複数クラスを使う時の注意を顧みなくてよくなった

コチラに詳しいのですが、できることが増えました。(IE6のバグだったのですが……)
http://css-eblog.com/ie-css-problems/ie6-multiple-class.html

装飾だけならCSS3もアリかも

IE8は最低限読めればいい場合は、装飾だけならCSS3を使ってもいいかもしれません。
角丸の表現は便利ですね。
ベンダープレフィックスについては下記が詳しいです。
http://kojika17.com/2013/02/ordering-vender-prefix.html
http://caniuse.com/

このメモは2014年7月18日に公開しましたが、適宜追記します。

投稿者:

ayako0802

フロントエンドエンジニア