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:
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.
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.