Kiel Uzi CSS-Spritojn Kun Luma Kaj Malhela Reĝimo
CSS sprites estas tekniko uzata en TTT-evoluo por redukti la nombron da HTTP petoj faritaj de retpaĝo. Ili implikas kombini plurajn malgrandajn bildojn en ununuran pli grandan bilddosieron kaj poste uzi CSS por montri specifajn sekciojn de tiu bildo kiel individuajn elementojn sur la retpaĝo.
La ĉefa avantaĝo uzi CSS-spritojn estas, ke ili povas helpi plibonigi la paĝan ŝarĝan tempon por retejo. Ĉiufoje kiam bildo estas ŝarĝita sur retpaĝo, ĝi postulas apartan HTTP-peton, kiu povas malrapidigi la ŝarĝan procezon. Kombinante plurajn bildojn en ununuran sprite-bildon, ni povas redukti la nombron da HTTP-petoj necesaj por ŝargi la paĝon. Ĉi tio povas rezulti en pli rapida kaj pli respondema retejo, precipe por retejoj kun multaj malgrandaj bildoj kiel ikonoj kaj butonoj.
Uzado de CSS-spritoj ankaŭ permesas al ni utiligi retumilon kaŝmemoron. Kiam uzanto vizitas retejon, ilia retumilo konservos la sprite-bildon post la unua peto. Ĉi tio signifas, ke postaj petoj por individuaj elementoj sur la retpaĝo, kiuj uzas la sprite-bildon, estos multe pli rapidaj, ĉar la retumilo jam havos la bildon en sia kaŝmemoro.
CSS-Spritoj Ne Estas Tiel Popularaj Kiel Ili Iam Estis
CSS-spritoj daŭre estas ofte uzataj por plibonigi retejo-rapidecon, kvankam ili eble ne estas tiel popularaj kiel antaŭe. Pro alta bendolarĝo, retejo formatoj, bildkunpremo, enhavliveraj retoj (CDN), maldiligenta ŝarĝoKaj forta kaŝmemoro teknologioj, ni ne vidas tiom da CSS-spritoj kiel ni kutimis en la reto... kvankam ĝi ankoraŭ estas bonega strategio. Ĝi estas precipe utila se vi havas paĝon, kiu referencas multajn malgrandajn bildojn.
CSS Sprite Ekzemplo
Por uzi CSS-spritojn, ni devas difini la pozicion de ĉiu individua bildo ene de la sprite-bilddosiero uzante CSS. Ĉi tio estas kutime farita per agordo de la background-image
kaj background-position
propraĵoj por ĉiu elemento sur la retpaĝo kiu uzas la sprite-bildon. Specifante la x kaj y-koordinatojn de la bildo ene de la sprite, ni povas montri individuajn bildojn kiel apartajn elementojn sur la paĝo. Jen ekzemplo... ni havas du butonojn en ununura bilddosiero:
Se ni volas ke la bildo maldekstre estu montrata, ni povas provizi la div arrow-left
kiel la klaso tiel la koordinatoj nur montras tiun flankon:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Kaj se ni deziras montri la ĝustan sagon, ni agordus la klason por nia div arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites Por Luma Kaj Malhela Reĝimo
Unu interesa uzo de ĉi tio estas kun lumo kaj malhela reĝimoj. Eble vi havas emblemon aŭ bildon, kiu havas malhelan tekston sur ĝi, kiu ne videblas sur malhela fono. Mi faris ĉi tiun ekzemplon de butono, kiu havas blankan centron por lumreĝimo kaj malhelan centron por malhela reĝimo.
Uzante CSS, mi povas montri la taŭgan bildan fonon laŭ ĉu la uzanto uzas malluman reĝimon aŭ malhelan reĝimon:
: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);
}
Escepto: Retpoŝtaj Klientoj Eble Ne Subtenas Ĉi tion
Iuj retpoŝtaj klientoj, kiel Gmail, ne subtenas CSS-variablojn, kiuj estas uzataj en la ekzemplo, kiun mi donis por ŝanĝi inter lumo kaj malhela reĝimoj. Ĉi tio signifas, ke vi eble bezonos uzi alternativajn teknikojn por ŝanĝi inter malsamaj versioj de la sprita bildo por malsamaj kolorskemoj.
Alia limigo estas, ke iuj retpoŝtaj klientoj ne subtenas certajn CSS-ecojn, kiuj estas ofte uzataj en CSS-spritoj, kiel ekzemple background-position
. Ĉi tio povas malfaciligi individuajn bildojn ene de la sprite-bilddosiero.