Conas Sprites CSS a Úsáid le Mód Solas Agus Dorcha
CSS Is teicníc iad sprites a úsáidtear i bhforbairt gréasáin chun líon na n- HTTP iarratais arna ndéanamh ag leathanach gréasáin. Is éard atá i gceist leo ná go leor íomhánna beaga a chomhcheangal i gcomhad íomhá amháin níos mó agus ansin CSS a úsáid chun ranna sonracha den íomhá sin a thaispeáint mar eilimintí aonair ar an leathanach gréasáin.
Is é an príomhbhuntáiste a bhaineann le sprites CSS a úsáid ná gur féidir leo cabhrú leis an am luchtaithe leathanaigh do shuíomh Gréasáin a fheabhsú. Gach uair a luchtaítear íomhá ar leathanach gréasáin, teastaíonn iarratas HTTP ar leith uaithi, rud a d’fhéadfadh an próiseas luchtaithe a mhoilliú. Trí íomhánna iolracha a chomhcheangal in aon íomhá sprite amháin, is féidir linn líon na n-iarratas HTTP a theastaíonn chun an leathanach a luchtú a laghdú. D’fhéadfadh suíomh Gréasáin níos tapúla agus níos freagraí a bheith mar thoradh air seo, go háirithe do shuíomhanna a bhfuil go leor íomhánna beaga acu amhail deilbhíní agus cnaipí.
Trí sprites CSS a úsáid is féidir linn leas a bhaint as taisceadh brabhsálaí. Nuair a thugann úsáideoir cuairt ar shuíomh Gréasáin, déanfaidh a bhrabhsálaí an íomhá sprite a thaisceadh tar éis an chéad iarratas. Ciallaíonn sé seo go mbeidh iarratais ina dhiaidh sin ar eilimintí aonair ar an leathanach gréasáin atá ag baint úsáide as an íomhá sprite i bhfad níos tapúla ós rud é go mbeidh an íomhá sa taisce cheana féin ag an mbrabhsálaí.
Níl Sprites CSS chomh Coitianta is a bhí siad tráth
Úsáidtear sprites CSS go coitianta fós chun luas an tsuímh a fheabhsú, cé go mb’fhéidir nach bhfuil siad chomh coitianta agus a bhí siad tráth. Mar gheall ar bandaleithead ard, webp formáidí, comhbhrú íomhá, líonraí seachadta ábhair (CDN), luchtú leisciúil, agus taisceadh láidir teicneolaíochtaí, ní fheicimid an oiread sprites CSS agus a bhíodh againn ar an ngréasán ... cé go bhfuil sé fós ina straitéis iontach. Tá sé úsáideach go háirithe má tá leathanach agat a dhéanann tagairt don iliomad íomhánna beaga.
Sampla sprite CSS
Chun sprites CSS a úsáid, ní mór dúinn suíomh gach íomhá aonair a shainiú laistigh den chomhad íomhá sprite ag baint úsáide as CSS. Déantar é seo de ghnáth trí shocrú an background-image
agus background-position
airíonna do gach eilimint ar an leathanach gréasáin a úsáideann an íomhá sprite. Trí chomhordanáidí x agus y na híomhá a shonrú laistigh den sprite, is féidir linn íomhánna aonair a thaispeáint mar eilimintí ar leith ar an leathanach. Seo sampla… tá dhá chnaipe againn i gcomhad íomhá amháin:
Más mian linn an íomhá ar chlé a thaispeáint, is féidir linn an div a sholáthar arrow-left
mar an rang mar sin ní thaispeánann na comhordanáidí ach an taobh sin:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Agus dá mba mhian linn an tsaighead cheart a thaispeáint, leagfaimis an rang le haghaidh ár div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Le haghaidh Mód Solas Agus Dorcha
Úsáid suimiúil amháin a bhaineann leis seo ná le modhanna éadroma agus dorcha. B’fhéidir go bhfuil lógó nó íomhá agat a bhfuil téacs dorcha air nach bhfuil le feiceáil ar chúlra dorcha. Rinne mé an sampla seo de chnaipe a bhfuil lárionad bán le haghaidh mód solais agus ionad dorcha le haghaidh mód dorcha.
Trí úsáid a bhaint as CSS, is féidir liom an cúlra íomhá cuí a thaispeáint bunaithe ar cibé an bhfuil modh solais nó mód dorcha á úsáid ag an úsáideoir:
: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);
}
Eisceacht: Seans nach dtacaíonn Cliaint Ríomhphoist leis seo
Ní thacaíonn roinnt cliant ríomhphoist, mar shampla Gmail, le hathróga CSS, a úsáidtear sa sampla a sholáthair mé chun aistriú idir modhanna solais agus dorcha. Ciallaíonn sé seo go mb’fhéidir go mbeadh ort teicníochtaí eile a úsáid chun aistriú idir leaganacha éagsúla den íomhá sprite do scéimeanna dathanna éagsúla.
Teorainn eile is ea nach dtacaíonn roinnt cliant ríomhphoist le hairíonna áirithe CSS a úsáidtear go coitianta i sprites CSS, mar shampla background-position
. Féadann sé seo a dhéanamh deacair íomhánna aonair a shuíomh laistigh den chomhad íomhá sprite.