eusi Marketing

Kumaha Nganggo Sprites CSS Sareng Modeu Cahaya sareng Gelap

CSS sprites mangrupakeun téhnik dipaké dina ngembangkeun web pikeun ngurangan jumlah HTTP requests dijieun ku kaca web. Aranjeunna ngalibetkeun ngagabungkeun sababaraha gambar leutik kana file gambar tunggal nu leuwih gede lajeng ngagunakeun CSS pikeun nembongkeun bagian husus gambar éta salaku elemen individu dina kaca web.

Kauntungan utama ngagunakeun sprites CSS nyaéta aranjeunna tiasa ngabantosan ningkatkeun waktos beban halaman pikeun halaman wéb. Unggal waktos gambar dimuat dina halaman wéb, peryogi pamenta HTTP anu misah, anu tiasa ngalambatkeun prosés ngamuat. Ku ngagabungkeun sababaraha gambar kana gambar sprite tunggal, urang bisa ngurangan jumlah requests HTTP diperlukeun pikeun muka kaca. Ieu tiasa nyababkeun halaman wéb anu langkung gancang sareng langkung responsif, khususna pikeun situs anu seueur gambar leutik sapertos ikon sareng tombol.

Ngagunakeun CSS sprites ogé ngamungkinkeun urang pikeun ngamangpaatkeun cache browser. Nalika pangguna ngadatangan halaman wéb, browserna bakal nga-cache gambar sprite saatos pamundut anu munggaran. Ieu ngandung harti yén pamundut saterusna pikeun elemen individu dina kaca web nu ngagunakeun gambar sprite bakal leuwih gancang saprak browser nu geus boga gambar dina cache na.

CSS Sprites Henteu Populer Sakumaha Anu Dulu

CSS sprites masih ilahar dipaké pikeun ngaronjatkeun kagancangan situs, sanajan maranéhna bisa jadi teu jadi populér salaku aranjeunna sakali éta. Kusabab bandwidth tinggi, halaman wéb format, komprési gambar, jaringan pangiriman eusi (CDN), males loading, sarta cache kuat téknologi, urang teu ningali saloba sprites CSS sakumaha kami dipaké pikeun di web… sanajan masih strategi hébat. Ieu hususna kapaké upami anjeun gaduh halaman anu ngarujuk kana seueur gambar leutik.

CSS Sprite Conto

Ngagunakeun CSS sprites, urang kudu nangtukeun posisi unggal gambar individu dina file gambar sprite maké CSS. Ieu biasana dilakukeun ku netepkeun background-image jeung background-position sipat pikeun tiap elemen dina kaca web nu ngagunakeun gambar sprite. Ku nangtukeun koordinat x jeung y gambar dina sprite, urang bisa nembongkeun gambar individu salaku elemen misah dina kaca. Ieu conto… urang gaduh dua tombol dina hiji file gambar:

CSS Sprite Conto

Upami urang hoyong gambar di kénca dipintonkeun, urang tiasa nyayogikeun div arrow-left salaku kelas jadi koordinat ngan nembongkeun sisi éta:

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

Sareng upami urang hoyong ningalikeun panah anu leres, kami bakal nyetél kelas pikeun div kami arrow-right.

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

CSS Sprites Pikeun Lampu Jeung Mode Dark

Hiji pamakéan metot ieu kalawan modeu caang jeung poék. Panginten anjeun gaduh logo atanapi gambar anu aya tulisan poék anu henteu katingali dina latar anu poék. Kuring ngalakukeun conto ieu tombol anu ngagaduhan pusat bodas pikeun modeu lampu sareng pusat poék pikeun modeu poék.

css sprite lampu poék

Ngagunakeun CSS, abdi tiasa nembongkeun latar tukang gambar luyu dumasar kana naha pamaké ngagunakeun mode lampu atawa mode poék:

: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: Klién Email Henteu Ngadukung Ieu

Sababaraha klien email, sapertos Gmail, henteu ngadukung variabel CSS, anu dianggo dina conto anu kuring nyayogikeun pikeun ngalih antara modeu terang sareng poék. Ieu ngandung harti yén anjeun bisa jadi kudu make téhnik alternatif pikeun pindah antara versi béda tina gambar sprite pikeun skéma warna béda.

Watesan séjén nyaéta yén sababaraha klien email henteu ngadukung sipat CSS tangtu anu biasa dianggo dina sprite CSS, sapertos background-position. Ieu tiasa ngahesekeun posisi gambar individu dina file gambar sprite.

Douglas Karr

Douglas Karr nyaeta CMO tina OpenINSIGHTS jeung pangadeg nu Martech Zone. Douglas geus mantuan puluhan startups MarTech suksés, geus mantuan dina karajinan alatan leuwih $ 5 bil dina akuisisi jeung Investasi Martech, sarta terus mantuan pausahaan dina ngalaksanakeun jeung ngajadikeun otomatis jualan na strategi marketing maranéhanana. Douglas mangrupikeun transformasi digital anu diakui sacara internasional sareng ahli MarTech sareng spiker. Douglas ogé panulis anu diterbitkeun tina pituduh Dummie sareng buku kapamimpinan bisnis.

Artikel nu patali

Deui tombol luhur
deukeut

Adblock Dideteksi

Martech Zone tiasa masihan anjeun eusi ieu tanpa biaya sabab kami ngamonetisasi situs kami ngalangkungan pendapatan iklan, tautan afiliasi, sareng sponsor. Kami bakal ngahargaan upami anjeun ngahapus pameungpeuk iklan anjeun nalika anjeun ningali situs kami.