CSSハック一覧 モダンプラウザ編
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
制作の際、時と場合で頭を悩ませるプラウザ対策
シンプルなギャラリー系サイトなら良いんですが…
規模が広がったりすると必要になったりします。
少し前に「CSSハック一覧 IE編」をまとめたので今回はモダンプラウザ編です。
…メモメモ
Firefox
#ID名,x:-moz-any-link{
margin:0px;
}
Safari,Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) {
#ID名1{margin:0px;}
#ID名2{margin:0px;}
}
Safari,Chrome,Firefox,Opera 9~
body:first-of-type #ID名{
margin:0px;
}
Opera 9~
html:66irst-child #ID名{
margin:0px;
}
iPhone
@media screen and (max-device-width: 480px) {
#ID名1{margin:0px;}
#ID名2{margin:0px;}
}
最後だけちょっと別枠ですね。
iPhoneのみ異なったCSSを読み込ませる方法です。
もっと根本的なのはユーザーエージェントごとにリダイレクト/表示切替する方法
以上です。