こんばんわ
伊藤ひです。
世の中のマークアップする人は分かると思うのですが、
コーディング上、文字が入っている画像でimgタグでは置けず背景画像で対応する場面に
遭遇する事が多いと思います。
その時
<p>ボタン</p>
とタグには文字を入れておいて、
text-indent:-999999px;で置換するテクニックは、
IE6対応の時代からポピュラーなテクニックとして有名です。
その延長線でスマホでも対応していたのですが、
SPサイトをマークアップしていざ実機でテストを見たら、
インデントでテキストが-9999999px飛んでないじゃん！
そこで-9999999px以外で他にないか調べると
以下のサイトを見つけました。
http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html
colissさんいつも助かってます！あざっす！
-9999999px以外のテキストを隠す方法が下記になります。
#site-ttl{
background-image: url("./images/ggg.png");
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
そもそも-9999999pxはブラウザ上で9999999pxの領域を確保するので
パフォーマンスが良くないようです。
上記の対応を調べてみました。
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
■text-indent: 100%;
text-indentを100%は親のボックス分インデントします。
それだけだと改行されて、下の行に出てきて見えてしまいます。
■white-space: nowrap;
は改行を禁止します。
これにより下の行に出てくるのを防ぎます。
■overflow: hidden;
ではみ出た部分を非表示にします。
なるほど。良くできている。
スマホでもちゃんと消えました！（実際は非表示になっているだけですが・・・）
ちなみに記事は3年前でした。。。。。
普段マークアップで使っているテクニックを改めて見直そうと反省しました。
