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:
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.
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.