[CSS]Safari3.X用CSSハック

Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。

FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。

CSS Filter: Safari CSS Hack

Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.

CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)

body:first-of-type p {color:#ff0000;}

CSS3.0のfirst-of-typeセレクタを使う方法。
今のところ実装されてるのがSafari3.0だからハックとして使えるが、いずれ他のブラウザが対応し始めてきたら効果は無くなる。

-webkit-min-device-pixel-ratio使う方法。

@media screen and (-webkit-min-device-pixel-ratio:0){
                p {color: #00ff00;}
}

min-device-pixel-ratioはMedia Queriesで、メディアタイプで使用できるクエリ。
and以下の括弧内の条件はifと同じ意味合いになり、条件が当てはまれば適用される。
前の:first-of-typeは今後他のブラウザにも実装される可能性があるが、
この-webkit-min-device-pixel-ratioの場合、先頭に-webkitとつけることでSafariのみ適用させることが出来る。(Mozillaの-mozと同じ。)
デバイス(表示先)の最小ピクセルが0ならtrue~という意味なのかな。つまり全部該当するということになるんだろう。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください