Mi az a CSS?...

Írásainkat olyan, az informatika iránt érdeklődőknek szánjuk, akik egyelőre még szinte semmit vagy csak nagyon keveset tudnak az IT, weboldal készítés, internet, hálózatok, programozás, stb. világáról. Az általunk használt kifejezések és magyarázatok a nem szakmabelieknek szólnak. Cserébe közérthetően szeretnénk bemutatni az informatika különböző területeit és fogalmait.

Előző bejegyzésünkben arról írtunk, hogy egy frontend fejlesztő milyen - nem technikai - problémákkal is találkozhat munkája során.

Most egy kicsit továbbmegyünk: Hétköznapi szavakkal elmagyarázzuk, hogy mi is az a CSS, amely a frontend fejlesztő számára olyan, mint az írónak az ábécé. Ígérjük, nem lesz bonyolult, mindenki megérti a magyarázatot!

A CSS jelentése: Cascading Style Sheets, vagyis “lépcsőzetes stíluslapok”

Oké, nyugi, tudjuk, hogy ezzel még mindig homályos a dolog.

A megértéshez először gondoljunk egy elterjedt szoftverre: Word. Akinek van számítógépe, az szinte biztosan használta már. Egyúttal az is biztos, hogy a szöveget meg is formáztátok.

Minden szövegben - és ez igaz a weboldalakra is - szinte minden formázási tulajdonságot többször vagy sokszor használunk. Ez azt jelenti, hogy ha pl. sok ún. “Címsor” stílusú címet írunk, a bekezdéseket is mindig ugyanazzal a betűmérettel és betűtípussal írjuk. És persze ha pl. idézetet írunk, akkor is ezen szövegszakaszok stílusa mindig azonos - legalábbis egy esztétikusan formázott dokumentumban.

És itt jön a lényeg:

Nyilvánvalóan felesleges, időpazarló munka minden egyes címsor számára egyesével beállítani az összes tulajdonságot: betűtípust, betűméretet, sorközt, behúzást (a lap szélétől való távolságot), betűtávolságot, stb. Ehelyett érdemes az előre beállított stílusokat használni. (Kétségtelen, hogy vannak, akik egyesével állítgatják ezeket, de attól még igaz marad az, hogy nem ez a hatékony megoldás.)

Nincs ez másképp a frontend fejlesztők számára sem. A Word-ben is stílusokkal tesszük könnyebbé és hatékonyabbá a munkát, a frontend fejlesztő számára pedig a CSS az, amely által hatékonyan dolgozhatunk és profi megjelenítést adhatunk a weboldalnak.

A CSS működésének elve az alábbi:

Minden, az adott elemhez tartozó (cím, szöveg, kép, szövegszakasz, stb.) tulajdonságokat “összefogjuk”, mintegy “csokorba rendezzük”, és egy számunkra érthető egyetlen kifejezést rendelünk ezekhez a tulajdonságokhoz. Ezt természetesen a megfelelő módon (ez az, amit meg kell tanulni) kell tenni.

Hétköznapi szavakkal ez így néz ki:

A “címsor” legyen:

• Arial betűtípussal
• Dőlt betűvel
• Sötétkék
• 20px behúzással (a weben a pixel az egyik elfogadott mértékegység)
• …és legyen halványszürke háttere

Innentől kezdve, ha egy sor számára megadjuk a “címsor” tulajdonságot, akkor a felsorolt formázást automatikusan felveszi a kérdéses szöveg.

Gondoljuk csak, mennyire kényelmes, ha egy esetleges utólagos változtatási kérés miatt nem kell több száz cím tulajdonságai egyesével, kézzel beállítgatni…

De CSS által nem csak a szövegek megjelenítését befolyásolhatjuk.

• A CSS beállításai azok, amely képessé teszi a weboldalt arra, hogy minden eszközön (laptop, mobiltelefon, tablet) az adott eszköz méreteihez igazodva jelenítse meg a weboldal tartalmát.
• CSS által szabályozhatjuk a képek méretét, viselkedését, pozícióját
• CSS által háttérszíneket, színátmeneteket hozhatunk létre
• Interakciókat, mozgásokat hozhatunk létre a képernyőn
• Sőt, még arra is képes a CSS, hogy bizonyos feltételek esetén történjenek meg bizonyos dolgok. Pl. csak akkor legyen látható egy kép/szöveg, ha a képernyő mérete kisebb/nagyobb x értéknél.

Ezen kívül is számtalan módon befolyásolhatjuk a honlap megjelenését CSS használatával.

Van a CSS-nek egy olyan "tulajdonsága" is, amely a honlap sebessége szempontjából fontos:

Egy jó frontend fejlesztő úgy állítja össze a CSS file-t, hogy az a lehető legkevesebb utasítást tartalmazza, és közben mégis minden pontosan úgy nézzen ki és úgy működjön a honlapon, ahogyan azt a designer és a megrendelő megálmodták. Egyszóval a legoptimálisabb módon építi meg a honlapot.

Ez egy kicsit olyan, mint amikor egy logisztikai szakember az áruk és futárok kiszállítási útvonalait tervezi meg. El lehet juttatni az árukat optimális útvonal követésével, de akkor is mindenki megkapja a neki szánt árut, ha a futár közben (rossz tervezés miatt) sok-sok kilométerrel több utat tesz meg. Az eredmény látszólag ugyanaz: a megrendelő ugyanazt kapja, csak lassabban, és közben a futárcégnek is sokkal többe került a folyamat.

A frontend fejlesztés világában a rossz tervezés sokkal több felesleges munkát és lassabb weboldalt eredményez.

Mindent egybevéve a CSS egy izgalmas területe a frontend fejlesztő munkájának.

Ha eddig eljutottál az olvasásban, akkor szinte biztos, hogy érdekel a téma!

Olvasd el Junior frontend fejlesztő képzésünk részleteit! →