Konten Pemasaran

Cara Menggunakan CSS Sprite Dengan Mode Terang Dan Gelap

CSS sprite adalah teknik yang digunakan dalam pengembangan web untuk mengurangi jumlah HTTP permintaan yang dibuat oleh halaman web. Mereka melibatkan penggabungan beberapa gambar kecil menjadi satu file gambar yang lebih besar dan kemudian menggunakan CSS untuk menampilkan bagian tertentu dari gambar tersebut sebagai elemen individual di halaman web.

Manfaat utama menggunakan sprite CSS adalah mereka dapat membantu meningkatkan waktu muat halaman untuk situs web. Setiap kali gambar dimuat di halaman web, diperlukan permintaan HTTP terpisah, yang dapat memperlambat proses pemuatan. Dengan menggabungkan beberapa gambar menjadi satu gambar sprite, kami dapat mengurangi jumlah permintaan HTTP yang diperlukan untuk memuat halaman. Ini dapat menghasilkan situs web yang lebih cepat dan lebih responsif, terutama untuk situs dengan banyak gambar kecil seperti ikon dan tombol.

Menggunakan sprite CSS juga memungkinkan kita memanfaatkan cache browser. Saat pengguna mengunjungi situs web, browser mereka akan meng-cache gambar sprite setelah permintaan pertama. Ini berarti bahwa permintaan selanjutnya untuk elemen individual di halaman web yang menggunakan gambar sprite akan jauh lebih cepat karena browser sudah memiliki gambar di cache-nya.

CSS Sprite Tidak Sepopuler Dulu

Sprite CSS masih umum digunakan untuk meningkatkan kecepatan situs, meskipun mungkin tidak sepopuler dulu. Karena bandwidth yang tinggi, webp format, kompresi gambar, jaringan pengiriman konten (CDN), pemuatan malas, dan caching yang kuat teknologi, kami tidak melihat banyak sprite CSS seperti dulu di web… meskipun ini masih merupakan strategi yang bagus. Ini sangat berguna jika Anda memiliki halaman yang mereferensikan banyak gambar kecil.

Contoh Sprite CSS

Untuk menggunakan sprite CSS, kita perlu menentukan posisi masing-masing gambar dalam file gambar sprite menggunakan CSS. Hal ini biasanya dilakukan dengan mengatur background-image dan background-position properti untuk setiap elemen di halaman web yang menggunakan gambar sprite. Dengan menentukan koordinat x dan y gambar di dalam sprite, kita dapat menampilkan gambar individual sebagai elemen terpisah pada halaman. Ini contohnya… kami memiliki dua tombol dalam satu file gambar:

Contoh Sprite CSS

Jika kita ingin gambar di sebelah kiri ditampilkan, kita bisa menyediakan div arrow-left sebagai kelas sehingga koordinat hanya menampilkan sisi itu:

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

Dan jika kita ingin menampilkan panah kanan, kita akan mengatur kelas untuk div kita arrow-right.

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

CSS Sprite Untuk Mode Terang Dan Gelap

Salah satu penggunaan yang menarik dari ini adalah dengan mode terang dan gelap. Mungkin Anda memiliki logo atau gambar yang memiliki teks gelap yang tidak terlihat pada latar belakang gelap. Saya melakukan contoh tombol yang memiliki pusat putih untuk mode terang dan pusat gelap untuk mode gelap.

css sprite terang gelap

Dengan menggunakan CSS, saya dapat menampilkan latar belakang gambar yang sesuai berdasarkan apakah pengguna menggunakan mode terang atau mode 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: Klien Email Mungkin Tidak Mendukung Ini

Beberapa klien email, seperti Gmail, tidak mendukung variabel CSS, yang digunakan dalam contoh yang saya berikan untuk beralih antara mode terang dan gelap. Ini berarti Anda mungkin perlu menggunakan teknik alternatif untuk beralih di antara versi gambar sprite yang berbeda untuk skema warna yang berbeda.

Keterbatasan lainnya adalah beberapa klien email tidak mendukung properti CSS tertentu yang biasanya digunakan dalam sprite CSS, seperti background-position. Hal ini dapat mempersulit penempatan gambar individual di dalam file gambar sprite.

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.