僕自身はこの画像置換法というやつは使ったことがありません。なぜかというと・・・
インチキくさいからです。なんていうと怒られそうですが・・・。最初にこの方法を知った時、text-indent:-9999px
って直感的にインチキだって思ったんです。
画像置換法は、上記のようにtext-indent
を使って、例えばヘッダ<h1>
のテキストを強制的に欄外に表示するようにして、代わりの背景画像を指定することで、テキスト情報と視覚情報を両立させる方法です。
ところが、背景はブラウザの初期設定では印刷されないようになっています。印刷してみたら何にも出てこない、みたいなことになりかねません。
もとより、一般的なユーザーがWEBページを印刷することに何を期待するかと言うと、画面に表示されているそのままが出力されることだと思います。
そういう意味では、印刷用にレイアウトの異なるCSSを設定することすら(したことないですがorz)ユーザーにとっては混乱のもとなのかも知れません。印刷用のページを別途、画面で表示させるべきなのでしょう。
そんなことを考えていて、ロールオーバーにしても、いまだに<img>
+でやったりしています。が"使用しない"になっててもとりあえず画像は表示されるので・・・
ということを最近考えているんですが、近いことをLucky bag::blogさんが既に書かれていました。なんと、強制的に背景画像を印刷してしまえるみたいです。でも、display: list-item
に置換とか恐くてできないよーーー。