コーディング
更新日
CSSハック一覧 - IE, Firefox, Safariなどなど
異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技(?)です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので(Safariがのってない・IE8しかのってない。。等の理由で)、自分用メモ。「こんなやり方もある!」というのがあればコメントして教えてください!
Internet Explorer
IE6 以下
#help_me { _color: blue;}* html #help_me { color: red;}IE7
*:first-child + html #help_me { color: red;}* + html #help_me { color: red;}IE6, IE7
#help_me { /color: blue;}IE8
#help_me { color: blue9;}IE7, IE8
#help_me { color/***/: blue9;}IE6 以外
#help_me { color/**/: blue;}IE6, IE7 以外
html>/**/body #help_me { color: red;}IE6〜IE8 以外
:root * > #help_me { color: red;}モダンブラウザ
Firefox
#help_me,x:-moz-any-link { color: red;}Firefox 3.0 以上
#help_me,x:-moz-any-link,x:default { color: red;}Safari 2-3
html[xmlns*=""] body:last-child #help_me { color: red;}Safari 2 - 3.1
html[xmlns*=""]:root #help_me { color: red;}Safari 2 - 3.1, Opera 9.25
*|html[xmlns*=""] #help_me { color: red;}Safari 3 以上, Chrome
@media screen and (-webkit-min-device-pixel-ratio: 0) { #help_me { color: red; }}Safari 3 以上, Chrome, Opera 9 以上, Firefox 3.5 以上
body:nth-of-type(1) #help_me { color: red;}body:first-of-type #help_me { color: red;}Opera 9.25 以上
body #help_me { color: red;}html: 66irst-child #help_me { color: red;}Opera 8, 9 以外
body[class|="hypen-ated"] #help_me { color: red;}iPhone
iPhone のみ CSS を変える場合は iPhone 用 CSS を作成して読み込ませます。
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet"/>ブックマークしていた CSS ハックのサイトの中に iPhone 用ハックもありました。
@media screen and (max-device-width: 480px) { #help_me { color: red; }}これでたくさんありすぎてごちゃごちゃしていたブックマークが整理できる。。なるべく CSS ハックを使わないですむようなデザインができれば一番いいんですけどね。