briccolog » 画像置き換えのtext-indent:-9999pxに変わる新手法

外苑前のWEB制作会社ブリコルールのスタッフによる、役に立つ情報から役に立たない情報まで。いろんなところにアンテナ張ってるつもりです。 PC向けWEBページのコーディングをする際、見出し領域などで画像の置き換えを行うためによく使われているのが「text-indent:-9999px;」を設定する手法です。 h2#campaignTitle{ text-indent:-9999px; width:400px; height:50px; background:url(campaigntitle.jpg) no-repeat; } ところがこの手法には一つ大きな問題があります。見た目はどうであれ、この部分の描画を行う際、ブラウザ内部の処理としては-9999ピクセルという非常に大きなブロック領域を生成しているため、パフォーマンスが低下してしまうのです。 この問題を解消するための新たな方法が、以

[kuwalab]

これだ。

[satani1209]

メニューテキスト消す方法

[takarakuda]

画像置き換えのtext-indent:-9999pxに変わる新手法

[yukashin]

text-indent:-9999px新手法

[yum-design]

[text-indent:-9999px新手法]

[kkeisuke]

パフォーマンス