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

もうそろそろIE6対策の記事を書くことが減ってほしいものですが、
やはりまだ対応しなければならないのが現状です。

IE6で透過PNGを使う際のJSですが、
今まで使っていたものが諸事情により使えなかったため
別のJSを探していたところ、
各種JSをとてもわかりやすくまとめてくださっているサイトがありました。

ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」

オススメされている DD_belatedPNG.js 以外にも、
各JSの特徴や注意点などがまとめられていて参考になります。

とりあえずメモでした。

ブラウザ毎のハックは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＞内で読み込むだけ。
動作の問題も回避できました。

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