「text-indent: 100% ＋ white-space: nowrap」を使う。パフォーマンス改善にもなるとのことだが、最近のハードウェアだとパフォーマンス上の利点は見つからなかったとのこと。
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
【上記テクニックの補足】"HTML5 Boilerplate プロジェクトで話し合った結果、最近のハードウェアだとパフォーマンス上の利点は見つからなかった。でも初代 iPad に最適化するという視点から見たら価値がある"
IE8 以上であれば CSS が有効かつ画像が無効という状況でもテキストが表示できる画像置換テクニック。
.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; }
「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/1334637257IE8 以上であれば 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;
}
関連するトピックス