テキストを画像に置き換える、または-9999pxを取り除く新しい方法

テキストを画像に置き換える手法についてお話ししたいと思います。 たとえば、検索ロボットと印刷バージョンの両方でテキストを保持しながら、ページタイトルにグラフィックオブジェクトを使用する必要がある場合、ほとんどの人がレイアウトの瞬間に出くわしたと思います。 そして、原則として、ページのセマンティクスを破りたくありません。

この問題を解決した歴史について少し。

最初のポピュラーな手法は、いわゆるFIR（別名Fahrner Image Replacement）で、2003年に登場しました。 それは切り株のように単純であり、多くの初心者のタイプセッターはまだそれを使用しています：

<style> h1.text-hide span { display: none; } h1.text-hide { height: 35px; /* height of the replacement image */ background-image: url("hello-world.gif"); background-repeat: no-repeat; } </style> <h1 class="text-hide"><span>Hello world!</span><h1></code>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おなじみのこと？ 実際、画像が存在する背景のタグ内に、画像内のテキストを複製するインラインタグを追加し、ディスプレイで非表示にします。

多くの人は、セマンティクスの観点と、不要なタグを使用したhtmlの重み付けの観点の両方で、この手法の湾曲をすぐに認識しました。 他のすべては、グレーオプティマイザーに愛され、その結果、一部の検索エンジンは、そのようなオブジェクトでオーバーロードされたページに制裁を適用しました。

同じ年に、別の代替技術が登場しました 。 彼女はこのように働いた：

 #ID_OF_ELEMENT { padding: HEIGHT_OF_IMAGEpx 0 0 0; overflow: hidden; background-image: url("hello_world.gif"); background-repeat: no-repeat; height: 0px !important; height /**/:HEIGHT_OF_IMAGEpx; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ここではIE5.5のハックが使用されましたが、ブロックモデルではすべてが悪かったのです。 その後、この手法は多くの場合動作しなくなり、多くの人がハッキングを好まないため、定着しませんでした。

-9999px

結局のところ、 Parkのアクセシブルな画像置換技術が生まれました 。これは現時点で最も人気があり、1行のみで構成されています。

 .text-hide { text-indent: -9999px ( -999em); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この手法は完全ではありませんが、その作業の微妙な違いを忘れなければ、ほとんどの場合に機能します。 特に、text-alignがtext-indentと同じ方向に向けられていることを確認します（ほとんどの場合、text-align：left）。 また、display：inline-block;プロパティを持つ要素に適用することにより、この要素がIE7で非表示のテキストの後に飛び去ることを忘れないでください。



私は、多くの人と同じように、「-9999px」の支持者でしたが、これは最良の選択肢ではなく、この問題に対するより美しい解決策があるはずだと理解していました。 -9999pxを処方するたびに、これらのピクセルが将来サイトに影響を与えるかどうか疑問に思いました。

新しいソリューション

それで、数日前、同志Zeldmanはこのオプションを提案しました：

 .text-hide { text-indent: 100%; white-space: nowrap; overflow: hidden; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この方法は、いくつかの問題を一度に解決します。

• まず、非表示になっている最長のテキストであっても、テキストの長さが9999pxを超えている場合でも、表示されるコンテナに到達しないことを確認できます。
• 第二に、最初にそれが発見され、その後、次のような問題が同じ方法で解決されました：-9999pxが指定されるたびに、この幅の見えないブロックがdomツリーに追加されました。 そして、これが通常のブラウザーにほとんど影響を与えない場合、iPadではアニメーションのパフォーマンスに重大な問題がありました（ 検証用のデモ ）

ただし、この方法も理想的ではありません。要素にパディングがある場合、テキストの一部はそこから見えます。 この問題は、テキストが隠されているブロックのパディングをゼロにすることで解決されます。



Zeldmanバージョンでは、主要なフロントエンド開発者が少し復活し、コメントやブログで活発な議論が行われました。

また、彼はhtml5boilerplate開発チームに気づかれました。彼は現在、ボイラープレートの補助クラスのセットにテキストを隠す新しい方法を含めることについてgithubで活発に議論しています。

同じスレッドで、生存権を持つ別の方法が提案されました。

 .text-hide { font: 0/0 serif; text-shadow: none; color: transparent; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、この方法はクロスブラウザーフレンドリーです-IE7-10、Opera 11.61、Chrome 17.0、Firefox 10.0、およびSafari 5.1.2でテスト済みです。 確かに、古いブラウザではこのオプションは機能しません-それらの多くはフォントのゼロ値を理解していません。 たとえば、古いSafariの一部は、ゼロではなく6または8の値を取る場合があります。



私はこの投稿から歴史と新しい方法に関するほとんどの情報を得ました。



UPD： 擬似要素を使用したNicholas Gallagherのもう1つの興味深い方法 、 ヒント SelenIT2に感謝



UPD2： githubのhtml5-boilerplateのコメントでは、3つのIRメソッド（ネガティブテキストインデント、ポジティブテキストインデントおよびフォント：0/0 a）のテスト結果がいくつかのスクリーンリーダーに表示されました。 フォントのオプション：0/0 aはWindow-Eyesでガタガタしません（私はそれが死にかけていることを理解しているので、IE5.5と比較されます）、残りはどこでも動作します（肯定的なテキストインデントがありますが、テキストはJAWSの古いバージョンで発声されると表示されます） ）

SelenIT2に感謝、 コメントへのリンク



UPD3： Chris Coyierは素晴らしい仕事をし、画像置換技術に特化した博物館全体をまとめました： CSS Image Replacement Museum