cf) ie7-js – Project Hosting on Google Code

シンプルになったclearfix

念の為スクリプトのロードも記載しておきます。
IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。
（これも内部で条件分岐して頂けると大変幸せだなぁ）

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

そしてこちらがシンプルになったclearfixのコード。

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

余計なハックを用いず、一種類のセレクタだけでクリーンに書けます。
IE9.jsにより、旧IEでも擬似クラス「:after」が使えるようになったおかげです。
もちろん、「:before」も使えます。

その他のIE9.jsの恩恵

ボックスサイズの計算法の統一化

ボックスサイズの解釈はIE6の方がわかりやすいと思う
で触れたとおり、IE6はボックスサイズをborder-widthとpaddingを含めた値として解釈します。
が、IE9.jsを導入する事で、IE6も他のブラウザ同様の計算法に修正してくれます。
border-boxの方が計算しやすいとは言え、統一してくれるに越したことはありませんね。

first-child, last-childの実現

IE6は言わずもがな、
IE7/8はfirst-childには対応しているものの、last-childは使えません。
IE9.jsはこれら全てにfirst/last-childを提供してくれます。

HTML5の新要素にも対応してくれる

header/nav/article/section等、HTML5で追加された新要素は、
IE～8ではhtml5.js等の力を借りないとCSSを適用する事が出来ませんでした。
IE9.jsは同様の処理も行ってくれちゃいますので、html5.jsをロードする必要がありません。

ie7-squish.js

別途ie7-squish.jsをロードする事で、
ダブルマージン等のIE6のお馴染みのバグを幾つか修復してくれます。
さらに詳細は公式で。
cf) IE7.js Test Pages

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js"></script>
<![endif]-->

まとめ

IE7jsライブラリの存在は知っていたのですが、予想以上の働きをしてくれる模様。
作者に感謝すると共に、改めて世界中の技術者がIEに頭を悩ませているんだなと実感させられます。
無数の開発者が一丸となってIEという共通の課題を…胸が熱くなりますね。

多くのバグで我々を悩ませるIE6さんではありますが、
この一点についてはIE6の解釈の方がコーディング上効率が良いと思います。

デザインからコーディングする際は
画像エディタ上のサイズそのままを記載すれば良いですし、
レイアウト中にカラム幅を指定する場合にも
わざわざpaddingやborder-widthを足したり引いたりするのは非効率です。

では、どうするか。

box-sizingを活用する

その為に用意されたCSSプロパティがbox-sizingです。
CSS3 Basic User Interface Module
ボックス要素の描画モードを、
ボーダー/パディングを含む「border-box」か、含まない「content-box」に指定する事が出来ます。
このborder-boxを活用すれば、IE6ライクな計算方法でコーディングが出来るわけですね。

ただ、未だ全てのブラウザで動くわけではなく、
多くのブラウザでは独自プロパティとして実装しているのが現状です。

.border-box{
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Webkit */
    -ms-box-sizing: border-box; /* IE8 beta1 */
    box-sizing:border-box; /* IE8, Opera */
}

box-sizingに非対応のブラウザはどうしよう

生まれた時からborder-boxなIE6さん（カッコイイ！）は良いとして、
他の非対応のブラウザはどうしましょうか。
IE7はDOCTYPEスイッチで後方互換させる手もありますが、
その為にDTDを削除するのは避けたい所。

こういう困ったときはjQuery先生にお願いします。

$.fn.borderBox = function(force){
    var s = document.documentElement.style, box, getNum;
    if ( force || ( s.maxHeight !== undefined &&
    s.boxSizing === undefined && s.msBoxSizing === undefined &&
    s.MozBoxSizing === undefined && s.WebkitBoxSizing === undefined ) ){
        getNum = function(str){
            return Number(str.replace(/[a-zA-Z]+$/,""));
        };
        this.each( function(){
            box = $( this );
            if( box.css("width") !== "auto" ){
                box.width(
                    box.width() -
                    getNum( box.css("paddingLeft") ) -
                    getNum( box.css("paddingRight") ) -
                    getNum( box.css("borderLeftWidth") ) -
                    getNum( box.css("borderRightWidth") )
                );
            }
            if( box.css("height") !== "auto" ){
                box.height(
                    box.height() -
                    getNum( box.css("paddingTop") ) -
                    getNum( box.css("paddingBottom") ) -
                    getNum( box.css("borderTopWidth") ) -
                    getNum( box.css("borderBottomWidth") )
                );
            }
        });
        return true;
    } else {
        return false;
    }
};

使い方：

<style type="text/css">
.border-box{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing:border-box;
}
</style>

<script type="text/javascript">
    $(".border-box").borderBox();
</script>

box-sizingならびに*-box-sizingに対応していないブラウザ（IE6を除く）のwidth/heightを
borderWidth/paddingを含めた値として再計算するスクリプトです。
だいぶその場しのぎのスクリプトではありますが、
IE6を明示的に処理から除外するのってちょっと新鮮ですね。

BrowserSeal : fast multi browser website screenshot application

BrowserSealはWebサービスの類ではなく、
様々なバージョンのブラウザでの動作確認と、スクリーンショットの撮影が行える
Windows用のデスクトップアプリケーションです。

Webサービスのレスポンスを待つ必要が無い為、
ローカルでも高速にWebサイトの確認が行えます。

本命かもしれないブラウザパック

ローカルで動作させる為には当然それぞれのブラウザをインストールする必要がありますが、
BrowserSealは以下のブラウザのスタンドアローンエディションを一度に導入出来ます。

Includes Firefox 3.0.16, Firefox 3.5.6, Internet Explorer 6.00.2900.2180, Internet Explorer 7.00.5730.13, Internet Explorer 8.00.6001.18702, Chrome 3, Opera 8.54, Opera 9.64, Opera 10.10, Safari 3.2.3 and Safari 4.0.4.

これらのブラウザはいずれもBrowserSealを介さずに
独立したウィンドウとしてそのまま立ち上げる事が出来ます。
JavaScriptなどの検証も行いたい場合に大変便利ですね。

BrowserSealでキャプチャを撮る

トライアル版では、キャプチャを撮れるのはFirefoxとIEの2ブラウザに留まります。

BrowserSeal本体のアドレスバーにURLを入力すると、
ブラウザが順番に立ち上がってWebページを開き、
キャプチャを撮る動作後に閉じられます。
（なんかこう、ちょっとアナログな感じもしますが…）

とられたキャプチャは本体にタブ分けされて表示されます。
長いページ等は、キチンと下までスクロールして撮影してくれます。

個人的にはブラウザパックが本命なのでトライアル版でも十分いけますが、
スクリーンショット機能を存分に駆使したい方は有償版（$49.00）を手に入れましょう。
自動化してくれるBrowserSeal.ROBOT（$199.0）なんてのも用意されています。

BrowserSeal : fast multi browser website screenshot application

そこで、Web制作に携わる立場から、
この現状で何が出来るのかをちょっと考えてみました。

Upgrade to Internet Explorer 8 | Microsoft Australia

旧バージョン対応作業料金を別途にする

2バージョン以前のブラウザでの動作保証には、
別途料金として何割かを上乗せをする、等。
その際、「旧バージョン対応作業料」等として明記しておく。

制作側の作業コストの補填は勿論ですが、
顧客サイドのブラウザのバージョンアップを促す効果も期待できると思います。

例えば、「最終顧客の社内システムがIE6依存の為、対応せざるを得ない」
というケースはかなり頻出しますが、
対応するのとしないのとで数字として明確な差があれば、
顧客社内でも、システムのバージョンアップを提案しやすくなるのではないでしょうか。

CSSを外してしまおう

かつてNetscape4.x対策として講じられた方法ですが、
そろそろIE6等にもあてがっても良い時期が来ているのではないでしょうか。
（もしくは、その時期はとうに過ぎ去っているような）

Netscape4.xは、確かmedia属性を弄ったようなおぼろげな記憶がありますが、
IE6の場合はこんなコードで実現出来ます。（jQueryを使用しています）

if (typeof document.documentElement.style.maxHeight == "undefined") {
    $("link[rel=stylesheet]").remove(); // link要素のスタイルシートを削除
    $("style[type=text/css]").remove(); // style要素を削除
    $("<div>").prependTo( $("body")).load("browser-update.html");
}

最後の行はブラウザアップデートを促すメッセージを読み込む処理です。
cf) 「No More IE6」へのアプローチ

このような処理は、旧ブラウザを使用するユーザーに対して
それを使い続ける事のデメリットを分かりやすく伝える事が出来ます。
「セキュリティがどうの」などという当事者にとってはピンと来ない話をされるよりかは、
効果は期待できそうですね。

同時に、アップデートページへの導線も用意してあげれば、
リテラシーが低いユーザーさんも安心です。

と、制作者にとっては結構当たり前かもしれない事を淡々と流す記事になりましたが、
モダンブラウザに乗り換えないユーザーさんに共通して言えるのは
それを使い続ける事による明確なデメリットが見つからないからではないか、と考えています。

であれば、それを明らかな形として提示してみれば、
バージョンアップする動機が生まれるのではないでしょうか。

マイリスペクト「地獄のミサワの「女に惚れさす名言集」」
にインスパイアされて描いてみました。ペンタブほしい。

さて、Web制作者にとってIE6への対応はかなりの足枷。
出来るだけIE6ユーザーにはモダンブラウザに乗り換えてもらいたい所ですね。
そこで、IE6で閲覧すると、アップデートを促すメッセージを表示させる。
そのための手法をいくつかまとめてみました。

1. CSSハックで表示

IE6用のメッセージを予め文書内に設置しておき、
CSSハックでIE6にだけ表示する。とても簡単。

#no-more-ie6{
    display: none;
    _display: block;
}

ただ、ハックを使うとCSSがValidで無くなるため、
好まない人もいるでしょう。そこで、

2. 条件分岐コメント

IE独自の条件分岐コメントで、IE6だけにメッセージを表示する。

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6.0]>
<link rel="stylesheet" type="text/css" href="ie6.css"  />
<![endif]-->

style.css

#no-more-ie6{
    display: none;
}

ie6.css

#no-more-ie6{
    display: block;
}

しかし、IE6からの脱却を勧めたいのにIE6専用のスタイルシートを用意する、
というのもなんだか気持ち悪いですね。

3. よろしい、ならばJavaScriptだ

jQuery等のライブラリを用意すればいとも簡単に処理できます。

HTML

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="noie6.js"></script>

noie6.js

if (typeof document.documentElement.style.maxHeight == "undefined") {
    $("<div><strong>貴方がお使いのブラウザはもう息をしていません。</strong></div>")
    .prependTo( $("body") );
}

これでページ最上部にメッセージが挿入されます。
なんて便利なんだjQuery。

4. Ajaxでもっと彩り豊かに

メッセージと一緒にモダンブラウザのダウンロードページに誘導したい。
そうなるとHTML生成の部分がかなりゴチャゴチャして気持ち悪いソースになります。
ならば、Ajaxで外部読み込みをしてみましょう。

JavaScript

if (typeof document.documentElement.style.maxHeight == "undefined") {
    $("<div />").prependTo( $("body")).load("noie6.html");
}

noie6.html

<div id="no-more-ie6">
    <h4>そのブラウザ、息してますか？</h4>
    <p>今すぐ息をしているブラウザにアップデート！</p>
    <ul>
        <li><a href="#" target="_blank">Google Chrome</a></li>
        <li><a href="#" target="_blank">Firefox</a></li>
        <li><a href="#" target="_blank">Safari</a></li>
    </ul>
</div>

だいぶすっきりしました。

それにしても、立派な葬式をあげてもらえたり、
わざわざ専用のクラックコード
を考案してもらえたり、（良い子は真似をしないように）
世界中の人々に構ってもらえるIE6はずいぶんと幸せ者だと思います。