text-indent -9999px; の代替で背景画像使いたいけど、文字いらない！

text-indent:-9999pxの代替法をご紹介します。





背景画像使いたいけど、文字いらない！ていうときありますよね？

この代替法を利用すれば、パフォーマンスの低下を回避可能です！

※SEOスパムにならない保障はございませんよ。。。

いつどうなるかはわかりませんが、僕が使用しております。

text-indent:-9999px　と同様にテキストを非表示にする手法です。

代替手法は、以下の通りです。

#text_iranai {
background-image : url("画像パス");
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}

text-indent:-9999px;　の変更部分がこちら。

--------------変更部分---------------
overflow: hidden;
text-indent: 100%;
white-space: nowrap;

この手法なら9999pxの分の領域を確保しないため、パフォーマンスの低下の回避可能です。


スパムにならない保証はありません。


ですが、パフォーマンスの低下回避とインデントを・・・

9999px左に…


っていう方がスパムになりやすいと個人的には思います。