-

「text-indent: -9999px;」の代替となる画像置換テクニック

[CSS]画像置換「-9999px」のパフォーマ... / 画像置換のあれ - {u:b} / 画像置換のあれへの補足 – terkel.jp他...全3件

「text-indent: 100% + white-space: nowrap」を使う。パフォーマンス改善にもなるとのことだが、最近のハードウェアだとパフォーマンス上の利点は見つからなかったとのこと。

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

http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html
.hide-text { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

【上記テクニックの補足】
"HTML5 Boilerplate プロジェクトで話し合った結果、最近のハードウェアだとパフォーマンス上の利点は見つからなかった。でも初代 iPad に最適化するという視点から見たら価値がある"

画像置換のあれ - {u:b}

http://d.hatena.ne.jp/ub-pnr/20120417/1334637257

IE8 以上であれば CSS が有効かつ画像が無効という状況でもテキストが表示できる画像置換テクニック。

画像置換のあれへの補足 – terkel.jp

http://terkel.jp/archives/2012/04/css-image-replacement-2012/
.ir { 
   height: 100px; 
   width: 400px; 
   overflow: hidden; 
   *text-indent: -9000px; /* for IE7/6 */ 
   *background: url(image.gif) no-repeat 0 0; /* for IE7/6 */ 

 
.ir:before { 
   content: url(image.gif); 
   display: inline-block; 
   font-size: 0; 
   line-height: 0; 
}
最終更新日:2012-04-17 (38,381 views)

関連するトピックス

ページ上部に戻る