-susbaint Margaideachd

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:

Eisimpleir CSS Sprite

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.

css sprite solas 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.

Douglas Karr

Douglas Karr tha CMO de OSNAIDHEAN BHO IFRINN agus am fear a stèidhich an Martech Zone. Tha Douglas air dusanan de luchd-tòiseachaidh soirbheachail MarTech a chuideachadh, air cuideachadh le dìcheall iomchaidh de chòrr air $ 5 billean ann an togail agus tasgaidhean Martech, agus a’ leantainn air adhart a ’cuideachadh chompanaidhean ann a bhith a’ buileachadh agus ag fèin-ghluasad an ro-innleachdan reic is margaidheachd. Tha Douglas na chruth-atharrachadh didseatach a tha aithnichte gu h-eadar-nàiseanta agus eòlaiche agus neach-labhairt MarTech. Tha Dùbhghlas cuideachd na ùghdar foillsichte air iùl Dummie agus leabhar stiùireadh gnìomhachais.

artaigealan co-cheangailte

Putan air ais dhan mhullach
Dùin

Adblock air a lorg

Martech Zone comasach air an t-susbaint seo a thoirt dhut gun chosgais sam bith oir bidh sinn a’ dèanamh airgead air an làrach againn tro theachd-a-steach sanasachd, ceanglaichean ceangailte, agus urrasachd. Bhithinn toilichte nan toireadh tu air falbh an neach-bacadh sanasachd agad fhad ‘s a tha thu a’ coimhead air an làrach againn.