Kezdőoldal » Számítástechnika » Weblapkészítés » CSS sprite, pozícionálás...

CSS sprite, pozícionálás extra CSS-sorok nélkül. Hogyan?

Figyelt kérdés

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.


2017. júl. 20. 14:50
 1/7 anonim ***** válasza:

Ilyesmi megoldásra gondolsz?

[link]

2017. júl. 20. 15:57
Hasznos számodra ez a válasz?
 2/7 A kérdező kommentje:

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.

2017. júl. 20. 16:01
 3/7 anonim ***** válasza:

Szerintem a barátod a CSS-attribútum szelektor lesz:

[link]


Itt egy egyszeri példa a használatra:

[link]

2017. júl. 20. 18:44
Hasznos számodra ez a válasz?
 4/7 A kérdező kommentje:
Ez szuper, de nem úgy tűnik, hogy megúszom vele a többtucatnyi CSS-sort. (Vagy mégsem értem.)
2017. júl. 20. 23:14
 5/7 anonim ***** válasza:
Nem, azt nem tudod megúszni. Viszont legalább nem kell a html-ben plusz osztályt hozzájuk rendelned.
2017. júl. 20. 23:24
Hasznos számodra ez a válasz?
 6/7 A kérdező kommentje:

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!

2017. júl. 20. 23:28
 7/7 anonim ***** válasza:

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:

[link]

2017. júl. 20. 23:57
Hasznos számodra ez a válasz?

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

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!