Clever Geek Handbook

アイコン、絵文字など 悪：闘争の方法

前文



ほとんどすべてのWeb開発者は、遅かれ早かれ、多くの小さな詳細を含むインターフェースを作成する必要に直面しています。 私たちの兄弟の圧倒的多数は、ためらうことなく、これらの小さな詳細の束を小さな写真の束にカットし、彼は考えずに立ち止まると思います 起こりうるトラブルについて、または他のアプローチの実際の有用性について。



悪い例



最初の悪い例：

最初の悪い例

2番目の悪い例：

2番目の悪い例

3番目の例として、 99％のフォーラムを参照してください



より良くする



実際には、多くのファイルに対してすべてのアイコンが収集される1つのファイルを使用するという考え方です。 これはまったく難しいことではありません。CSSの知識とPhotoshopを使用してアイコンを1つのファイルに接着するだけで十分です。

アイコンのアスペクト比が16x16ピクセルであるとします。

アイコンを配置するためのhtmlコードは次のようになります。 

 <div class = "my_icon">
     <div id = "icon_1" onclick = "some_event（）"> </ div>
 </ div>


または： 

 <div class = "my_icon">
     <a href="/dir/file.ext"> <span id = "icon_1"> </ span>リンクテキスト</a>
 </ div>


ファンタジーは、特定の例で選択するのがより便利なオプションを開発者に伝えます。

CSSは次のようになります。 

 .my_icon div {
    幅：16px; 高さ：16px;
    背景：url（ '/ cp / images / icons.png'）no-repeat;
    カーソル：ポインター。
 }
 ＃icon_1 {background-position：0px}
 ＃icon_2 {background-position：-16px}
 / *絵文字の数による* *


アイコンを水平方向だけでなく垂直方向にも配置する場合、高さを調整する2番目のbackground-position値が必要です。 

 ＃icon_4 {background-position：-16px -16px}


PNG-24の使用は、すべての「接着」されたピクトグラムに256色以上ある場合にのみ、GIFよりも有益です。



実際のユーティリティ



  1. 接着された画像ファイルのサイズは、すべての小さなファイルの合計の半分になる傾向があり、
  2. サーバーへのHTTP要求の数は、反復ごとのアイコンの数*反復の数 * * .cssファイル（フォーラムおよびブログで一般的）の1つに削減されます。
  3. htmlコードの数が削減されます。


固体プラス:)



デザートの権威ある例



最初の信頼できる例：

最初の権威ある例

2番目の信頼できる例：

2番目の信頼できる例



Habralyudyにとって、このトピックがうまく機能することを願っています。

PS Habrは、上記のサービスを利用する価値があります。 私見。

PPS OnHabréでは、画像の読み込みサービスにバグがあります:(イラストを投稿する場所を急いで探す必要がありました


More articles:


All Articles