困ったときに役に立つ! 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ファイルを分離したい場合は以下のように書きます。


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

tagamidaiki.comの著者が教えるプログラミングスクール – class Tech(クラステック)

更新情報はFacebookページで!

ブログの更新、読んで役立つ他ブログの記事などを更新しています。




関連のある記事