Content Marketing

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:

CSS Sprite példa

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.

css sprite világos sötét

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.

Douglas Karr

Douglas Karr CMO of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.