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

ブラウザ毎のハックは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にまで対応しているようで、
なんだかまた近いうちにお世話になりそうな・・

弊社ブログ『四ツ谷NOW』に
sixapart社のブログパーツ、『zenback』を導入しました。

ところが2点ほど不具合が発生。
最初はzenbackのバグ？かと思いましたが
ブログの初期設定のミスと
既に導入済みのJavascript＆コーディングとの相性問題。

忘れがちかと思ったのでメモしておきます。

JavaScript（jQuery）を使って画像をフェードさせていたところ、
フェード中のいくつかの画像に白い点々が出ているのを見つけました。
（ディスプレイのドット落ちのような・・）

調べてみたところIEのバグのようです。
いろいろな方の記事で書かれているのを見ると、
発生条件は以下のような感じ。

・JavaScript の filter:alpha(opacity); を使用
・JPEG画像を使用
・#02050a の色を使用

要するに、#02050a を含むJPEG画像をJSで透過させると、
#02050a の箇所だけが完全に透過JPEGになってしまう、
というバグのようです。IEのみ。

解決策としては

1. PNG画像などにする
2. #02050a を使わない
3. 背景色を #02050a にする

となりますが、
何故かPNG画像にしただけでは直らず・・
結局、PNG画像 ＋ #02050a の部分を別の色で塗りつぶすことで
解決しました。

ちなみにIE6の頃からあったようですが、IE8でも確認しました。。

ページ内のアンカーリンクをスムーズにスクロールさせる
JavaScriptのメモです。
ページの組み方のせいか、普段から使っているsmooth.pack.jsが思うように動作しなかったので、他の使いやすそうなJSを探してみました。

■smoothScroll.js
使い方はsmooth.pack.jsと同じで、＜head＞＜/head＞内で読み込むだけ。
動作の問題も回避できました。

スクロールの挙動が違うので好みの問題になると思いますが、
様子を見て使い分けて見ようと思います。

先日少し話題になったのでまとめてみました。
JavaScriptのバージョンについてです。

実は自分はあまり気にしたことがなかったんですが、JavaScriptにもちゃんとバージョンがあります。
（自分でコードを書いたりしないので、あまり意識していなかった・・。）

JavaScriptのバージョンが新しいからといって、古い機能がなくなるということはほとんどないそうです。


普段使うように、
<script language="javascript" src="aaa.js" ></script>
と書く分には、特にバージョンを気にする必要はないですしね。

ですが、実際はブラウザごとにサポートしているバージョンは異なっていて、
それよりも新しいバージョンの機能を使うとエラーが出てしまいます。


先ほどのタグの「 language="javascript" 」の部分、ここにバージョンを書くことで、
それより新しい機能を無視することができます。

（例）<script language="javascript1.5" src="aaa.js" ></script>

エラーが出ないように書いておくといいかもしれません。


ブラウザごとの対応バージョンはこちら、DIASPARさんのところでまとめられています。
参考にさせていただきました。