[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。

Replacing the -9999px hack (new image replacement)

[ad#ad-2]

• 画像置換：-9999px
• 改善したテクニック

画像置換：-9999px

-9999pxを使った画像置換のテクニックは、下記のようになります。
HTMLは見出し要素で実装します。

HTML

<h3 id="sample06">見出しのテキスト</h3>

「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。

CSS

#sample06{
	width:300px;
	height:50px;
	background:url('bg-01.gif') no-repeat 0 -250px;
	text-indent:-9999px;
}

このテクニックではブラウザ上で9999pxの領域を確保するので、パフォーマンスがよくないという欠点があります。

[ad#ad-2]

参考までに、画像置換にいろいろな方法があります。

• CSS Spritesに利用できる画像置換の実装例いろいろ

改善したテクニック

-9999pxのパフォーマンスを改善するテクニックが、これです。

CSS

.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

ポイント

• 9999pxのボックスが描画されないため、パフォーマンスが改善されます（特にiPad 1で）
• テキストがコンテナの外に表示され、長い文字列でも壊れません。

ちらっと試してみましたが、IE6でも平気でした。