グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

もともとmacはwindowsに比べて文字間が広いという認識でしたが、
最近firefoxは、windowsに近い表示になってきたようです。
そこで困るのがsafari。
いくつか検索してsafariのみにきくハックを試してみましたが、
バージョンが低いもの用なのか、効果なし。。。
やっとバージョン 5.0.3使えるものを見つけました。

---------------

@media screen and (-webkit-min-device-pixel-ratio:0){
ココにsafariだけにきかせたいスタイルを書く
}

---------------

でもバージョンが新しくなってくると使えなくなってしまう可能性があるので
期間限定のサイトに限った方が良さそうです。

ブラウザ毎のハックはCSSで簡単にできますが、
OSごとにスタイルを変えるのは、複数のCSSを用意して振り分けるしかないと
思っていました。

ですが今回はCSSの記述を増やしたくなく、
ダメもとで探してみたところ やたらと便利なJSが見つかりました。

CSS Browser Selector

CSSに簡単な記述を追加するだけで、
ブラウザ、OSを指定して適用させることができるJSです。

具体的には、

.win body {
　background:#000;
}

で Windowsのみに、

.mac.ie7 body {
　background:#000;
}

で MacのIE7のみにスタイルを適用できます。


ダウンロードはこちらのサイトから。
http://rafael.adm.br/css_browser_selector/


今回は試していませんが、
相当な数のOS、ブラウザに対応しているようです。

■OS
・win - Microsoft Windows (all versions)
・vista - Microsoft Windows Vista
・linux - Linux (x11 and linux)
・mac - Mac OS
・freebsd - FreeBSD
・ipod - iPod Touch
・iphone - iPhone
・ipad - iPad
・webtv - WebTV
・j2me - J2ME Devices (ex: Opera mini) ※changed from mobile to j2me
・blackberry - BlackBerry
・android - Google Android
・mobile - All mobile devices

■ブラウザ
・ie - Internet Explorer (All versions)
・ie8 - Internet Explorer 8.x
・ie7 - Internet Explorer 7.x
・ie6 - Internet Explorer 6.x
・ie5 - Internet Explorer 5.x
・gecko - Mozilla, Firefox (all versions), Camino
・ff2 - Firefox 2
・ff3 - Firefox 3
・ff3_5 - Firefox 3.5
・ff3_6 - Firefox 3.6
・opera - Opera (All versions)
・opera8 - Opera 8.x
・opera9 - Opera 9.x
・opera10 - Opera 10.x
・konqueror - Konqueror
・webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
・safari3 - Safari 3.x
・chrome - Google Chrome
・iron - SRWare Iron


iPadやスマートフォン系のOSにまで対応しているようで、
なんだかまた近いうちにお世話になりそうな・・

hostファイルに追記する、ということがありました。
そもそもhostファイルとは耳慣れないものなので、何かと調べると、
不可視で、ドメインを取得した際に表示するIPアドレスを指定するファイルのようです。

Macでは、ターミナルからVimを使って追記ができるそうです。

１）ターミナルを立ち上げる
2）sudo vi /private/etc/hosts と入力する。
3)Vimを使って編集する
4)aキーで挿入モードへ変更
5）最後の行に移動して、IPアドレスとドメインを記入
６）入力が終了したら、Escキーで挿入モード終了
7）保存するために:wを入力し、Enter

これで終了です。

とても便利なパターン配布サイトです。
商用でもフリーで使え、クレジットも必要ありません。

WebTreats ETC（パターンアーカイブのページ）
http://webtreats.mysitemyway.com/category/photoshop-resources/patterns/

クオリティの高いものが揃っています。

ぱっと見でテクスチャーのようなものもありますが、
パターンなので繋ぎ目なく繰り返すことができます。

凝ったものが多く、なかなか使い所がない・・
ということにもなりそうですが、
リストを眺めているだけでもインスピレーションが湧きそうなのでオススメです。