Cynnwys Marchnata

Sut i Ddefnyddio Sprites CSS Gyda Modd Ysgafn a Thywyll

CSS Mae sprites yn dechneg a ddefnyddir wrth ddatblygu gwe i leihau nifer y HTTP ceisiadau a wneir gan dudalen we. Maent yn cynnwys cyfuno delweddau bach lluosog i mewn i un ffeil delwedd fwy ac yna defnyddio CSS i arddangos rhannau penodol o'r ddelwedd honno fel elfennau unigol ar y dudalen we.

Prif fantais defnyddio sprites CSS yw y gallant helpu i wella'r amser llwytho tudalen ar gyfer gwefan. Bob tro mae delwedd yn cael ei llwytho ar dudalen we, mae angen cais HTTP ar wahân, a all arafu'r broses lwytho. Trwy gyfuno delweddau lluosog yn un ddelwedd corlun, gallwn leihau nifer y ceisiadau HTTP sydd eu hangen i lwytho'r dudalen. Gall hyn arwain at wefan gyflymach a mwy ymatebol, yn enwedig ar gyfer gwefannau gyda llawer o ddelweddau bach fel eiconau a botymau.

Mae defnyddio sprites CSS hefyd yn ein galluogi i fanteisio ar caching porwr. Pan fydd defnyddiwr yn ymweld â gwefan, bydd eu porwr yn storio'r ddelwedd corlun ar ôl y cais cyntaf. Mae hyn yn golygu y bydd ceisiadau dilynol am elfennau unigol ar y dudalen we sy'n defnyddio'r ddelwedd sprite yn llawer cyflymach gan y bydd y porwr eisoes â'r ddelwedd yn ei storfa.

Nid yw Sprites CSS Mor boblogaidd ag y buont unwaith

Mae sprites CSS yn dal i gael eu defnyddio'n gyffredin i wella cyflymder y safle, er efallai na fyddant mor boblogaidd ag y buont ar un adeg. Oherwydd lled band uchel, gwefan fformatau, cywasgu delweddau, rhwydweithiau darparu cynnwys (CDN), llwytho diog, a caching cryf technolegau, nid ydym yn gweld cymaint o sprites CSS ag yr oeddem yn arfer ei wneud ar y we ... er ei fod yn dal yn strategaeth wych. Mae'n arbennig o ddefnyddiol os oes gennych chi dudalen sy'n cyfeirio at lu o ddelweddau bach.

Enghraifft Sprite CSS

I ddefnyddio sprites CSS, mae angen i ni ddiffinio lleoliad pob delwedd unigol o fewn y ffeil delwedd corlun gan ddefnyddio CSS. Gwneir hyn fel arfer trwy osod y background-image a background-position priodweddau ar gyfer pob elfen ar y dudalen we sy'n defnyddio'r ddelwedd corlun. Trwy nodi cyfesurynnau x ac y y ddelwedd o fewn y corlun, gallwn arddangos delweddau unigol fel elfennau ar wahân ar y dudalen. Dyma enghraifft… mae gennym ddau fotwm mewn un ffeil delwedd:

Enghraifft Sprite CSS

Os ydym am i'r ddelwedd ar y chwith gael ei harddangos, gallwn ddarparu'r div arrow-left fel y dosbarth felly dim ond yr ochr honno y mae'r cyfesurynnau'n ei dangos:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

Ac os dymunwn arddangos y saeth dde, buasem yn gosod y dosbarth i'n div iddo arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

Sprites CSS Ar gyfer Modd Golau A Tywyll

Un defnydd diddorol o hyn yw gyda moddau golau a thywyll. Efallai bod gennych chi logo neu ddelwedd sydd â thestun tywyll arno nad yw'n weladwy ar gefndir tywyll. Gwnes yr enghraifft hon o fotwm sydd â chanolfan gwyn ar gyfer modd golau a chanolfan dywyll ar gyfer modd tywyll.

css sprite golau tywyll

Gan ddefnyddio CSS, gallaf arddangos y cefndir delwedd priodol yn seiliedig ar a yw'r defnyddiwr yn defnyddio modd golau neu fodd tywyll:

: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);
}

Eithriad: Efallai na fydd Cleientiaid E-bost yn Cefnogi Hyn

Nid yw rhai cleientiaid e-bost, fel Gmail, yn cefnogi newidynnau CSS, a ddefnyddir yn yr enghraifft a roddais i newid rhwng moddau golau a thywyll. Mae hyn yn golygu efallai y bydd angen i chi ddefnyddio technegau amgen i newid rhwng gwahanol fersiynau o'r ddelwedd corlun ar gyfer gwahanol gynlluniau lliw.

Cyfyngiad arall yw nad yw rhai cleientiaid e-bost yn cefnogi rhai eiddo CSS a ddefnyddir yn gyffredin mewn sprites CSS, megis background-position. Gall hyn ei gwneud hi'n anodd gosod delweddau unigol o fewn y ffeil delwedd corlun.

Douglas Karr

Douglas Karr yn CMO o AGOREDION a sylfaenydd y Martech Zone. Mae Douglas wedi helpu dwsinau o fusnesau newydd llwyddiannus MarTech, wedi cynorthwyo gyda diwydrwydd dyladwy o dros $5 bil mewn caffaeliadau a buddsoddiadau Martech, ac yn parhau i gynorthwyo cwmnïau i weithredu ac awtomeiddio eu strategaethau gwerthu a marchnata. Mae Douglas yn arbenigwr trawsnewid digidol ac yn siaradwr MarTech a gydnabyddir yn rhyngwladol. Mae Douglas hefyd yn awdur cyhoeddedig canllaw Dummie a llyfr arweinyddiaeth busnes.

Erthyglau Perthnasol

Yn ôl i'r brig botwm
Cau

Adblock Wedi'i Ganfod

Martech Zone yn gallu darparu'r cynnwys hwn i chi heb unrhyw gost oherwydd ein bod yn rhoi arian i'n gwefan trwy refeniw hysbysebu, dolenni cyswllt, a nawdd. Byddem yn gwerthfawrogi petaech yn cael gwared ar eich rhwystrwr hysbysebion wrth i chi edrych ar ein gwefan.