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

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

サイトのキャプチャ

Replacing the -9999px hack (new image replacement)

画像置換:-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の領域を確保するので、パフォーマンスがよくないという欠点があります。

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

改善したテクニック

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

CSS

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

ポイント

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

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

top of page

©2016 coliss