ライト モードとダーク モードで CSS スプライトを使用する方法

CSS スプライトは Web 開発で使用される技術で、スプライトの数を減らします。 HTTP ウェブページからのリクエスト。 複数の小さな画像を XNUMX つの大きな画像ファイルに結合し、CSS を使用してその画像の特定のセクションを Web ページ上の個々の要素として表示します。

CSS スプライトを使用する主な利点は、Web サイトのページ読み込み時間を改善できることです。 画像が Web ページに読み込まれるたびに、個別の HTTP 要求が必要になるため、読み込みプロセスが遅くなる可能性があります。 複数の画像を XNUMX つのスプライト画像に結合することで、ページの読み込みに必要な HTTP リクエストの数を減らすことができます。 これにより、特にアイコンやボタンなどの小さな画像が多数あるサイトで、より高速で応答性の高い Web サイトを作成できます。

CSS スプライトを使用すると、ブラウザーのキャッシュを利用することもできます。 ユーザーが Web サイトにアクセスすると、ブラウザーは最初の要求の後にスプライト画像をキャッシュします。 これは、スプライト画像を使用している Web ページ上の個々の要素に対する後続のリクエストがはるかに高速になることを意味します。これは、ブラウザーのキャッシュに画像が既にあるためです。

CSS スプライトは以前ほど人気が​​なくなった

CSS スプライトは、サイトの速度を改善するために今でも一般的に使用されていますが、以前ほど普及していない可能性があります。 帯域幅が広いため、 webp フォーマット、 画像圧縮、コンテンツ配信ネットワーク (CDN), 遅延読み込みおよび 強力なキャッシング テクノロジーのおかげで、Web 上で以前ほど多くの CSS スプライトを目にすることはなくなりました…それでもなお、優れた戦略ではありますが。 多数の小さな画像を参照しているページがある場合に特に便利です。

CSS スプライトの例

CSS スプライトを使用するには、CSS を使用してスプライト画像ファイル内の個々の画像の位置を定義する必要があります。 これは通常、 background-image および background-position スプライト画像を使用する Web ページ上の各要素のプロパティ。 スプライト内の画像の x 座標と y 座標を指定することで、個々の画像をページ上の個別の要素として表示できます。 以下に例を示します... XNUMX つの画像ファイルに XNUMX つのボタンがあります。

左側の画像を表示したい場合は、div に arrow-left クラスとして、座標はその側のみを表示します:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

右矢印を表示したい場合は、div のクラスを次のように設定します。 arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

ライトモードとダークモードの CSS スプライト

これの興味深い用途の XNUMX つは、ライト モードとダーク モードでの使用です。 おそらく、暗い背景では見えない暗いテキストを含むロゴや画像があると思います。 この例では、ライト モード用の白い中心とダーク モード用の暗い中心を持つボタンを作成しました。

CSS を使用すると、ユーザーがライト モードとダーク モードのどちらを使用しているかに基づいて、適切な画像の背景を表示できます。

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

例外: 電子メール クライアントはこれをサポートしていない可能性があります

Gmail などの一部の電子メール クライアントは、ライト モードとダーク モードを切り替えるために提供した例で使用されている CSS 変数をサポートしていません。 これは、別の手法を使用して、異なる配色のスプライト イメージの異なるバージョンを切り替える必要がある場合があることを意味します。

もう XNUMX つの制限は、一部の電子メール クライアントが、CSS スプライトで一般的に使用される特定の CSS プロパティをサポートしていないことです。 background-position. これにより、スプライト イメージ ファイル内で個々のイメージを配置することが困難になる場合があります。