Pemasaran Kandungan

Cara Menggunakan Sprite CSS Dengan Mod Cerah Dan Gelap

CSS sprite adalah teknik yang digunakan dalam pembangunan web untuk mengurangkan bilangan HTTP permintaan yang dibuat oleh halaman web. Ia melibatkan menggabungkan berbilang imej kecil ke dalam satu fail imej yang lebih besar dan kemudian menggunakan CSS untuk memaparkan bahagian tertentu imej tersebut sebagai elemen individu pada halaman web.

Faedah utama menggunakan sprite CSS ialah mereka boleh membantu meningkatkan masa muat halaman untuk tapak web. Setiap kali imej dimuatkan pada halaman web, ia memerlukan permintaan HTTP yang berasingan, yang boleh melambatkan proses pemuatan. Dengan menggabungkan berbilang imej menjadi satu imej sprite, kami boleh mengurangkan bilangan permintaan HTTP yang diperlukan untuk memuatkan halaman. Ini boleh menghasilkan tapak web yang lebih pantas dan lebih responsif, terutamanya untuk tapak yang mempunyai banyak imej kecil seperti ikon dan butang.

Menggunakan sprite CSS juga membolehkan kami memanfaatkan caching penyemak imbas. Apabila pengguna melawat tapak web, penyemak imbas mereka akan cache imej sprite selepas permintaan pertama. Ini bermakna permintaan seterusnya untuk elemen individu pada halaman web yang menggunakan imej sprite akan menjadi lebih pantas kerana penyemak imbas sudah mempunyai imej dalam cachenya.

Sprite CSS Tidak Popular Seperti Dulu

Sprite CSS masih biasa digunakan untuk meningkatkan kelajuan tapak, walaupun ia mungkin tidak begitu popular seperti dahulu. Kerana jalur lebar yang tinggi, webp format, pemampatan imej, rangkaian penghantaran kandungan (CDN), muat turun malas, dan caching yang kuat teknologi, kami tidak melihat seberapa banyak sprite CSS seperti yang biasa kami lihat di web… walaupun ia masih merupakan strategi yang hebat. Ia amat berguna jika anda mempunyai halaman yang merujuk kepada banyak imej kecil.

Contoh Sprite CSS

Untuk menggunakan sprite CSS, kita perlu menentukan kedudukan setiap imej individu dalam fail imej sprite menggunakan CSS. Ini biasanya dilakukan dengan menetapkan background-image and background-position sifat untuk setiap elemen pada halaman web yang menggunakan imej sprite. Dengan menentukan koordinat x dan y imej dalam sprite, kami boleh memaparkan imej individu sebagai elemen berasingan pada halaman. Berikut ialah contoh... kami mempunyai dua butang dalam satu fail imej:

Contoh Sprite CSS

Jika kita mahu imej di sebelah kiri dipaparkan, kita boleh menyediakan div dengan arrow-left sebagai kelas jadi koordinat hanya memaparkan bahagian itu:

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

Dan jika kami ingin memaparkan anak panah kanan, kami akan menetapkan kelas untuk div kami arrow-right.

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

Sprite CSS Untuk Mod Cerah Dan Gelap

Satu penggunaan menarik ini adalah dengan mod terang dan gelap. Mungkin anda mempunyai logo atau imej yang mempunyai teks gelap padanya yang tidak kelihatan pada latar belakang gelap. Saya melakukan contoh butang ini yang mempunyai pusat putih untuk mod cahaya dan pusat gelap untuk mod gelap.

css sprite terang gelap

Menggunakan CSS, saya boleh memaparkan latar belakang imej yang sesuai berdasarkan sama ada pengguna menggunakan mod terang atau mod gelap:

: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);
}

Pengecualian: Pelanggan E-mel Mungkin Tidak Menyokong Ini

Sesetengah klien e-mel, seperti Gmail, tidak menyokong pembolehubah CSS, yang digunakan dalam contoh yang saya berikan untuk bertukar antara mod terang dan gelap. Ini bermakna anda mungkin perlu menggunakan teknik alternatif untuk menukar antara versi berbeza imej sprite untuk skema warna yang berbeza.

Had lain ialah sesetengah klien e-mel tidak menyokong sifat CSS tertentu yang biasa digunakan dalam sprite CSS, seperti background-position. Ini boleh menyukarkan untuk meletakkan imej individu dalam fail imej sprite.

Douglas Karr

Douglas Karr ialah CMO daripada OpenINSIGHTS dan pengasas Martech Zone. Douglas telah membantu berpuluh-puluh syarikat permulaan MarTech yang berjaya, telah membantu dalam usaha wajar lebih $5 bilion dalam pemerolehan dan pelaburan Martech, dan terus membantu syarikat dalam melaksanakan dan mengautomasikan strategi jualan dan pemasaran mereka. Douglas ialah transformasi digital yang diiktiraf di peringkat antarabangsa dan pakar serta penceramah MarTech. Douglas juga merupakan pengarang buku panduan Dummie dan buku kepimpinan perniagaan yang diterbitkan.

Artikel yang berkaitan

Kembali ke atas butang
Tutup

Adblock Dikesan

Martech Zone mampu memberikan anda kandungan ini tanpa sebarang kos kerana kami mengewangkan tapak kami melalui hasil iklan, pautan ahli gabungan dan tajaan. Kami amat menghargai jika anda akan mengalih keluar penyekat iklan anda semasa anda melihat tapak kami.