1

アイコンを使用するためのベスト プラクティスは何ですか?

アイコンの html に入力する必要がありますか? または、CSS の背景を使用する必要がありますか?

また、画像 (透明な背景) と他の背景色 (毎回新しい .png ファイルを作成したくない) の両方を指定したい場合はどうでしょうか。

どんな助けでも感謝します。ありがとう！

4

4 に答える 4

2

アイコンにはCSSの背景を使用することを好みます。つまり、すべてのアイコンにスプライトを使用し、インスタンスごとに適切に配置できるため、サーバーへの呼び出しが少なくなります。

同じアイコンが異なる背景に表示される場合は、2つのスプライトを作成します。1つは明るい背景用、もう1つは暗い背景用です。または、透明なPNG-24を使用することもできます。これはより大きなファイルサイズですが、透明度にはマットがないため、すべての色付きの背景で機能します。IE6は透過PNGをサポートしていないため、フォールバックが必要になる場合があります（気になる場合）。

于 2012-09-03T01:30:23.917 に答える
2

CSSスプライトを使用してホバー効果を追加できるため、通常は CSS の方が優れています。さらに、CSS を使用しているため、要素にクラスを追加するだけでスプライトが表示されるため、はるかに柔軟なソリューションになります。

<span class="icon">Icon</span>

CSS:

.icon {
     background: (images/icon.png) 0 0 no-repeat;
     width: 25px;
     height: 25px;
     text-indent: -10000px; /* hides the text */
     display: inline-block; }
.icon:hover { background-position: 0 25px; }

CSSを使用することをお勧めするの<img>は、サイトのロゴだけです。CSS では、右クリック -> 画像の表示が許可されていません。

于 2012-09-03T02:00:07.853 に答える
2

両方: 画像に関しては、これが情報を伝える画像か装飾的な画像かによって異なります。

情報を伝えるイメージ

意味のある代替テキストを含む HTML 画像である必要があります (例: この画像のみで作成されたリンク。リンクを空にしてはならないため、画像を CSS にすることはできません。そうしないと、リンクが空になります。

装飾画像

背景画像、スプライトの一部、カスタム フォント文字、空の代替テキストを含む HTML 画像 (後者は、作成者がコンテンツの装飾として一度だけ使用し、スタイルシートに追加しない画像の場合)

代替テキストの適切な使用(編集: WebAIM による)

編集: ユーザーに画像が表示されないケースの 1 つは、ハイ コントラスト モードを使用している場合です。次に、テキストのない大きな「アイコン」だけで構成されたメニューにリンクが表示されない場合、それは悪いことです。リンク項目の前に黒丸が表示されていなくても、これらのリンクのテキストが非常に明確であれば、OK です。
画像がページに表示されない理由は他にもたくさんあります。Wi-Fi が不安定である、接続が遅い、モバイルのコストが高い、プロキシやペアレンタル コントロールのバグがある、ユーザーの判断などです。

于 2012-09-03T01:53:25.017 に答える