A CSS Sprite használata világos és sötét módban
CSS A sprite egy olyan technika, amelyet a webfejlesztésben használnak, hogy csökkentsék a HTTP weboldal által benyújtott kérések. Ezek magukban foglalják több kis kép egyetlen nagyobb képfájlba való egyesítését, majd a CSS használatával a kép egyes részei, mint egyedi elemek a weboldalon.
A CSS sprite-ok használatának elsődleges előnye, hogy segíthetnek javítani egy webhely oldalbetöltési idejét. Minden alkalommal, amikor egy kép betöltődik egy weboldalra, külön HTTP kérést igényel, ami lelassíthatja a betöltési folyamatot. Ha több képet egyetlen sprite képpé egyesítünk, csökkenthetjük az oldal betöltéséhez szükséges HTTP kérések számát. Ez gyorsabb és reszponzívabb webhelyet eredményezhet, különösen a sok kis képet, például ikonokat és gombokat tartalmazó webhelyek esetében.
A CSS sprite-ok használata lehetővé teszi a böngésző gyorsítótárazásának kihasználását is. Amikor egy felhasználó meglátogat egy webhelyet, a böngészője az első kérés után gyorsítótárba helyezi a sprite képet. Ez azt jelenti, hogy a weboldal egyes elemeire vonatkozó további kérések, amelyek a sprite képet használják, sokkal gyorsabbak lesznek, mivel a böngészőnek már a gyorsítótárában lesz a kép.
A CSS Sprite már nem olyan népszerű, mint egykor
A CSS sprite-okat továbbra is gyakran használják a webhely sebességének javítására, bár lehet, hogy nem olyan népszerűek, mint korábban. A nagy sávszélesség miatt webp formátumok, képtömörítés, tartalomszolgáltató hálózatok (CDN), lusta betöltésés erős gyorsítótár technológiák, nem látunk annyi CSS sprite-ot, mint korábban a weben… bár ez még mindig nagyszerű stratégia. Különösen hasznos, ha olyan oldala van, amely sok kis képre hivatkozik.
CSS Sprite példa
A CSS sprite használatához meg kell határoznunk minden egyes kép pozícióját a sprite képfájlban CSS segítségével. Ez általában úgy történik, hogy a background-image
és a background-position
tulajdonságait a weboldal minden eleméhez, amely a sprite képet használja. A sprite-on belül a kép x és y koordinátáinak megadásával az egyes képeket külön elemként jeleníthetjük meg az oldalon. Íme egy példa… két gomb van egyetlen képfájlban:
Ha azt szeretnénk, hogy a bal oldali kép megjelenjen, a div-t biztosíthatjuk arrow-left
osztályként, így a koordináták csak azt az oldalt jelenítik meg:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
És ha meg akarjuk jeleníteni a jobb oldali nyilat, akkor a div osztályát a következőre állítjuk arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites világos és sötét módhoz
Ennek egyik érdekes felhasználása a világos és sötét módok. Lehet, hogy van egy logója vagy képe, amelyen sötét szöveg látható, amely nem látható sötét háttéren. Ezt a példát egy olyan gombról csináltam, amelynek fehér közepe van a világos módhoz és egy sötét közepe a sötét módhoz.
A CSS használatával meg tudom jeleníteni a megfelelő kép hátterét attól függően, hogy a felhasználó világos vagy sötét módot használ:
: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);
}
Kivétel: Előfordulhat, hogy az e-mail kliensek nem támogatják ezt
Egyes levelezőprogramok, például a Gmail, nem támogatják a CSS-változókat, amelyeket a bemutatott példában a világos és sötét módok közötti váltáshoz használunk. Ez azt jelenti, hogy előfordulhat, hogy alternatív technikákat kell alkalmaznia a sprite kép különböző verziói közötti váltáshoz a különböző színsémákhoz.
Egy másik korlátozás, hogy egyes e-mail kliensek nem támogatnak bizonyos CSS-tulajdonságokat, amelyeket gyakran használnak a CSS sprite-okban, mint pl. background-position
. Ez megnehezítheti az egyes képek elhelyezését a sprite képfájlban.