2013/11/26追記:久々にやってきたらこんなネタにすごい量のストックが。恐縮。ちなみにIE10は普通にいいと思いますよ(これ書いた時ってIE最新はまだ9で、表示のバグも多くぐぬぬしてたもので。)といっても、実質辛いのはCSS3のほぼ使えないIE8以下。WindowsXPのIEは8でストップなので当分怨嗟は止まらんのでしょうな
##結論-IEを判別してアラートを出し、モダンブラウザのダウンロードページに移動させる
そのためのコードがこちら。headタグ直下にでも配置しましょう。
<script language="javascript">
var isMSIE = /*@cc_on!@*/false;
if (isMSIE) {
if(confirm('〇〇〇〇*はInternet Explorerに対応しておりません。本サイトを閲覧するためにはGoogle Chrome,Mozilla Firefox等のモダンなブラウザをご利用ください(無料)。対応ブラウザのダウンロードページに移動しますか?')==true) {
location.href="http://www.google.co.jp/chrome/intl/ja/landing_ff.html";
} else {
}
}
</script>
//*はサイトの名前を記入
このタグを設置すると、IEでページを開くとYES/NOアラートが表示され、「〇〇〇〇*はInternet Explorerに対応しておりません。本サイトを閲覧するためにはGoogle Chrome,Mozilla Firefox等のモダンなブラウザをご利用ください(無料)。対応ブラウザのダウンロードページに移動しますか?」といった文章が出てきます。
YESを押すと、Google Chromeのダウンロードページへ。NOならそのままサイトを表示します。
##解説(必要なのか?)
confirmはYES/NOの選択肢付きのアラートを出すもの。
こちらの本文に あ か ら さ ま に I E 対 応 を サ ボ っ た 旨を書いてしまいます。
そして、YESをクリックしたら、任意のブラウザダウンロードページへとlocationで飛ばします。(サンプルではGoogle Chromeにしています。私はFirefoxユーザーですけど、CMとかの影響で乗り換えやすいかなって。画面が表示された途端に「無料」という文字が大きく見えるのもポイントですね)
こうして、IEしか知らないユーザーをモダンなブラウザへと華麗に移行させます
「へー、最近のWebサイトを見るにはブラウザを変えなきゃならないんだー」と思わせれば勝ち。
##余談:なぜこのようなダークサイドに落ちたか
最近、スマートフォンサイトばっかり作ってたわけです。すると、こうCSS3を使って軽量でナイスなサイトが、もうバンバン作れちゃうわけです。特に角丸とかグラデーションのボタンとか。
CSSだけでここまで表現できちゃうものだから、もうデザインカンプなんか手抜きでやってしまって、HTMLとCSSで書いたほうが早いくらいです。泣きそうです。
もちろん、IE7や8でも角丸にする手法などは世に公開されていて、できないことはないですが、まーそりゃめんどくさいことこの上ない。
そしてついに、IE対応を捨て去って、CSS3フル活用でWEBサイトを作ってみたわけです。すると
な ん と い う こ と で し ょ う
工程数は2/3から1/2程度に抑えられ、かつ書くのが楽しくてたまりません。HTMLとCSSなのに。
めんどくさいベンダープレフィックスのことはSASSで吸収すればなんの問題もなく。
アイコン画像を使うためだけにTwitter Bootstrapを使い、などなど。
可能性が広がります。
クロスブラウザという名のもとに犠牲になったWebデザイナーの胃の調子と髪の毛を救うことができます。
さらに、このタグを各サイトがみな設置してしまえば、どんどんIEからユーザーが撤退します。
##最後に:より鬼畜に推し進めるなら
上記タグを全ページに設置すれば、IEでサイトにきているユーザーはリンクで画面が遷移するたびにアラートが表示されます。めんどくさくてページなんてみれられません。
おそらく、ページを見ることをやめるか、ダウンロードするかの二択になります。
リスクは高いが、リターンも大きい。
さぁ、IE対応がめんどくさいなら、いますぐ設置しよう。
WordPressなら、header.phpに設置してしまえば、もう全ページ対応完了さ!
Webデザイナーが一斉蜂起して全サイトに組み込まれだしたら、IEさん死滅やでぇ。