3月1日にGoogleの一部サービスがサポートを打ち切り、13日にはYouTubeもサポートが終了するIE6さん。
それに伴い米国のAten Design Groupというグループが葬式イベントを行ったみたいです。

面白い企画ですね。
なんだかんだ言っても昔はIE6にはとてもお世話になったので「今までありがとう、おつかれさまでした。」と言いたいです。

ちなみに、写真はマイクロソフトのIEチームから花が贈られてきたみたいです。
シュール。

13日にYouTubeがサポートを打ち切るのでそこからIE6ユーザーの現象が激しくなりそうですね。

参考サイト
IE6の“葬儀”行われる　Microsoftから献花も – ITmedia News

Googleは米国時間1月29日、「Google Docs」および「Google Sites」サービスにおけるIE 6のサポートを3月1日で終了すると発表した。

つい最近も、IE 6の脆弱性が悪用されサイバー攻撃を受けたこともあり、もうIE6は捨てたようです。

こうなると制作者側は面倒な対応に追われる事が一つ減ります。

しかし、そうなる事によって新しい技術も増えてくると思います。
例えば透過PNGを使ったデザイン。
ライブラリなどを使用すればIE6でも見る事はできますが、あまり好んでデザインはされていなかったかと思います。
疑似セレクタの適用なども使っていくテクニックになると思います。

たとえIE6がなくなったとしてもその分新しい技術が待ち受けているのでそれに対応できるようにならないといけません。

HTML5、CSS3などこれらの技術を取得していない技術者にとってはIE6がなくなる事は一概にはいいとは言えないんじゃないんでしょうか。

Googleの今回の発表により、IE6撲滅は加速化するのでしょうか・・・。

「IE6 No More」

いいことです。
個人的にIE6で制約が増えてやりたいことが面倒になったり、ハックを入れたりするのがイヤなのでIE6はなくなってほしーなーって思ってます。

でも、そうなるとそうなったで大変だともおもってます。
だって、IE6がなくなればCSS3での制作も増えてくると思います。
新しい技術を取得するのも必須となってくるでしょう。

そうなると既に取得している人とこれからって人との差が明確にでてくるでしょう。

煮詰まり感のあるCSSでのコーディングも楽しくなること間違いなし！！！！！！

早く:nth-childとか使いたい。

「ie6-upgrade-warning」

IE6でアクセスすると下の画像のようなポップアップ画面がでます。

古いブラウザをいつまでも使っているんじゃない！！！！
って事です。

条件分岐コメントを使ってスクリプトを読み込んでいるのでIE6にしか読み込まれません。

<!--[if lte IE 6]>
<script src="js/ie6/warning.js"></script>
<script>window.onload=function(){e("js/ie6/")}</script>
<![endif]-->

このコードを読み込ませればIE6にWarning！！

IE6嫌いな人はいれちゃいましょう（笑）

CSS HappyLifeさんで面白い記事があったので便乗させていただきました。

IE6の利用者だけに右上に「アナログ」という画像が表示されます。
意味？
そんまんまだとおもいます。。。

いつまでも古いブラウザ使ってたら、見る事のできる良い物も見れなくなっちゃうよー。って事です！（多分）

このブログもIE6の対応は適当です・・・。
すいません。

面白かったんでついやってしまいました。
興味のあるかたは、CSS HappyLifeさんに詳しく書いてあります。

demoサイト

使ったスクリプトを提供しているサイト。
Post Production – A Better IE 5.5 and 6 PNG Fix

上記サイトの「Get the code」からソースをダウンロード。
ダウンロードしたファイルを任意のフォルダにいれておく。

コードはCSSを利用してHTML内の画像要素に適用させる。

CSSソース

img {
    behavior:url(任意のパス/fx-iepngfix.htc);
}

上記のソースだと全てのimg要素に対してスクリプトが適用される。
背景画像などに適用させたいときは、

.contents {
    behavior:url(任意のパス/fx-iepngfix.htc);
    background:url(任意のパス/sample.png) no-repeat top left;
}

などと記述すればよい。

これでお手軽にIE6以下でも透過PNGを利用することができる。

スクリプトは他にもあるので自分が使いやすいものを利用して透過PNGを有効活用してみてください！
代表的なものを他に2点あげておきます。

TwinHelix – IE PNG Fix v1.0 / 2.0 Alpha 3

jQuery JavaScript Library – jquery.pngFix.js

ちなみに、当ブログでも透過PNGを使っていますが、使っているスクリプトは「IE PNG Fix」を使っています。
今回は、あえて自分の使っていない物をご紹介しましたが、「A Better IE 5.5 and 6 PNG Fix」は使用するファイルがスクリプトファイルのみなので始めて透過PNGを使う方にはオススメかもしれません。

<a href="index.html">テスト</a>

上記のようなリンクがあるとする。

そこに、「class=”active”」なるものを付加する。
このクラスにはリンク先のページに飛んだときに常にマウスオーバーと同じ効果を付けておく為のクラスです。

<a href="index.html" class="active">テスト</a>

今はこのページにいるよー。って言うのをわかりやすくメニューの見た目を変えるものです。

サンプルのリンク先に飛んだら、メニューもマウスオーバー状態になっているんですが、どうやらIE6ではなっていない・・・。

うーむ。
マウスオーバーしたときはちゃんと記述通りの動きになるんだが・・・。

他のブラウザではちゃんと動くみたい。

試しにIDに変えてみた。

動いた。

セレクタのレベルの違いなのかな・・・。

よくわかんねっす。

でも、こういった書き方しないしな・・・。
しかし、ちょっと調べないと。。

ちなみに、CSSでのフォントの指定は、

font-family:Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ ゴシック","MS PGothic",sans-serif;

ヒラギノがあたってます。
以下の画像がブラウザごとの見え方です。

IE6での表示

Firefoxでの表示

Safariでの表示

Operaでの表示

うーん。
Firefoxがきたないですね。
Safariがきれいにアンチエイリアスがかかってる気がします。
で、IEとOperaは読みやすい。

当ててる、フォントがだめだと思うんですけど。
日本語フォントの選択って難しいですよね。

IE7：79／50％

IE6：76／48％

IE8：3／1.9％

え？IE8っすか？
それはさておき。
とうとう、IE7のシェアがIE6を追い越しましたね。
なかなか興味深いデータです。

と言ってもさほどアクセスのない私のブログではこの結果はなんとも言えないんですけどね。
自動アップデートの効果でしょうか。

こんな簡単な方法があったなんて・・・。
感動しましたよ！

CSSソース：min-height

.foo {
  min-height:100px;
  height:auto !important;
  height:100px;
}

CSSソース：min-width

.bar {
  min-width:100px;
  width:auto !important;
  width:100px;
}

DN*blogでは、ビヘイビアを使っていたんですけどコッチに切り替えました。
さっき確認したらちゃんと適用されているみたいです。（変なスペースは前からあるので気にしないでください。）
これはすごく活躍しそうなテクニックですね！

参考サイト
CREAMU