困ったときに役に立つ！ CSSハックまとめ

HTML,CSSでレイアウトしているとき、いつも使っているブラウザで確認しているときはすごい綺麗だったのに、違うブラウザで確認すると崩れていて落ち込む、という経験をしたことがあると思います。

そういうとき、普通はHTMLやCSSを見直すのですが、どうしても面倒なときがありますよね。 そんなときに知っておくと便利なのがCSSハックです。 検索するといっぱい出てくるのですが、各種ばらばらだったりするのでこの1ページを見れば済むようにどんどん追加していこうと思います。

IE対策

<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie6" lang="ja"><![endif]-->
<!--[if IE 7]><html class="ie7" lang="ja"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="ja"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="ja"><![endif]-->
<!--[if(gt IE 9)|!(IE)]><!-->
<html lang="ja"><!--<![endif]-->

このようにHTML要素を書いておけばIE用にCSSファイルを作らなくても、既存のCSSの好きなところで

.ie8 #commmon-place {}

のように書けばIE用にCSSを適用させることが出来ます。

Firefox

#common-place, x:-moz-any-link { color: red; }

Firefox 3.0以上

#common-place, x:-moz-any-link, x:default { color: red; }

Safari2-3

html[xmlns*=""] body:last-child #common-place { color: red; }

Safari2-3.1

html[xmlns*=""]:root #common-place { color: red; }

Safari2-3.1, Opera 9.25

*|html[xmlns*=""] #common-place { color: red; }

Safari3以上, Chrome, Opera 9以上, Firefox3.5以上

body:nth-of-type(1) #common-place { color: red; }
body:first-of-type #common-place { color: red; }

Opera 9.25以上

;;body #common-place { color: red; }
html:first-child #common-place { color: red; }

Opera 8, 9

body[class|="hypen-ated"] #common-place { color: red; }

iPhone

iPhone用CSSハックは、今はメディアクエリで行うのが一般ぽいです。

@media screen and (max-device-width: 480px) {
    #common-place { color: red; }
}

iPhoneだけCSSファイルを分離したい場合は以下のように書きます。

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

いかがでしたでしょうか。 こういうのは出来るだけ使わないほうがいいのですが、知っておくと絶対に役に立ちますよね。

関連記事: