Content Marketing

Cara Gunakake Sprite CSS Kanthi Mode Cahya lan Peteng

CSS sprite minangka teknik sing digunakake ing pangembangan web kanggo nyuda jumlah HTTP panjalukan digawe dening kaca web. Iki kalebu nggabungake pirang-pirang gambar cilik dadi siji file gambar sing luwih gedhe lan banjur nggunakake CSS kanggo nampilake bagean tartamtu saka gambar kasebut minangka unsur individu ing kaca web.

Keuntungan utama nggunakake sprite CSS yaiku bisa mbantu nambah wektu mbukak kaca kanggo situs web. Saben gambar dimuat ing kaca web, mbutuhake panjalukan HTTP sing kapisah, sing bisa nyuda proses loading. Kanthi nggabungake pirang-pirang gambar dadi gambar sprite siji, kita bisa nyuda jumlah panjalukan HTTP sing dibutuhake kanggo mbukak kaca kasebut. Iki bisa nyebabake situs web sing luwih cepet lan responsif, utamane kanggo situs kanthi akeh gambar cilik kaya lambang lan tombol.

Nggunakake CSS sprites uga ngidini kita njupuk kauntungan saka cache browser. Nalika pangguna ngunjungi situs web, browser bakal cache gambar sprite sawise panjalukan pisanan. Iki tegese panjalukan sabanjure kanggo unsur individu ing kaca web sing nggunakake gambar sprite bakal luwih cepet amarga browser wis duwe gambar ing cache.

CSS Sprites Ora Populer Kaya Biyen

Sprite CSS isih umum digunakake kanggo nambah kacepetan situs, sanajan bisa uga ora populer kaya biyen. Amarga bandwidth dhuwur, webp format, komprèsi gambar, jaringan pangiriman konten (CDN), loading malas, Lan caching kuwat teknologi, kita ora weruh minangka akeh CSS sprites kita digunakake kanggo ing web… senajan isih strategi gedhe. Utamane migunani yen sampeyan duwe kaca sing nuduhake akeh gambar cilik.

Tuladha CSS Sprite

Kanggo nggunakake CSS sprites, kita kudu nemtokake posisi saben gambar individu ing file gambar sprite nggunakake CSS. Iki biasane ditindakake kanthi nyetel background-image lan background-position properti kanggo saben unsur ing kaca web sing nggunakake gambar sprite. Kanthi nemtokake koordinat x lan y gambar ing sprite, kita bisa nampilake gambar individu minangka unsur kapisah ing kaca. Iki contone… kita duwe rong tombol ing file gambar siji:

Tuladha CSS Sprite

Yen kita pengin gambar ing sisih kiwa ditampilake, kita bisa nyedhiyani div karo arrow-left minangka kelas supaya koordinat mung nampilake sisih kasebut:

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

Lan yen kita pengin nampilake panah tengen, kita bakal nyetel kelas kanggo div kita arrow-right.

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

CSS Sprites Kanggo Mode Cahya lan Peteng

Salah sawijining panggunaan sing menarik yaiku nganggo mode cahya lan peteng. Mbok menawa sampeyan duwe logo utawa gambar kanthi teks peteng sing ora katon ing latar mburi peteng. Aku iki conto tombol sing wis tengah putih kanggo mode cahya lan tengah peteng kanggo mode peteng.

css sprite cahya peteng

Nggunakake CSS, aku bisa nampilake latar mburi gambar sing cocog adhedhasar apa pangguna nggunakake mode cahya utawa mode peteng:

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

Pangecualian: Klien Email Bisa Ora Ndhukung Iki

Sawetara klien email, kayata Gmail, ora ndhukung variabel CSS, sing digunakake ing conto sing diwenehake kanggo ngalih ing antarane mode cahya lan peteng. Iki tegese sampeyan kudu nggunakake teknik alternatif kanggo ngalih ing antarane macem-macem versi gambar sprite kanggo skema warna sing beda.

Watesan liyane yaiku sawetara klien email ora ndhukung properti CSS tartamtu sing umum digunakake ing sprite CSS, kayata background-position. Iki bisa dadi angel kanggo posisi gambar individu ing file gambar sprite.

Douglas Karr

Douglas Karr punika CMO saka OpenINSIGHTS lan pangadeg ing Martech Zone. Douglas wis mbantu Welasan wiwitan MarTech sukses, wis mbantu ing amarga rajin liwat $ 5 bil ing pitukon lan investasi Martech, lan terus kanggo ngewangi perusahaan ing ngleksanakake lan ngotomatisasi dodolan lan strategi marketing. Douglas minangka transformasi digital sing diakoni sacara internasional lan pakar lan speaker MarTech. Douglas uga dadi penulis buku pandhuan Dummie lan buku kepemimpinan bisnis.

Artikel web

Bali menyang ndhuwur tombol
Cedhak

Adblock Dideteksi

Martech Zone bisa nyedhiyakake konten iki tanpa biaya amarga kita monetisasi situs liwat revenue iklan, pranala afiliasi, lan sponsor. Kita bakal ngormati yen sampeyan bakal mbusak blocker iklan nalika ndeleng situs kita.