Nola erabili CSS Sprites argi eta ilun moduarekin
CSS sprites web garapenean erabiltzen den teknika bat dira kopurua murrizteko HTTP web orri batek egindako eskaerak. Irudi txiki bat baino gehiago irudi fitxategi handiago bakarrean konbinatzea dakar eta, ondoren, CSS erabiltzea irudi horren atal zehatzak web orrian elementu indibidual gisa bistaratzeko.
CSS spriteak erabiltzearen abantaila nagusia da webgune baten orriaren karga-denbora hobetzen lagun dezaketela. Irudi bat web orri batean kargatzen den bakoitzean, HTTP eskaera bereizi bat behar du, eta horrek kargatzeko prozesua moteldu dezake. Irudi bat baino gehiago sprite irudi bakar batean konbinatuz, orria kargatzeko beharrezkoak diren HTTP eskaera kopurua murriztu dezakegu. Honek webgune azkarragoa eta erantzunkorragoa izan dezake, batez ere ikonoak eta botoiak bezalako irudi txiki asko dituzten guneetarako.
CSS spriteak erabiltzeak arakatzailearen cachea aprobetxatzeko aukera ematen digu. Erabiltzaile batek webgune bat bisitatzen duenean, bere arakatzaileak sprite irudia gordeko du lehen eskaeraren ondoren. Horrek esan nahi du sprite irudia erabiltzen ari diren web orrialdeko elementu indibidualen ondorengo eskaerak askoz azkarragoak izango direla arakatzaileak dagoeneko irudia bere cachean izango duelako.
CSS Spriteak ez dira lehen bezain ezagunak
CSS spriteak oraindik erabili ohi dira gunearen abiadura hobetzeko, nahiz eta agian ez izan lehen bezain ezagunak. Banda zabalera handia dela eta, WebP formatuak, irudien konpresioa, edukiak emateko sareak (CDN), karga alferra, eta caching sendoa teknologiek, ez ditugu sarean lehen adina CSS sprite ikusten… nahiz eta oraindik estrategia bikaina den. Bereziki erabilgarria da irudi txiki askori erreferentzia egiten dion orrialde bat baduzu.
CSS Sprite Adibidea
CSS spriteak erabiltzeko, irudi bakoitzaren posizioa definitu behar dugu sprite irudi fitxategiaren barruan CSS erabiliz. Hau normalean ezarriz egiten da background-image
background-position
Sprite irudia erabiltzen duen web-orriko elementu bakoitzaren propietateak. Spritearen barruan irudiaren x eta y koordenatuak zehaztuz, irudi indibidualak elementu bereizi gisa bistaratu ditzakegu orrialdean. Hona hemen adibide bat... bi botoi ditugu irudi fitxategi bakarrean:
Ezkerreko irudia bistaratzea nahi badugu, div-a eman dezakegu arrow-left
klase gisa, beraz, koordenatuek alde hori bakarrik erakusten dute:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Eta eskuineko gezia bistaratu nahi badugu, gure div-rako klasea ezarriko genuke arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Argi eta Ilun modurako
Honen erabilera interesgarri bat argi eta ilun moduekin da. Agian, hondo ilunean ikusten ez den testu iluna duen logotipo edo irudi bat duzu. Argi-modurako zentro zuria eta ilun-modurako zentro iluna duen botoi baten adibide hau egin nuen.
CSS erabiliz, irudi egokiaren atzeko planoa bistaratu dezaket, erabiltzaileak modu argia edo modu iluna erabiltzen ari den kontuan hartuta:
: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);
}
Salbuespena: posta elektronikoko bezeroek ezin dute hau onartzen
Posta elektronikoko bezero batzuek, Gmail adibidez, ez dute CSS aldagairik onartzen, eman dudan adibidean argi eta ilun moduen artean aldatzeko erabiltzen direnak. Horrek esan nahi du teknika alternatiboak erabili beharko dituzula sprite irudiaren bertsio ezberdinen artean kolore-eskema desberdinetarako aldatzeko.
Beste muga bat da posta elektronikoko bezero batzuek ez dituztela CSS spriteetan erabili ohi diren CSS propietate batzuk onartzen, hala nola background-position
. Honek sprite irudi fitxategiaren barruan irudi indibidualak kokatzea zaila izan daiteke.