しばた工務店 Weblog

・IE8 代替スタイルシート対応、Webデザイン指針に影響か

IEはこれまで代替スタイルシートをサポートしてこなかった。しかし同社は方針を変更し、IE8 Beta 2ではFirefox3のようなUIを追加。Page→Styleでスタイルが変更できるようになった。このUIは正式版でも提供される見通し。

IEBlogによると、IE8では、"Alternate Style Sheets"がサポートされるらしい。

代替スタイルシートって、特に今まで考えたことはなかったなあ。

ということで、試しにやってみた。

代替スタイルシートをサポートしてるブラウザ(Firefoxとか)なら、スタイルシートの切り替えができるよ。

でも、Firefoxの場合、画面を遷移したらデフォルト指定のスタイルシートに戻っちゃうなあ。これは仕様かな？

・Firefoxがシェア20%で声明発表、IEは60%台へシェア下落

Net Applicationsの報告によると2008年11月におけるWebブラウザのシェアは次のようになった。Firefoxのシェアが月平均ではじめて20%を越えている。逆にIEの純減が進み、ついに70%台から60%台へシェアを落とした。

Net Applicationsの発表した数字によると、IEが69.88% ( IE7 47.33%、IE6 21.71% )、Firefoxが20.72%。

orz

IE6のシェアは、まだ2割以上もあるのね。もっと少なくなってる印象だったけどなあ。願望による印象であったか…。

Firefox3で画面を確認しつつhtmlやCSSのコーディングをして、「よし、他のブラウザでも確認すべ」→「Safariよーし」「Operaよーし」「IE7よーし」「IE6…がびーんっっ」って事があるからのう～。

CSSの解釈でバグが多いIE6が、存在を無視できるくらいのシェアになるのはいつだろね。

IE6でも気にせずPNGを使えるようになったので、画像をPNGに差し替えようと作業していて気づいたんだけど。

PhotoshopでPNGファイルを作成して、IEで表示すると、元の画像と異なった色で表示されるのね。全体的に色が明るいというか。画像単体では気づかなかったけど、他の要素と並べると、はっきり色が違う？？

いろいろググって調べてみたんだけど、PNG内部のチャンクに保存されているガンマ情報が原因らしい。
このガンマ情報を削除してやればちゃんと表示されるんだけど、Photoshopでは、この情報を削除することができない（ーー）。

Fireworksなどで保存しなおしてやればいいんだけど、それだけのために他のソフトを立ち上げるのもなあ～。つか、こんな問題、世界中で困ってるはずだから、プラグインがあるんじゃないの？

…で、見つけたのが、Photoshop用のプラグイン「SuperPNG」。
登録が必要だけど、フリー。すっばらしい。

http://www.fnordware.com/superpng/

「別名で保存」のファイル形式の中に「SuperPNG」と表示されるので、従来のPNGとは別に使うことが可能っす。
Photoshop 5.5用とあるけど、CSでもCS2でも問題なく使えたよ。

1色しか透過色を設定できないGIFと違って、PNGはきれいな透過が表現できる画像フォーマットなんだけど、いかんせん、IE6以前では透過がサポートされてない。
IE独自のフィルターを使えば、一応使うことは可能なんだけど、いちいち設定するのもめんどくさい。

なんかラクチンな方法はないかなあ～と思って探していたら、iepngfix.jsというステキなライブラリをユンサンのサイトで発見。
http://blog.l-xs.com/yungsang/2007/02/png_ie_ie7.html

試してみるとバッチリ透過されたので、ありがたく使わせてもらうことにした。

このブログのタイトル部分「しばた工務店」の文字などは、このライブラリを使って透過してるよ。

以下は、WordPressのテーマの中で使うためのメモ。

1. header.phpの</head>のすぐ上の部分に下記のコードを追加。

2行目の"src="の部分は絶対パスで記述しておいた。
※それぞれの環境に合わせてパスを書き換えておくこと。

<!--[if IE]>
<script type="text/javascript" src="http://shibata-koumuten.com/wp/wp-content/themes/hoge/js/iepngfix.js" charset="utf-8"></script>
<style type="text/css">
.iepngfix {
  behavior: expression(IEPNGFIX.fix(this));
}
</style>
<![endif]-->

2. iepngfix.jsをindex.phpの下のjsフォルダにアップ

3. 透過させたいPNGのタグに class=”iepngfix”と指定

classを指定するのは、imgタグでも aタグでもOKだった。

※PNG画像にwidthとheightを指定しないと崩れて表示されるので、htmlかcssの中でサイズを指定しておくこと。

・Netscape 8の導入でIEに不具合

Netscapeの最新版をインストールするとIEでRSSフィードのデータが表示できなくなるなどの不具合が生じるとして、MSはNetscape 8のアンインストールを推奨している。

大丈夫だよ。
わざわざNetscape8を使おうとする人たちは、IEでXMLファイルが表示されなくても気にしないよ。
これがFirefoxだったら、やっぱりワタシは気にしないよ。

[追記 2005/06/21]
上記の問題に対応したNetscape 8.02が公開されたらしいね。