CSSスプライト　-9999pxテキスト飛ばしを辞める

公開：2013年1月6日

投稿者：

CSSスプライトでtext-indent:-9999px;の使用をやめ、新しい表示方法に替えました。CSSスプライトを使用して　トップページや,サイドのバナー画像を置換していますが、
最近までテキストを-9999pxで飛ばしていました。これで良いと　そのままにしていましたが、別の方法を探していました。

Text-indent: -9999px;　はやっぱり不自然ですね。
変更しましたのでその備忘録です。

今までの記述

HTML

[html]

<a href="../"  id="sample01"　class="sprite-サンプル">リンク先</a>

[/html]

CSS

[css]

#sample01 {
text-indent: -9999px;
display: block;
}

.sprite-サンプル {  /*置き換える画像*/
background:url(http://url) no-repeat;
background-position: 0 -436px;
width: 150px;
height: 150px;
}

[/css]

今までは、これでも良かった?のだけれども、端末によっては、大きなボックス表示をしているために、ブラウザ上でのパフォーマンスが悪くなるという点があるとのこと。サーチエンジンに対してもスパム扱いされる恐れもありそう。

今まで大丈夫でしたから、今後も大丈夫では?という事もあると思いますが、早めに対処をしたいと思います。

そこで変えたのが以下になります。

CSS

[css]

#sample02 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
}

[/css]

参考にしたサイト　(いつも参考にさせていただいております。)

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

ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう！実装編』

ブロックを過剰に大きくしないので、レスポンスも良くなったように感じます。
しかし、やっぱり文字を隠しているので、スパム対策にはならないのかも。

CSSスプライトした画像を　img要素で単純に表示してしまう方が良さそうですが、
時間があるとき始めないとちょっと難しそうです。

Solala Clinic Blog

↑