分け合って、ちょっとまとめエントリー書きます。
(X)HTML+CSSのWebサイトを制作するとなった場合、
最近では各種ブラウザがWeb標準を意識しているためCSSのレンダリングも難しいことをしなければ、ほぼ期待通りのレンダリングが望めるようになってきました。
しかし、まだ必ずしも前方互換のみ、という訳にはいかないものです。
特に長く IE6の時期があったため、システム絡みなどで IE6 から抜け出せない場合もある。
つまり古いブラウザに対してもある程度の対応（後方互換）もしばらく必要なのがWeb制作者現場の現状なのです。
と、いうことで・・・・
現時点での、総まとめとしてのメモ書きを記述しときます。
ハック系
- ■Netscape 4、Win IE3-4、MacIE 4、Mac IE 5 の排除
-
CSS解釈の厳しい古いブラウザにうちては、以下を用いてCSSを読み込まないようにさせてしまう。
link要素のmedia属性の値に「screen」以外を複数指定、CSSファイル側は@import規則で外部スタイルシートを二重引用符で囲む書式を用いて、全体をHolly Hackをもちいる。- (X)HTML側
<link ～ media="screen,print"> - CSSファイル側
/* Hides from IE-mac \*/
@import "style.css";
/* End hide from IE-mac */
- (X)HTML側
- ■IE 6 のみに適応
- * html セレクタ { ～ }
- ■IE 7 のみに適応
- *:first-child+html セレクタ { ～ }
- ■IE 8(β)のみに適応
- *:first-child+html>/**/body セレクタ { ～ }
- ■Firefox 1.0 に適応
- セレクタ, x:-moz-any-link { ～/*Firefox用*/ }
セレクタ, x:x { ～/*通常ブラウザ用*/ } - ■Firefox 1.5/2.0 に適応
- セレクタ, x:-moz-read-only { ～/*Firefox用*/ }
セレクタ, x:x { ～/*通常ブラウザ用*/ } - ■Firefox 3.0以降 に適応
- セレクタ, x:-moz-broken { ～/*Firefox用*/ }
セレクタ, x:x { ～/*通常ブラウザ用*/ } - ■ Safari 2 に適応
- html[xmlns*=""] body:last-child セレクタ {～ /*Safari 2用*/ }
html:not(:only-child:only-child) セレクタ { ～/*通常ブラウザ用*/} - ■ Safari 3/Google Chrome に適応
- html:not(:only-child:only-child) セレクタ { ～ }
- ■Opera 2.27以下 に適応
- セレクタ { ～ /*通常ブラウザ用*/ }
html:first-child セレクタ { ～ /*Opera用*/ } - ■Opera 9.27～9.50 に適応
- セレクタ { ～ /*通常ブラウザ用*/ }
html:first-child セレクタ { ～ /*Opera用*/ }
body:last-child セレクタ { ～ /*Opera用*/ }
html:not([lang*=""]) セレクタ {～ /*通常ブラウザ用*/ }
html:not(:only-child:only-child) セレクタ { ～ /*通常ブラウザ用*/ } - ■Opera 9.50以前 に適応
- ;;body セレクタ { ～ }
- ■Opera 9.50 に適応
- セレクタ { ～ /*通常ブラウザ用*/ }
body:last-child セレクタ { ～ /*Opera用*/ }
html:not([lang*=""]) セレクタ { ～ /*通常ブラウザ用*/ }
html:not(:only-child:only-child) セレクタ { ～ /*通常ブラウザ用*/ } - ■Opera 9.51以降 に適応
- セレクタ[属性名*="属性値"] { ～/*Opera 9.51以降用*/ }
;;body セレクタ { ～ /*通常ブラウザ用*/ }
/*\*/
html*セレクタ { ～ /*通常ブラウザ用*/; ～/*Opera 9.51以降用*/ }
/**/
セレクタ, x:-moz-broken { ～ /*通常ブラウザ用*/ }
セレクタ, x:moz-read-only { ～ /*通常ブラウザ用*/ }
セレクタ, x:x { ～ /*通常ブラウザ用*/ }
パスフィルター
- ■IE5.0に適応
- @media tty {
i{content:"\";/*" "*/}}; @import 'ie50win.css'; {;}/*";}
}/* */ - ■IE5.5に適応
- @media tty {
i{content:"\";/*" "*/}}@m; @import 'ie55win.css'; /*";}
}/* */ - ■IE 5.0/IE5.5に適応
- @media tty {
i{content:"\";/*" "*/}} @import 'ie50-55win.css'; /*";}
}/* */
条件分岐
head要素内でlink要素で読み込む際に適応できるほか、body要素内でHTML要素に対して使うことも出来る。
ただし、IE独自のためMS社側から「出来るだけ使わないように」とのお言葉あり
- ■IEのみに適応
- <!--[if IE]> <link ～> <![endif]-->
- ■特定のバージョンに適応（IE6の場合）
- <!--[if IE 6]> <link ～> <![endif]-->
- ■特定のバージョン以上に適応（IE6≦*の場合）
- <!--[if gte IE 6]> <link ～> <![endif]-->
- ■特定のバージョンより大きい場合に適応（IE6＜*の場合）
- <!--[if gt IE 6]> <link ～> <![endif]-->
- ■特定のバーション未満に適応（IE6＞*の場合）
- <!--[if lt IE 6]> <link ～> <![endif]-->
- ■特定のバーション以下に適応（IE6≧*の場合）
- <!--[if lte IE 6]> <link ～> <![endif]-->
これ以外にも書き方や対応方法はいろいろあるので、時と場合をみて必要最低限のみ使用していくといいでしょう。
CSSハックが使わなくともレンダリングが正しいブラウザの時代が来ることを・・・
※ おかしな記述があったら、教えてください。orz
この記事が為になった方は ⇒
新着情報