コンテンツマーケティング

ライト モードとダーク モードで 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 つのボタンがあります。

CSS スプライトの例

左側の画像を表示したい場合は、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スプライトライトダーク

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. これにより、スプライト イメージ ファイル内で個々のイメージを配置することが困難になる場合があります。

Douglas Karr

Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

関連記事

先頭へ戻るボタンに
閉じる

Adblockが検出されました

Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。