CSS Puska

A CSS puska eredetileg CSS Crib Sheet néven látott napvilágot a Mezzoblue webdizájnnal foglalkozó blogjában, Dave Shea tollából.

További fordítások is vannak francia, német, holland, olasz, finn, orosz, portugál, japán és egyszerűsített kínai nyelven.

Ha kétségeid vannak, validálj

Hibakereséskor nagy fejfájástól kíméled meg magad, ha először egyszerűen jóváhagyatod a kódot. Hibás xhtml vagy CSS sok elrendezési hibát okozhat.

Sokat használt validátorok:

Építsd és teszteld a CSS-t a legjobb elérhető böngészőben, mielőtt a többiben tesztelnéd

Ha a weboldalt hibás böngészőben építed, a kódod elkezd függeni a böngésző hibás oldalszerkesztésétől. Mikor egy szabványokat jobban támogató böngészőben kezded tesztelni, frusztráló lesz, mikor az rosszul szerkeszti le az oldalt. Inkább kezdd a tökéletesről, és hackeld meg a kevésbé működőképes böngészőkre. A kód inkább szabványos lesz induláskor, és épp csak annyit kell „csúnyítanod” a kódon, amennyi éppen szükséges. Manapság a jó böngészők a Mozilla, Safari és Opera.

Ha körülfolyatással dolgozol, biztosítsd a tiszta lezárásukat

A körülfolyatott, ún. lebegő dobozok nagyon trükkösek, és nem mindig úgy viselkednek, ahogy elvárnád. Ha olyan szituációba kerülsz, ahol a lebegő doboz túllógna az őt tartalmazó doboz keretén, vagy nem úgy viselkedik, ahogy kéne, légy biztos abban, hogy amit akarsz, az jó. Eric Meyer segédlete pontosíthatja a dolgokat.

A margók összecsúsznak. Ha el akarod ezt kerülni, használj keretet vagy tömítést

Lehet, hogy olyan helyközzel küzdesz, ahol egyáltalán nem kéne, vagy éppen nincs helyköz, pedig szeretnél. Ha margókat használsz, valószínűleg az a baj, hogy azok összecsúsznak. Andy Budd elmagyarázza, mire számíthatsz.

Próbáld elkerülni a keretet és tömítést (border/padding) és a szélesség megadását egyszerre

Az IE5 hibásan kezeli a doboz modellt, ami tényleg elrontja a dolgokat. Vannak rá elkerülő megoldások, de a legjobb kikerülni a problémát, és a keretet és tömítést elvégeztetni a szülő elemmel a gyermek helyett, aminek fix szélessége van.

Kerüld el a stílus nélküli tartalom felvillanását az IE-ben

Ha külső stílust egyedül @import-tal töltesz be, előbb vagy utóbb felfedezed az IE villanás hibát, a formázatlan HTML megjelenését egy pillanatra, amíg nem alkalmazza a CSS-t. Ez elkerülhető.

Ne hagyatkozz min-width-re IE-nél

Az IE nem támogatja. Ezzel szemben a width-t úgy értelmezi, mintha többé-kevésbé min-width volna. Némi filterezéssel fűszerezve ugyanazt az eredményt érheted el.

Ha kétségeid vannak, csökkentsd a szélességet

Néha a kerekítési hibák olyasmit okoznak, mint pl. 50% + 50% végül 100,1% lesz, ami néhány böngészőben megtöri a lap szerkezetét. Próbáld ki az 50% lecsökkentését 49%-ra, vagy akár 49,9%-ra.

Nem jelenik meg helyesen a tartalom IE-ben?

Valószínűleg a Peekaboo hibától szenvedsz, különösen, ha mégis megjelenik, ha ráviszed az egeret. A javítás a Pozícionálás a minden egyik cikkében van.

Óvatosan a hivatkozások stilizálásával, ha vannak hivatkozási horgonyok

Ha használsz klasszikus hivatkozási horgonyokat a kódban (<a name="horgony">), észreveszed, hogy alkalmazódik rajta a :hover és az :active pszeudoosztály. Ezt elkerülendő vagy használj inkább id-t klasszikus horgony helyett, vagy használd a kicsit misztikusabb :link:hover és :link:active szintaxist.

Légy biztos abban, hogy az áhított effektus valóban létezik

Vannak olyan böngésző-specifikus CSS kiegészítések, amik nincsenek bent a hivatalos speciben. Ha filter-t vagy gördítősávot akarsz formázni, olyan egyedi kóddal dolgozol, ami csak IE-ben fog működni. Ha a validátor azt üzeni, hogy a használt kód nincs definiálva, nagy a valószínűsége, hogy a kód nem szabványos, és nem fog konzisztensen működni különböző böngészőkben.

[2005. márc. 7.] Oszd meg és uralkodj: nagyobb stíluslap-darabok ki-be kapcsolásához használj megjegyzéseket

Kifejezetten jó ez a módszer a hosszú, ismeretlen CSS fájlokkal való munkában. Tedd megjegyzésbe a CSS kb. felét. Ha még mindig előfordul a hiba, akkor a másik felében lesz. Most kommentezd ki a másik felét. Ha megszűnt a probléma, akkor ott lesz a baj. Szűkítsd a keresést, és próbáld mégegyszer. Folytasd addig, amíg meg nem találod a hibát.

Emlékezz a „LoVe/HAte” hivatkozásra

Ha a linkek pszeudoosztályait is beállítod, mindig ebben a sorrendben tedd: link, visited, hover, active. Semmilyen más sorrend nem működik konzisztensen. Nem rossz, ha beleveszed a focus-t is, és a szabályt módosítod LVHFA-ra (Link Vagyok, Holnap Fogok Aludni – azaz link, visited, hover, focus, active – a fordításért köszönet Shoobynak), ahogy Matt Haughey javasolja.

A dobozokról nem mondható el, hogy FáJdaLmas Box (TRouBLed)

Keretek, margók és kitömések rövidített írásában meghatározott sorrendet kell követned: óramutató járása szerint fentről, azaz Fent, Jobbra, Lent, Balra (Top, Right, Bottom, Left), tehát a margin: 0 1px 3px 5px; fent semmilyen, 1 pixel jobb margót, 3 pixel alsó margót, és 5 pixel bal margót jelent.

Adj mértékegységet a nem nulla értékeknek

A CSS-ben kötelező az összes érték mértékegységét (pl. fontméret, margók és más méretek) megadni. Nem számíthatunk arra, hogy a böngésző majd eldönti. A nulla az nulla, legyen bármilyen mértékegységben, akár pixelben, akár em-ben. Példa: padding: 0 2px 0 1em;.

Próbálj ki több fontméretet

A fejlett böngészók (pl. Mozilla vagy Opera) megengedik a szöveg átméretezését, akármilyen méretet hasznász. Néhány felhasználó kifejezetten nagyobb vagy kisebb betűméretet használ alapbeállításként, mint te. Próbálj meg minél nagyobb tartományban alkalmazkodni.

Figyelj a kis- és nagybetűkre a HTML kódok CSS-be írásánál

Néhány böngésző nem figyel a kis- és nagybetűkre. A homePage osztálynév addig működik, amíg jól írod. Ha egy homepage stílust akarsz használni, néhány pontos böngészőnek meggyűlik vele a baja (pl. Mozilla).

Tesztelj beépítve, használd importálva

Ha a HTML kódba beágyazott stíluslappal dolgozol, számos potenciális gyorstár hibát kiküszöbölhetsz teszteléskor. Ez különösen igaz Mac böngészőkben. Ám miután már nem változik a CSS, tedd át külön fájlba, és importáld be @import-al vagy <link>-el, a sávszélesség és gyorsaság megőrzése érdekében.

Adj meg egyértelmű kereteket a szerkezet javításakor

Egy általános szabály, mint div {border: solid 1px #f00;} sokat segíthet a hibák kiszúrásakor. Ám meghatározott elemek bekeretezése az átlapolásos és helyközös problémák egyébként nem egyértelmű megkeresésekor hasznos.

Ne használj idézőjelet az útvonalakhoz és URL-ekhez

Háttérkép beállításkor, fájl importáláskor állj ellen a csábításnak, hogy idézőjelbe teszed az útvonalat. Ez egyáltalán nem szükséges, és az IE5/Mac bele is hal.

Ne hivatkozz üres stíluslapra, mint jövőbeni stíluslapok helyfoglalójára (pl. kézi berendezések és nyomtatási média stíluslapja)

A Mac IE5 meghal az üres stíluslapok láttán, és az oldalbetöltés ideje megnő. Legalább egy szabályt tegyél bele a fájlba (akár csak megjegyzést), ezt kiküszöbölendő.


Valamint van néhány említésre méltó elméleti dolog, ami nem kifejezetten érvényes a dolgok funcionalitási oldalán, de valószínűleg érdemes megemlíteni:

Hasznos CSS elméletek

Szervezd meg a CSS fájlt

Kommentezd fel a CSS blokkokat megfelelően, csoportosítsd össze az egyben kezelt elemeket, és használj konzisztens elnevezéseket, szóköz formázást (javaslat: szóközök a tabulátorok helyett platformfüggetlenségi megfontolásból), és tulajdonság-sorrendet. (Ford. megj.: ilyen platformfüggő tabulátor dolog nincs, ráadásul a szóközök használata megnöveli a fájlméretet.)

Funkciójukról nevezd el az osztályokat / azonosítókat, ne a megjelenésükről

Ha csinálsz egy .kicsikek osztályt, és később kérésre meg kell változtatnod azt nagyra és pirosra, az osztálynévnek semmi értelme sem lesz. Inkább használj beszédes neveket, mint .copyright vagy .idezetsor.

Csak végső megoldásként használj CSS szűrőket

A CSS hack-ek és szűrők arra jók, hogy csak megadott böngészők használjanak bizonyos beállításokat. Ezek használata helyett keress inkább szabványosabb böngészőtől független megoldást a keresett hatás elérésére. Azonban néha tényleg életmentő. Van egy hatalmas lista a CSS szűrőkről.

Kombináld a kiválasztókat

A letöltési idők minimalizálásához fontos a CSS egyszerűségét megőrizni, amennyire lehetséges: használj csoport kiválasztókat, számíts az öröklésre, és csökkentsd a redundanciát rövidítésekkel.

Figyelj az elérhetőségre képcseréléskor

A klasszikus FIR nem működik együtt képernyőolvasókkal, és azoknál, akik kikapcsolták a képek letöltését. Léteznek alternatív módszerek is, használd azokat nyakra-főre.

Referenciák:

Content Copyright ©2003 by Dave Shea. All Rights Reserved.

Hungarian Translation Copyright ©2003 by Balázs Nagy.