Kif Tuża Sprites CSS Bil-Modalità Dawl U Dlam
CSS sprites huma teknika użata fl-iżvilupp tal-web biex jitnaqqas in-numru ta HTTP talbiet magħmula minn paġna web. Huma jinvolvu l-kombinazzjoni ta 'immaġini żgħar multipli f'fajl ta' immaġini ikbar wieħed u mbagħad tuża CSS biex juru sezzjonijiet speċifiċi ta 'dik l-immaġni bħala elementi individwali fuq il-paġna web.
Il-benefiċċju ewlieni tal-użu ta' sprites CSS huwa li jistgħu jgħinu biex itejbu l-ħin tat-tagħbija tal-paġna għal websajt. Kull darba li immaġni titgħabba fuq paġna web, teħtieġ talba HTTP separata, li tista' tnaqqas il-proċess tat-tagħbija. Billi ngħaqqdu immaġini multipli f'immaġni sprite waħda, nistgħu nnaqqsu n-numru ta 'talbiet HTTP meħtieġa biex tagħbija l-paġna. Dan jista 'jirriżulta f'websajt aktar mgħaġġla u aktar reattiva, speċjalment għal siti b'ħafna stampi żgħar bħal ikoni u buttuni.
L-użu ta' sprites CSS jippermettilna wkoll li nieħdu vantaġġ mill-caching tal-browser. Meta utent iżur websajt, il-browser tiegħu se jdaħħal fil-cache l-immaġni sprite wara l-ewwel talba. Dan ifisser li talbiet sussegwenti għal elementi individwali fuq il-paġna web li qed jużaw l-immaġni sprite se jkunu ħafna aktar mgħaġġla peress li l-browser diġà jkollu l-immaġni fil-cache tiegħu.
Is-CSS Sprites Mhumiex Popolari Kif Darba Kienu
Sprites CSS għadhom komunement użati biex itejbu l-veloċità tas-sit, għalkemm jistgħu ma jkunux popolari daqs kemm kienu darba. Minħabba bandwidth għoli, web formati, kompressjoni tal-immaġni, netwerks tal-kunsinna tal-kontenut (CDN), tagħbija għażżien, u caching qawwi teknoloġiji, ma narawx sprites CSS daqs kemm konna fuq il-web... għalkemm għadha strateġija kbira. Huwa speċjalment utli jekk għandek paġna li tirreferi għal numru kbir ta 'immaġini żgħar.
CSS Sprite Eżempju
Biex tuża sprites CSS, irridu niddefinixxu l-pożizzjoni ta 'kull immaġini individwali fi ħdan il-fajl tal-immaġni sprite billi tuża CSS. Dan tipikament isir billi tissettja l- background-image
u, background-position
proprjetajiet għal kull element fuq il-paġna web li tuża l-immaġni sprite. Billi tispeċifika l-koordinati x u y tal-immaġni fi ħdan l-isprite, nistgħu nuru immaġini individwali bħala elementi separati fuq il-paġna. Hawn eżempju... għandna żewġ buttuni f'fajl ta' immaġini wieħed:
Jekk irridu li l-immaġni fuq ix-xellug tkun murija, nistgħu nipprovdu d-div arrow-left
bħala l-klassi sabiex il-koordinati juru biss dik in-naħa:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
U jekk nixtiequ nuru l-vleġġa t-tajba, nistabbilixxu l-klassi għad-div tagħna arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
Sprites CSS Għall-Modalità Dawl U Dlam
Użu wieħed interessanti ta 'dan huwa b'modi dawl u skur. Forsi għandek logo jew immaġni li għandha test skur fuqha li ma jkunx viżibbli fuq sfond skur. Għamilt dan l-eżempju ta 'buttuna li għandha ċentru abjad għall-modalità tad-dawl u ċentru skur għall-modalità skur.
Bl-użu tas-CSS, nista' nuri l-isfond tal-immaġini xieraq ibbażat fuq jekk l-utent hux qed juża l-modalità tad-dawl jew il-mod skur:
: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);
}
Eċċezzjoni: Il-Klijenti tal-Email Ma Jistgħux Jappoġġaw Dan
Xi klijenti tal-email, bħall-Gmail, ma jappoġġawx varjabbli CSS, li huma użati fl-eżempju li pprovdejt biex jaqilbu bejn modi ċari u skuri. Dan ifisser li jista 'jkollok bżonn tuża tekniki alternattivi biex taqleb bejn verżjonijiet differenti tal-immaġni sprite għal skemi ta' kuluri differenti.
Limitazzjoni oħra hija li xi klijenti tal-email ma jappoġġjawx ċerti proprjetajiet CSS li huma komunement użati fl-isprites CSS, bħal background-position
. Dan jista 'jagħmilha diffiċli għall-pożizzjoni ta' immaġini individwali fi ħdan il-fajl tal-immaġni sprite.