画像置換のあれへの補足

先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。

まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました:

/* Phark method */

.ir {
    height: 100px;
    width: 400px;
    background: url(image.png) no-repeat 0 0;
    text-indent: -9999px;
}

このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事 で紹介されました:

/* Kellum method */

.ir {
    height: 100px;
    width: 400px;
    background: url(image.png) no-repeat 0 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

そしてこのケラム式が HTML5 Boilerplate のチームによって検討される 過程で もうひとつのテクニック (H5BP 式) が 提案 されます:

/* H5BP method */

.ir {
    height: 100px;
    width: 400px;
    background: url(image.png) no-repeat 0 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

ただしこの H5BP 式は、該当する要素で em 単位が使えない、コードが短さを優先したためややトリッキーでわかりづらい、IE6 でテキストが消えずゴマ粒のように残ってしまう、などの欠点があります。

さらに、ケラム式と H5BP 式ともに IE7 でバグ があります。

そしてこれはとくに重要な点ですが、以上 3 つのテクニックはいずれも、CSS が有効かつ画像が無効 (読み込みに失敗した場合や非表示に設定している場合など) という状況では何も表示されなくなってしまうという、アクセシビリティ上の問題があります。

というわけで、疑似要素を利用した ナッシュ式 に IE7 以下向けのフォールバックとしてファーク式を加えたものが「比較的まし」な画像置換かな、というのが僕の見解です:

/* Nash method + fallback */

.ir {
    height: 100px;
    width: 400px;
    overflow: hidden;
    *text-indent: -9999px; /* for IE7/6 */
    *background: url(image.png) no-repeat 0 0; /* for IE7/6 */
}

.ir:before {
    content: url(image.png);
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

IE8 以上であれば CSS 有効/画像無効の場合でもテキストが表示されるのは大きいですね。ちなみに画像置換の歴史は CSS-Tricks の記事 に詳しいです。