CSS sprite, pozícionálás extra CSS-sorok nélkül. Hogyan?
Finomhangolok egy weboldalt, a betöltési sebesség növeléséhez kritikus pontként jelölték meg, hogy túl sok a különálló ikon, amelyeket jó volna sprite-ként egy képre tenni, majd pozícionálással jeleníteni meg.
Oké, csakhogy:
A menürendszerben, amelyet adatbázisból kérek le, minden sor url-je egyben az ikon neve is. Azaz, hozzácsapok a végéhez egy .png-t, és ez az ikon elérési útja.
Ha ráteszem ezeket sprite-ra, akkor pozícionálni kell minden menüelemet, hogy a megfelelő helyre pozícionáljon a képen, ahol a megfelelő ikon van.
Ehhez úgy tűnik, hogy minden egyes menüponthoz (sok van belőle, és változó!) külön CSS-osztályt kellene rendelnem, és hosszú felsorolásban deklarálni a pozíciót a CSS-ben.
Vagy ugyanezt inline CSS-sel megoldani a kódban, amely szintén nem a legszerencsésebb megoldás.
Milyen jó ötlet van erre? Keresgéltem már nemzetközi fórumokon, de még nem jött szembe jó válasz.
Ilyesmi megoldásra gondolsz?
Köszi a választ, úgy tűnik, nem sikerült elmondanom.
Itt már készen kellene állnia oldalletöltés után mindennek, a megfelelő ikonokkal. Semmi utóesemény!
A gondom az, hogyan találom meg a menüponthoz tartozó ikonokat a sprite-on anélkül, hogy mindegyiknél meg kellene határoznom a koordinátákat - ráadásul vagy inline CSS-ben, vagy külön CSS-osztályokban.
Köszi, de ezt az utat inkább nem járom. Ha új menüpont kerül be, akkor írjam bele CSS-be, minimalizáljam, töltsem fel újra a szerverre.
Inkább legyen akkor az inline CSS, az ikon pozícióját pedig mentem adatbázisba. Az sem jó, ha túl nagy méretű a CSS, amiben ráadásul rengeteg felesleg jelenik meg az inaktív menüpontok felsorolása miatt.
Köszönöm a válaszokat!
A CSS generálásában segítséget tud nyújtani valamilyen CSS preprocessor (LESS vagy SASS) használata.
Mivel van bennük iterálási lehetőség, és használhatsz tömböket így az előző alkalmazásával leegyszerűsítheted a CSS megalkotását:
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!