RetinaディスプレイでのCSSスプライトの応答性を高め、[より少なく]

なぜスプライトが必要なのですか？

css-spritesの長所と短所は Habréで何度も説明されているので、なぜこれが必要なのかを簡単に説明します。

• まず、スプライトを使用して、ページの読み込みを高速化します。 アイコンを使用する場合、プロジェクトで使用するユニバーサルツールを作成できます。
• 第二に、高ppiのすべてのデバイス（たとえば、Windows Phone 7.5-7.8、Androidのバージョン4までのストックブラウザー）がWebフォントの使用をサポートしているわけではありません。
• 特別なスプライト生成サービスを使用した簡単な統合

人生がラズベリーのように見えないような問題文

多くの要素でcss-spritesを使用すると、 background-position



でcss-propertiesを作成する問題が発生します。 彼らはたくさん書く必要があり、時にはたくさん書く必要があります。 もちろん、スプライトを生成するための多くのサービスは私たちを助けます-彼らは、スプライトとともに、座標を持つcss / less / sassファイルを提供します。 ただし、ほとんどの場合、すべてがピクセルに厳密に関連付けられています。

• 元のスプライトファイルのサイズを変更すると（たとえば、網膜スクリーンの場合）、すべてが「移動」します。
• たとえば、アイコンを挿入するコンテナ要素のサイズを変更して、このアイコンのサイズを変更することはできません。 background-size: cover/contain/100%
  
  
  
  プロパティは明らかな理由で機能しません。

電話、タブレット、新しいRetinaラップトップで72ppi用に準備されたスプライトを使用すると、画像がぼやけてしまい、見苦しくなります...



クロスブラウザー互換性、クロスプラットフォームおよびクロスサムシングに関する免責事項

このメソッドでcss3を使用するのは、標準の72よりも高いppiのディスプレイのみです。同様のディスプレイが比較的最近登場し、IE 7.0-IE8.0およびFirefoxまたはOperaの同様の古いバージョンは存在しません。 モバイルセグメントでも、すべてが正常に動作し、 メディアクエリのサポートがどこにでも実装されます 。

少ないスニペットの形成を始めましょう

作業中のプロジェクトで使用することを強制する人は誰もいません。すべてを通常のcssにコンパイルできます。 Macには同様のプログラムがたくさんあり、 WinLessはWindowsに役立ちます。

ここで、スプライトの特別なケースを考えます-素晴らしいリソースicomoon.ioによって生成されたアイコンを持つスプライト



網膜用のスプライトを設定する必要がある場合、単純なcssで何をしますか？ おそらく、高解像度のスプライトの使用を拒否するでしょう。 おそらく、彼らは高いPPIを持つデバイスにのみそれを接続します。

しかし、ここでは、サイズに合わせてこのスプライトをスケーリングする問題に直面しています。 そして、これは、 transform: scale(x);



を除いてtransform: scale(x);



解決できないので、スプライトを再描画し、すべてのbackground-position



書き換える必要があります。 そして、すべてがうまくいきますが、時にはアイコンの数がスケールから外れてしまうので、実際に普遍的な解決策が欲しいです。

私はそれらを持っています

それでは始めましょう：

• 最初に必要なのは、2つのスプライト（400以上のppiをカバーしたい場合は3つ）とそれらのCSSコードを生成することです。 これは、上で引用したサービスを通じて簡単に実行できます。 16px（25kb）、32px（62kb）、64px（163kb）のサイズのアイコンを145個生成しました
  
  最初は、16pxアイコン用の添付されたcssファイルは次のようになります（巨大なコードシートで私を怖がらせないように、意図的に4つのアイコンに減らしました）。
  
  

   .icon-rss,.icon-e-mail,.icon-youtube,.icon-mailru { display: inline-block; width: 16px; height: 16px; background-image: url(sprites.png); background-repeat: no-repeat; } .icon-rss { background-position: 0 0; } .icon-e-mail { background-position: -32px 0; } .icon-youtube { background-position: -64px 0; } .icon-mailru { background-position: -96px 0; }
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
• 次に、スプ​​ライト画像のサイズを確認します。 16pxアイコンの場合、496pxでした。 この値は、lessコードの参照になります。 次に、行background-size: 496px;
  
  
  
  追加しbackground-size: 496px;
  
  
  
  
• ここで、「 px
  
  
  
  」をデフォルトの1pxに等しい変数に置き換えて、このcss-spriteのすべてのユニットを削除する必要があります。 それをsize
  
  
  
  と呼びましょう。 これは、オートコレクトによって簡単に実行できます。 途中で、ファイルの名前をless拡張子に変更し、プロジェクトのメインless-fileを含めることを忘れないでください：
  
  

   @size: 1px; .icon-rss,.icon-e-mail,.icon-youtube,.icon-mailru { display: inline-block; width: 16*(@size); height: 16*(@size); background-image: url(sprites.png); background-repeat: no-repeat; background-size:496*(@size); } .icon-rss { background-position: 0 0; } .icon-e-mail { background-position: -32*(@size) 0; } .icon-youtube { background-position: -64*(@size) 0; } .icon-mailru { background-position: -96*(@size) 0; }
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• 結果のミックスインをタグに追加することはできないことに注意することが重要です-クラスに幅と高さがあります。つまり、疑似要素::before
  
  
  
  または::after
  
  
  
  追加します。
• lessは、コード内のどこでも@media
  
  
  
  クエリをサポートします。ピクセル密度に応じて、1つまたは別のファイルを接続します。
  
  

   @size: 1px; .icon-rss,.icon-e-mail,.icon-youtube,.icon-mailru { display: inline-block; width: 16*(@size); height: 16*(@size); background-image: url(sprites.png); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url(sprites32.png); } @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and ( min--moz-device-pixel-ratio: 4), only screen and ( -o-min-device-pixel-ratio: 4/1), only screen and ( min-device-pixel-ratio: 4), only screen and ( min-resolution: 360dpi), only screen and ( min-resolution: 4dppx) { background-image: url(sprites64.png); } background-repeat: no-repeat; background-size:496*(@size); } .icon-rss { background-position: 0 0; } .icon-e-mail { background-position: -32*(@size) 0; } .icon-youtube { background-position: -64*(@size) 0; } .icon-mailru { background-position: -96*(@size) 0; }
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

実用化へのコメント

1. ジェネレータープログラムで3つの異なるスプライトを一度に生成する必要はありません。 1つ（非常に網膜の画面用）を生成し、貴重なcssファイルを取得してから、グラフィカルエディターを介して通常のデバイス（網膜ではない）用のスプライトの縮小バージョンを作成できます。
2. 私のプロジェクトでは、「 px
   
   
   
   」を使用していません。 代わりに、値「 rem
   
   
   
   」をsize
   
   
   
   変数に割り当てます。 これにより、アイコンのサイズを必要に応じて自由に変更できます。タブレットからサイトを開く場合、これらの同じrem
   
   
   
   がもう少し大きくなります。 たとえば、タブレットのフォントサイズを少し大きく設定します。
   
   

    @media (min-width: 768px) and (max-width: 1366px) { html {font-size: 120%;} }
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

このテクニックを使用する場合

• 網膜/非網膜スクリーン用に異なる品質のスプライトをロードする機能。
• プロジェクトの開発中にアイコンのサイズが変更されると想定される場合。
• サイトのモバイルバージョンを作成するときに元のスプライトを適応させるタイミング。
• 私の練習では、デバイスでWebフォントがサポートされていない場合にのみこの方法を使用します。 それ以外の場合は、アイコンフォントを使用する方が簡単です。ここでは、サイズを変更したり、影を設定したりすることができ、サイズやぼかしを心配する必要はありません。

PS：LANのスペル、構文、語彙のエラーについて書いてください。

PPS：この材料は、チャンバーに測定値と重量を追加することを目的としておらず、使用されている例は完全ではありません。 この記事のグルのない/ sassは、特別なものを見つけることはありませんが、初心者には便利です。