Weblabor

Nos, ez a legfontosabb dolog. Tudd, hogy mikből építkezhetsz. A CSS-nek van egy olyan része, ami többékevésbé már szabványosnak tekinthető a böngészők között.

A legtöbb kérdésedre megtalálod a választ, ha megnézel pár mai CSS oldalt. (Bár rossz praktikákat is találsz bőven).

Hogy kell használni a clear és float párost? Margin vagy padding a megfelelő egy helyre? A befogadó elemnek legyen marginja, vagy a benne szereplő elemeknek egyenként? A hierarchia melyik szintjére kell tenni egy-egy háttérképet? Mikor érdemes egy burkoló (wrapper) DIV-et betenni, ami csak a markup szempontjából bír jelentőséggel? Ezekre a kérdésekre a választ saját praxisod során fogod megtalálni. Amikor kialakítod a saját CSS layout praktikáidat. Például hogy szereted a fejlécet megoldani.

Én a CSS alapú dizájnt kb 2 éve kezdtem el csinálni. Elhatározás kérdése. Keress egy lapot a cssbeuty.com -on, és nézd meg, mit hogyan csinálnak benne. Aztán nézz meg még kettőt. Ami ugyanúgy megy az összes helyen az alószínűleg üdvös módszer, használhatod.

Személyszerint én nem szeretem az IE conditional commentjeit egyszerűen azért, mert nem akarok többször dolgozni (ugyanez a CSS hack-ekkel kapcsolatban: w\idth és társai). Ha a jó építőkockákat használod alapból böngészőfüggetlen lesz az oldalad. Néha használok JS patcheket ( http://vbence.web.elte.hu/ie_png_alpha.html ), de csak akkor, ha ez tényleg szükséges. (Amire ma PNG-t hazsnálnak annak 90%-a nélküle is megoldható lenne). Hasaználok egy alap CSS-t minden oldahoz, aminek a célja a böngészők alap CSS szabályinak eltüntetése. Például:Ha egy hibát tapasztalsz, fejtsd meg. Készíts egy csupasz mintapéldát ahol kijön a hiba, zárj ki minden tényezőt, ami nincs összeföggésbe vele. Ha megfejtetted akkor pedig védekezz ellene.

És még persze még sok hasonló dolog, ami most nem jut eszembe. Ne tegyél le semmit amég nem érted meg minden egyes sor jelentőségét. Légy ügyes, tanulj profi oldalak forrásából. (Ne használj kiollózótt kódokat, ha nem érted őket). A web open-source, ott van minden előtted.

Alapvetően ebbe a kérdésbe (mint annyi minden másba a számítástechnika területén) számos rutin belejátszik. Amelyeknek a hiánya, illetve a megszerzésükhöz való affinitás hiánya frusztrációhoz vezet. Ezt pontosan tapasztalom ismerősi körömben. Elsősorban talán a keresőrutin, de játszik még a szerkesztés, a nyelvtudás (mennyire esik nehezedre befogadni az internetes (angol) diszkussziót a témában) is és általában az ügyesség és problémamegoldás. Képes vagy-e repetitív feladatokat egyszerűsíteni, képes vagy-e a bugok gyors és rutinszerű lokalizációjára (sokat számít, milyen fokon bánsz a kóddal, a szerkesztővel), így a probléma megfelelő megfogalmazására, rákeresésére, az ilyen problémák rendes felgöngyölítésére. Ki tudod-e magad művelni ezen a területen. Szinte minden böngésző issue dokumentálva van a blogoszférában, tehát nincs olyan nagy káosz.

Ezenkívül képes vagy-e a referenciákkal és más forrásokkal a "jobb kezedben" élni.

Ki tudsz-e magadnak alakítani egy hatékony módszertant, és tudsz-e tanulni a hibákból. Szomorú látni, és sajnos tipikus, mikor valaki CSS-t kódol, és utána kétségbeesik, mert miután az egész készen van, kiderül, hogy IE6-ban teljesen szét van esve. És kínjában csak a microsoftot szidja. (Rosszabb esetben még azt se tudja, mi az a doctype.) Nincs igaza (ott és akkor). Egyszerűen nem értem, hogy derülhet ez _ilyenkor_ ki. Az IE6-nak ott kell lenni nyitva a háttérben, és nézni minden lépés után, rendesen követi-e a kódodat. Én egy sitebuilderi feladatot eleve úgy kezdek, hogy megnyitok 5 böngészőt (Opera, FF, IE6, IE7 vmware-ben, Safari). Operában szoktam követni a fejlesztést, de bizonyos időközönként ránézek az IE6-ra, hogy rendesen követ-e. Ez az 5 böngésző így kicsit felvágásnak hangozhat, de van benne józan logika is: minél több böngészőben nézed meg, annál jobban képben vagy, hogy helyesen kódolsz-e, ha az egyikben gond van. Az biztos, hogy egy szabványnak és egy IE6-nak kell lennie a háttérben, természetesen a szabványra kódolj, de folyamatosan gondoskodj róla, hogy az IE6 követ-e. S persze használj olyan extension-öket, toolbarokat, amikkel gyorsan meg tudod nézni az adott lapot más böngészőben. (Extensionök hasznosságát felesleges is említeni -- firebug, mérőszalagok, IE tab stb.)

Továbbá én általában a html-markupba szoktam tenni kezdeti kódoláskor a css-kódot, style-attribokba, de sortöréssel és indentációval, így átlátható. Mikor kezd "kihűlni" egy-egy terület, akkor rakom át a stílust a CSS fájlba.

Nem érdemes külön CSS fájlba tenni az IE6 stílusát, egyszerűen nem éri meg a macera. CSS validitást hagyd a fenébe szerintem, elég az XHTML-ével adózni a pedantériának. IE6-korrekciókhoz én az underscore hacket ajánlom. A kompatibilitás-library-k (elsősorban a dean edwards-ie7-ről, valamint a png-behaviour-szkriptekről van ugye szó) ellenzője vagyok. Ha ugyanis tudod, miről szólnak a problémák, akkor már inkább terhet jelentenek, semmint megoldást. Számos CSS-selectort lehet emulálni IE6-ban egyszerű expression-nel (pl. first-child: expression(!previousSibling ? 'stílus: érték' : '')), hasonlóképp a png-k is helyettesíthetők az alpha-filterrel. Nagyon ritka, bár előfordul, hogy a szabvány böngészőkhöz is kell specifikus hack, de itt már elfogadható általános igazságként, hogy olyankor jobb más megoldást keresni. (IE6 esetében ez az igazság nem igazság, IE6-hoz kell a hack.)

(Egyébként nem igaz az, hogy az átlátszó png-kre nem volna szükség, nagyon nagy szükség van rájuk, aki már dolgozott komolyabb dizájnnal, és layerezett valaha, az ezt jól tudja.)

Konkrét CSS "alapszabályból" milliót lehetne említeni, ezek közül, azt hiszem, felesleges egy top 10-et kiválasztani. Hasonlóan ügyes kis tippekből, jótanácsokból és egyebekből is jópár csokrot össze tud állítani bárki, aki igényesenen jár végig CSS-munkákat és szerez értékes tapasztalatokat. Lehet szétnézni a blogvilágban.

Szerveroldal, javascript: ne ezekre alapozz, de ettől még a kivétel erősítheti a szabályt (l. IE6 expressionök).

Szóval légy nyitott és tájékozódóképes, ne légy rest olvasni, érdekeljen, hogy valami miért úgy olyan, ahogy amilyen, és mindjárt azon fogod észrevenni magad, hogy te is részese kívánsz lenni a káoszoszlató webes közbeszédnek, és az első komolyabb munkád után már jó érzés lesz, hogy tudod, miképp kell megszelidíteni azt az IE6-nak nevezett vak lovat.


Ne feledd, hogy az is vívmány, hogy van egyáltalán szabvány. És ez a körülmény még ráadásul mérője is lehet annak, kinek milyen arányban van a panaszkodókája és a problémamegoldókája.


Ezt a kérdést így nem lehet feltenni. Folytatva az előző gondolatot, ez a terület egy jó darabig még nem lesz iskolás terület, nem is érdemes így megközelíteni. A "profi" helyeken is mehet a gányolás és a futószalag, ez nem ennek a függvénye. Nincs CSS akadémia.

Még egy megjegyzés: Ha jó dizájnt kapsz, és korrekten tudod végezni ezt a munkát (jó a nyomozókád), bizony rengeteg lehetőséged nyílik a kreativitásra. Egy dizájnt és részeit sokféleképp meg lehet valósítani pixelpontosra, és a megoldási lehetőségek között fel-fel szokott csillanni az elegánsabbik.