2

私の仕事は、Web サイトの CSS を最適化することです。現在、これらのボタンはすべて、次のようなイメージ スプライトを使用して作成されています。

画像ボタンスプライト

これらのスプライトはすべて 1 つの大きな .png (40 個ほどの異なるボタン) に配置されます。

ボタンを画像ではなく HTML として作成するとしたら、次のようになると思います。

<style type="text/css">
  a.button
  {
    display: block;
    width: 175px;
    height: 35px;
    background: url("../images/green-gradient.jpg");
    background-repeat: repeat-x;
  }

  a.button:hover
  {
   background: url("../images/green-gradient-hover");
  }
</style>

<a href="#" class="button">Arrange Demo</a>

これらのボタンを上記のように HTML として (1px x 35px の繰り返し背景画像を繰り返して) 作成するか、現在のようにスプライトにするのがより最適でしょうか?

上記のように HTML として実行した場合、ホバー時に別の繰り返し背景を使用することによるパフォーマンスへの影響はありますか?

4

1 に答える 1

1

上記の方法は、小さなファイルをロードして再利用しているため、間違いなくより効率的です。そうは言っても、可能であれば CSS3 グラデーションを使用すると、より効率的になります。また、modernizr のように、JavaScript を使用してブラウザ フレンドリーにすることもできます。

サイトの読み込み時間を分析するには、 Google PageSpeed Insightsを参照してください。

CSS3 グラデーションのブラウザー サポートを確認するには、 Can I Use Itを参照してください。

于 2013-03-21T13:24:06.793 に答える