- 2008-04-15 (火) 11:36
- 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～という意味なのかな。つまり全部該当するということになるんだろう。
関連記事
- Newer: SafariのDebugMenuをWindows版でも
- Older: [mootools]タブとFx.Slideの合わせ技
