2012/03/03

画像置換に -9999px はつかわない

画像置換という言葉を知っているでしょうか?テキストを「text-indent:-9999px」と指定して、画面の外に飛ばしてしまい背景画像をその代わりに表示する技術です。



画像置換の歴史
画像置換は長いこと使われているCSSのテクニックに1つでしょう。では、このテクニック自体はどのようにして、生まれてきたのでしょうか?

意外にも、このテクニックは元はC.Z.Robertson氏が1999年に考案し、それを「Todd Fahner」氏やTwitterのDouglas Bowman氏がチュートリアルで説明し、一般的に広めたものです。この時点ではテキストを非表示にするために「display:none」を利用しており、音声リーダーでは読み上げされないなどの問題がありました。

その後、このアクセシビリティ上の問題を解決するために「-9999px」というテクニックを生み出したのです。

現在の画像置換

.hide {
text-indent: -9999px;
}

参考
http://www.zeldman.com/daily/0203c.shtml#cssbgben

現在の画像置換の問題点
この現在の画像置換の問題的は、-9999px を指定した際にブラウザが、9999pxのボックスを生成して飛ばしており、パフォーマンスに影響を与えてしますのです。

新しい画像置換
ではこれが、新しい画像置換です。text-indentを利用するのですが「100%」を指定してテキストを外に飛ばしあとはoverflow:hiddenで非表示にしてしまいます。

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

スマートフォンでは、パフォーマンスを非常に考慮しなければなりません。これからは、新しい画像置換を利用してみてはいかがでしょうか?

元記事:
この記事は元記事がありますので必ず原文を読むようにしてください。
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/