CSS画像置換

今日は、技術屋アスリートの行う、CSS画像置換についてです。

僕も最近まで、グランドナビゲーションのテキストと画像の置換は、
text-indent:-999px;を使ってやっていました。

これが、特に最近では、タブーのようです。
画像置換は長いこと使われているCSSのテクニックの１つです。

ある時期は、テキストを非表示にするために「display:none」を利用しており、
音声リーダーでは読み上げされないなどの問題があったようです。

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

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

という記述です。
これは、インデントを、その枠から全く外してしまうというやり方です。
しかし、-9999px を指定した際にブラウザが、9999pxのボックスを
生成して飛ばしており、パフォーマンスに影響を与えてしますのです。

さらに厄介な事に、GoogleにSEOスパムだと思われてしまう可能性も
あるとのことから、使わない方がいいと言われています。

そこで、調べて探し出したのが、
text-indentとwhite-spaceとoverflowを使った画像置換です。

#css {

    background: url("./img.png");

    display: block;

    height: 100px;

    overflow: hidden;

    text-indent: 100%;

    white-space: nowrap;

}

 

text-indentを100%とすると、インデント量はその要素の幅分となります。

overflowは要素の領域からはみ出した部分をどう処理するか指定するプロパティ。

white-spaceは、テキストの改行の仕方を指定するプロパティ。

 

text-indentを100%とすると、インデント量はその要素の幅分となります。

しかしそれだけだと、テキストが改行して要素の中に残ってしまうので、

white-space: nowrap;で改行を禁止して完全にはみ出させます。

overflow: hidden;ではみ出た部分を非表示にします。

 

これで、しばらくの間は、画像置換はOKですね！

しかし、知らないというのは、怖いものです。

 

なれ合いというか。。。。

常に、アンテナを立てておくことを肝に命じておかなければ

なりませんね。

 

 

それでは。。。。。