Mar a chleachdas tu CSS sprites le modh aotrom is dorcha
CSS Tha sprites mar dhòigh air a chleachdadh ann an leasachadh lìn gus an àireamh de HTTP iarrtasan air an dèanamh le duilleag-lìn. Tha iad a’ toirt a-steach a bhith a’ cothlamadh grunn ìomhaighean beaga ann an aon fhaidhle ìomhaigh nas motha agus an uairsin a’ cleachdadh CSS gus earrannan sònraichte den ìomhaigh sin a thaisbeanadh mar eileamaidean fa leth air an duilleag lìn.
Is e a’ phrìomh bhuannachd a bhith a’ cleachdadh sprites CSS gun cuidich iad le bhith ag adhartachadh ùine luchdachadh duilleag airson làrach-lìn. Gach uair a thèid ìomhaigh a luchdachadh air duilleag-lìn, feumaidh e iarrtas HTTP air leth, a dh’ fhaodadh am pròiseas luchdachadh sìos a dhèanamh nas slaodaiche. Le bhith a’ cothlamadh grunn ìomhaighean ann an aon ìomhaigh sprite, is urrainn dhuinn an àireamh de dh’ iarrtasan HTTP a tha a dhìth gus an duilleag a luchdachadh sìos a lughdachadh. Faodaidh seo leantainn gu làrach-lìn nas luaithe agus nas ciallaiche, gu sònraichte airson làraich le mòran ìomhaighean beaga leithid ìomhaighean agus putanan.
Le bhith a’ cleachdadh sprites CSS leigidh sin leinn brath a ghabhail air tasgadan brabhsair. Nuair a bhios neach-cleachdaidh a’ tadhal air làrach-lìn, bidh am brabhsair aca a’ tasgadh an ìomhaigh sprite às deidh a’ chiad iarrtas. Tha seo a’ ciallachadh gum bi iarrtasan às deidh sin airson eileamaidean fa leth air an duilleag-lìn a tha a’ cleachdadh an ìomhaigh sprite fada nas luaithe leis gum bi an ìomhaigh aig a’ bhrobhsair san tasgadan aige mu thràth.
Chan eil sprites CSS cho mòr-chòrdte sa bha iad uaireigin
Tha sprites CSS fhathast air an cleachdadh gu cumanta airson astar làraich a leasachadh, ged is dòcha nach bi iad cho mòr-chòrdte ’s a bha iad uaireigin. Air sgàth leud-bann àrd, webp cruthan, teannachadh ìomhaigh, lìonraidhean lìbhrigidh susbaint (CDN), luchdadh leisg, agus tasgadh làidir teicneòlasan, chan eil sinn a' faicinn uiread de sprites CSS 's a b' àbhaist dhuinn air an lìon ... ged a tha e fhathast na dheagh ro-innleachd. Tha e gu sònraichte feumail ma tha duilleag agad a tha a’ toirt iomradh air grunn dhealbhan beaga.
Eisimpleir CSS Sprite
Gus sprites CSS a chleachdadh, feumaidh sinn suidheachadh gach ìomhaigh fa leth taobh a-staigh an fhaidhle ìomhaigh sprite a mhìneachadh a’ cleachdadh CSS. Mar as trice bidh seo air a dhèanamh le bhith a 'suidheachadh an background-image
agus background-position
feartan airson gach eileamaid air an duilleag-lìn a chleachdas an ìomhaigh sprite. Le bhith a’ sònrachadh co-chomharran x agus y na h-ìomhaigh taobh a-staigh an sprite, is urrainn dhuinn ìomhaighean fa leth a thaisbeanadh mar eileamaidean fa leth air an duilleag. Seo eisimpleir ... tha dà phutan againn ann an aon fhaidhle ìomhaigh:
Ma tha sinn airson an dealbh air an taobh chlì a thaisbeanadh, is urrainn dhuinn an div a thoirt seachad arrow-left
mar a 'chlas mar sin chan eil na co-chomharran a' taisbeanadh an taobh sin a-mhàin:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Agus ma tha sinn airson an t-saighead cheart a thaisbeanadh, shuidhich sinn an clas airson ar div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
Sprites CSS airson modh aotrom is dorcha
Is e aon chleachdadh inntinneach de seo le modhan aotrom is dorcha. Is dòcha gu bheil suaicheantas no ìomhaigh agad air a bheil teacsa dorcha air nach fhaicear air cùl dorcha. Rinn mi an eisimpleir seo de phutan aig a bheil ionad geal airson modh solais agus ionad dorcha airson modh dorcha.
A’ cleachdadh CSS, is urrainn dhomh cùl-raon ìomhaigh iomchaidh a thaisbeanadh a rèir a bheil an neach-cleachdaidh a’ cleachdadh modh aotrom no modh dorcha:
: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);
}
Eisimpleir: Is dòcha nach cuir teachdaichean post-d taic ri seo
Chan eil cuid de luchd-dèiligidh post-d, leithid Gmail, a’ toirt taic do chaochladairean CSS, a tha air an cleachdadh san eisimpleir a thug mi seachad gus gluasad eadar modhan aotrom is dorcha. Tha seo a’ ciallachadh gur dòcha gum feum thu dòighean eile a chleachdadh gus gluasad eadar diofar dhreachan den ìomhaigh sprite airson sgeamaichean dath eadar-dhealaichte.
Is e cuingealachadh eile nach eil cuid de luchd-dèiligidh post-d a’ toirt taic do chuid de thogalaichean CSS a thathas a’ cleachdadh gu cumanta ann an sprites CSS, leithid background-position
. Faodaidh seo a dhèanamh duilich ìomhaighean fa leth a shuidheachadh taobh a-staigh faidhle ìomhaigh sprite.