IEで表示されない画像があるのか〜

今まで全く知らなかったのですが、IEはCMYK形式のjpgファイルを認識しないようです。検索するといろんなところでIEの仕様となってますがなんかもやっとします。
確認したのはIE6、IE7、IE8どれもダメで、Macの仮想環境ですがIE9はOKでした。Firefox、Chrome、Safari(どれも最新版)はOK。

下の画像はRGBとCMYKのJPEG画像ですが両方とも表示されてますか?左がRGB形式、右がCMYK形式のJPEGファイルです。


CMYKは印刷用でRGBはスクリーン用と言ってしまえばそれまでですが、やっぱりバグじゃないの?
とりあえずRGBに変換すれば問題なく表示されます。

もう一つ発見!
Macで上の画像2つを見ると(落としてローカルでね)アイコンの見た目がRGBとCMYKで違う表示になります(RGBは縁取りが付く)。Winは未確認です。

Internet Explorer の自動アップグレード

先月末(3月27日)に日本でもインターネットエクスプローラーの自動アップグレードが始まりました。昨年末に発表され、海外では既に1月から順次導入されているものです。

対象の環境と適用

Windows XP SP3 の IE6、IE7 → IE8
Windows Vista SP2 の IE7とIE8 → IE9
Windows 7 RTM の IE8 → IEx9
Windows 7 SP1 の IE8 → IE9
※RTM(Release To Manufacturing)
※Windows Server は適用外

2週間ほど経過した本日時点で調べてみると・・・。
IE利用者の中で、IE6、IE7いずれも8%前後だった数字が、4月に入ってからIE6が6%ちょっと、IE7がほぼ横ばい(若干増えてる)。まぁ結果は微妙だけど意外と世界標準値に近いかも。一番気になるのはIE10が数セッションある事w
ちなみに自動更新のインストールを拒否する事も出来るし、インストール後に削除して元に戻す事も出来るようです。
無効化キットもあります(IE8用 / IE9用

もう既にIE6の見た目を揃える労力が大変だから切り捨てるとかそういう時代じゃないですね。端末によってそれぞれにあったレスポンシブルな物を作る時代です。

CSSハックとコンディショナルコメント

ブラウザ別CSSハック

使わないに越したことはないのですが、使おうとする度に調べることが多いのでブラウザ別のCSSハック(IE6、IE7、IE8用)を覚書。世の中のすべてのブラウザがHTML5&CSS3対応になればいいのにと夢のような事を。。。

FirefoxやSafari、Chromeはあまり必要性を感じないので、IE向けのハックで必要な物を簡潔に。たくさんありますけど、それぞれ個別に適用出来るハックが1つあればほぼ問題ないのでは?と思います。
すべてセレクタは#sample、プロパティはwidth:100%;としています。

【IE6以下に適用】
プロパティの前に”_”を付けるアンダースコアハック(invalid)
セレクタの前に”*html”を付けるスターハック(valid)

#sample{
	_width:100%;
}/*アンダースコアハック */

*html #sample{
	width:100%;
}/* スターハック */

【IE7のみ適用】
プロパティの前に”*:first-child+html”を付ける(valid)
プロパティの前に”*+html”を付ける(valid)

*:first-child+html #sample{
	width:100%;
}

*+html #sample{
	width:100%;
}

【IE8のみ適用】
未検証。要確認。なんだかかなり気持ち悪い感じ(invalid)

html>/**/body #sample{
	width /*\**/:100%\9;
}

コンディショナルコメントで振り分ける

IEには条件分岐で特定のバージョンだけにスタイルシートを適用する方法があります。
あまり使ってないのですが、どこかで線引きをしてブラウザを切り捨てる事になった時に、こっちの方がさっぱりして気持ちいいかなと思います。head内で読み込みます(ファイル名とパスは適宜変更で)

【IEすべてに適用】

<!--&#91;if IE&#93;>
<link rel="stylesheet" href="ie.css" type="text/css" />
<!&#91;endif&#93;-->

【IE以外に適用】

<!--&#91;if !IE&#93;>
<link rel="stylesheet" href="others.css" type="text/css" />
<!&#91;endif&#93;-->

【IE7のみ適用】

<!--&#91;if IE 7 &#93;>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<!&#91;endif&#93;-->

【IE6以下に適用】

<!--&#91;if lte IE 6 &#93;>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<!&#91;endif&#93;-->

lte”の部分はcomparisonと言われる適用範囲を示す値で、lt、lte、gt、gteが指定できます。左から順に未満、以下、超、以上です。

指定した値を含まずそれ以上を表すのって「超」って言うんですね。1つ賢くなった。lteはless than equalらしいのですが、gは何の略だろうか?~より多いだとmore thanな気がするんだけど。。。ちなみにGoogle翻訳でless thanを通すと以下って出るけど、これ間違ってないか?

他にもIE7.js、IE8.js、IE9.jsを使うってのも1つの手ですね。

おまけでclearfix

floatした子要素を内包する親要素の背景が伸びない時は、overflow:hidden;ばかり使ってたのですが、印刷時に問題が出るようなので、印刷用のCSSでautoに戻すか、clearfixを使ったほうがいいかも。
clearfixの決定版を作るを参考に少し追加しました。ピリオドや空白よりいいかも。

.clearfix:after {
	content:url(pixel.gif);
	display:block;
	clear:both;
	height:0;
}
*html .clearfix{
	zoom:1;
}
*:first-child+html .clearfix{
	zoom:1;
}
現場のプロから学ぶXHTML+CSS
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ
売り上げランキング: 2487
おすすめ度の平均: 4.5

4 XHTML+CSSのバイブル的存在。
5 理解しやすい!
2 広く深く まとまりの無い教科書
4 分かりやすくて実践的
2 リファレンスとしては使えません

ブラウザの違いによる表示確認

過去に何度かIE5.5、IE6、IE7、IE8の表示を確認するためのIETester(フリーソフト)の事を書いたのですが、久しぶりに配布元を確認すると随分バージョンが上がっていたので最新版を入れてみると・・・あからさまに調子が悪い。何かと干渉してるらしく、うちの環境ではCPU使用率が100%のままだったりする。

各種ブラウザ

そんな訳で、幾つか気になっていたツールがあるので確認してみました。

Microsoft Expression Web SuperPreview for Windows Internet Explorer

これは今年の3月くらいにマイクロソフトが公開したツールで、Expression Web3.0に搭載された機能を抜き出した物です。インストールされているIE以下のIE(IE8が入っていれば、IE8とIE7とIE6)のレンダリングが確認できます。Expression Web3.0に含まれている物は Firefox や Safari などのブラウザも設定できるようですが、SuperPreview 単体ではIEのみです。
かなり詳細にズレを確認できるのですが、遅い・・・。おそらくExpression Webに含まれているのも同じじゃないかな。

Expression Web 3.0
Expression Web 3.0
posted with amazlet at 09.12.25
マイクロソフト (2009-11-06)
売り上げランキング: 366

ダウンロードはこちら:Expression Web SuperPreview

Adobe BrowserLab

これは以前に一度紹介した、アドビが公開しているWebツールで、Adobe IDでログインすればいつでも使えます。
詳細は前回のエントリで。相変わらず遅いです・・・。
Dreamweaver用のExtensionはまだLabsの中だけですが、更新はしているようで、Firefox3.5、IE8、Safari4、Chrome3に対応したようです。

Adobe Dreamweaver CS4 (V10.0) 日本語版 Windows版
アドビシステムズ (2008-12-19)
売り上げランキング: 663
おすすめ度の平均: 3.0

3 完全なるプロフェッショナル向けになった

サイトはこちら:Adobe BrowserLab

他にもWeb上で確認できるツールはあるけど、どれも満足いくものはないかな。スクリーンショットとかじゃなんともならん。

Multiple IE

このソフトはIE3、IE4.01、IE5.01、IE5.5、IE6の確認が出来ます。タブではなくそれぞれが個別に開きます。IE6の確認であれば十分使えますね。とっても快調です。
ダウンロードはこちら:Install multiple versions of IE on your PC

スタンドアロンのIE6

これは使ってないので詳細は分かりませんが、名前の通りのIE6です。問題なく動けばこれでもいいのですが、不明です。
ダウンロードはこちら:evolt.org


やっぱりタブで切り替えられてIE8まで確認できる IETester が一番好みなんですけど、当面は Multiple IE を使うことになりそうです。IE6が消える日を願って。。。

IETester v0.3(IE各バージョンの表示確認)

ietester

去年の夏からIE6のレンダリングの確認だけに使っていたIETester。その程度なので少々不安定でもアップグレードなどはしてなかったのですが、久しぶりに最新版にしたらいい感じ。
去年の投稿記事はこちら

見た目も若干変わり、利用時にちらつきがあったのは収まって安定してます。但し、うちの環境が合わないのか分からないけど何故だか突然落ちる時がある。NetRendererは遅いうえに下部の無いSSなんで、少々不安定でもIETesterの方がいいかなって思う。

FirefoxとIE7とChrome環境なのでIE6用に使ってたけど、そろそろIE8も正式に発表になるようなので、IE7用にも使えるかなって感じです。
「Internet Explorer 8」のリリースは3月20日–マイクロソフト台湾法人が言及

それにしてもいつまでIE6を気にしないといけないんでしょうね・・・正直面倒くさい。

環境によってはdon’t workな部分もあるみたいなので、そのあたりは確認してください。
IETesterダウンロードページはこちら