Kijan Pou Sèvi ak CSS Sprites ak mòd limyè ak nwa
CSS sprites se yon teknik ki itilize nan devlopman entènèt pou redwi kantite HTTP demann ki fèt pa yon paj entènèt. Yo enplike konbine plizyè ti imaj nan yon sèl pi gwo fichye imaj ak Lè sa a, sèvi ak CSS yo montre seksyon espesifik nan imaj sa a kòm eleman endividyèl sou paj wèb la.
Benefis prensipal lè w sèvi ak sprites CSS se ke yo ka ede amelyore tan chaj paj la pou yon sit entènèt. Chak fwa yo chaje yon imaj sou yon paj entènèt, li mande pou yon demann HTTP separe, ki ka ralanti pwosesis chaj la. Lè nou konbine plizyè imaj nan yon sèl imaj sprite, nou ka diminye kantite demann HTTP ki nesesè pou chaje paj la. Sa a ka lakòz yon sit entènèt pi vit ak pi reponn, espesyalman pou sit ki gen anpil ti imaj tankou ikon ak bouton.
Sèvi ak sprites CSS tou pèmèt nou pran avantaj de kachèt navigatè a. Lè yon itilizatè vizite yon sit entènèt, navigatè yo pral kache imaj sprite a apre premye demann lan. Sa vle di ke demann ki vin apre pou eleman endividyèl sou paj wèb la ki ap itilize imaj sprite a pral pi vit depi navigatè a ap deja gen imaj la nan kachèt li yo.
Sprites CSS yo pa popilè jan yo te ye
Sprites CSS yo toujou souvan itilize pou amelyore vitès sit, byenke yo ka pa popilè menm jan yo te yon fwa. Akòz gwo Pleasant, entènèt fòma, konpresyon imaj, rezo livrezon kontni (CDN), chaje parese, epi kachèt fò teknoloji, nou pa wè anpil sprites CSS jan nou te konn sou entènèt la... byenke li toujou yon gwo estrateji. Li itil sitou si w gen yon paj ki fè referans ak yon pakèt ti imaj.
CSS Sprite Egzanp
Pou itilize sprites CSS, nou bezwen defini pozisyon chak imaj endividyèl nan fichye imaj sprite a lè l sèvi avèk CSS. Sa a se tipikman fè pa mete nan background-image
ak background-position
pwopriyete pou chak eleman sou paj wèb la ki sèvi ak imaj sprite a. Lè nou espesifye kowòdone x ak y nan imaj la nan sprite a, nou ka montre imaj endividyèl kòm eleman separe sou paj la. Men yon egzanp... nou gen de bouton nan yon sèl fichye imaj:
Si nou vle imaj ki sou bò gòch la ap parèt, nou ka bay div la arrow-left
kòm klas la konsa kowòdone yo sèlman montre bò sa a:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Men, si nou vle montre flèch dwat la, nou ta mete klas la pou div nou an arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites pou mòd limyè ak nwa
Yon itilizasyon enteresan nan sa a se ak mòd limyè ak nwa. Petèt ou gen yon logo oswa imaj ki gen tèks nwa sou li ki pa vizib sou yon background nwa. Mwen te fè egzanp sa a nan yon bouton ki gen yon sant blan pou mòd limyè ak yon sant nwa pou mòd nwa.
Sèvi ak CSS, mwen ka montre background nan imaj ki apwopriye ki baze sou si wi ou non itilizatè a ap itilize mòd limyè oswa mòd nwa:
: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);
}
Eksepsyon: Kliyan imel yo pa ka sipòte sa
Gen kèk kliyan imel, tankou Gmail, pa sipòte varyab CSS, ki itilize nan egzanp mwen bay pou chanje ant mòd limyè ak mòd nwa. Sa vle di ke ou ka bezwen sèvi ak teknik altènatif pou chanje ant diferan vèsyon nan imaj la luten pou koulè diferan.
Yon lòt limit se ke kèk kliyan imel pa sipòte sèten pwopriyete CSS ki souvan itilize nan sprites CSS, tankou background-position
. Sa a ka fè li difisil pou pozisyon imaj endividyèl yo nan dosye a imaj sprite.