Weboldalkészítő suli #28 - Stílusos áttűnések

Folytatva a legutóbb megkezdett munkát, először is az oldalon megjelenő egyes előadások és cikkek formázását alakítjuk át egy kicsit. Majd’ egy évvel ezelőtt, a Weboldalkészítő suli 17. leckéjében néztünk meg több módszert is arra, hogyan lehet egyes szövegeket, jellemzően címeket és címsorokat képekre cserélni, sőt, külön programot is írtunk, amely végignéz egy teljes dokumentumot, és annak összes címsorát képre cseréli. Miután azóta mindegyik webböngésző program (al)verziószáma lépett legalább egyet, de van olyan, amelyiké 3-4-et is, és ezek újdonságai között már megtaláljuk @font-face-támogatást, ezért megköszönjük JavaScript programrészünknek az eddigi hasznos munkát – és nyugalomba küldjük, helyette a továbbiakban a stíluslapunkat módosítjuk egy kicsit.

Képtelen címsorok

Először is definiáljuk új betűstílusunkat, amely – hasonlóan a főcímnél használt Xenippához – a regensburgi Marianne Steinbauer keze munkáját dicséri, és amit a www.pia-frauss.de oldalról tölthetünk le. Természetesen a True Type fontot – megint csak a Xenippához hasonlóan – a ttf2eot programmal (code.google.com/p/ttf2eot) átalakítjuk Embedded OpenType formátumra, hogy az Internet Explorerben se legyen problémánk a használatával, így tulajdonképpen két betűtípusunk lesz, egy Xirwena és egy Xirwena IE (17–25. sorok), így minden „modern webböngésző” kedvére válogathat a lehetőségek között.

A címsorok szövegét Xirwena betűtípussal írjuk – és nem képekkel helyettesítjük

Miután elvégeztük az új betűtípus „regisztrációját”, nincs is más dolgunk, mint megadni, hogy az előadások címsorait szeretnénk ezzel írni – címsor-szintenként csökkenő betűmérettel, és a korábbi dizájnból átvett színekkel, igazítással és margóval (358–380. sorok).

Természetesen ezek után már nem lesz szükségünk arra a 17. leckében készült JavaScript programrészre, amely a cikkek azonosítóval ellátott dokumentumokban végignézte a cikk azonosítójú ‹div› címsorait, és azokat a megfelelő képekre cserélte, ahogyan azokra a kiegészítő funkciókra sem, amelyek ellenőrizték, hogy az egyes képek megvannak-e. Ugyanakkor a JavaScriptet mégsem száműzhetjük teljesen az oldalunkról, vagy csak abban az esetben, ha az írások tartalomjegyzékét kézzel vagy szerveroldali program segítségével készítjük el.

A cikkek címsorait már nem kell képként előállítanunk

Csíkos táblák

Legutóbbi leckénk mintaoldalainál már használtunk néhány speciális elemkiválasztót, ún. selectort, amelyek feleslegessé tették például az egyes ‹div›-ek azonosítóval vagy osztálynévvel ellátását. Régebben csak egy elemen (ami lehet akár a ‹body› is) belül az első és az utolsó elemet jelölhettük ki – a CSS 2.1-et korrekten támogató böngészőprogramokban – a :first-child és a :last-child ún. pszeudoosztályok használatával. De mi a helyzet a második, a harmadik, a negyedik, az utolsó előtti és a többi elemmel, arról nem is beszélve, hogy hogyan hivatkozzunk minden második, harmadik, negyedik elemre? Szerencsére az új CSS-en dolgozó munkacsoportnál is gondoltak erre a problémára, és új pszeudoosztályokat vezettek be.

A tábla csíkozásához és az aktív sor kiemeléséhez már nincs szükség JavaScript programra

Így például a CSS3-at támogató webböngészők pontosan tudják, hogy a div:nth-child(1) az oldalon található első (vagyis a korábban div:first-child-dal jelölt), a div:nth-child(2) második, a div:nth-child(3) a harmadik ‹div› elemet jelöli – ahogyan azt az előző lecke színes, színátmenetes vagy lekerekített sarkú ‹div›-jeinek esetében láthattuk. Sőt, „ha már lúd, legyen kövér” alapon a CSS-munkacsoport még tovább lépett, és további ún. strukturális pszeudoosztályokat vezettek be. Így például a tr:nth-child(2n) módon egy táblázat minden második sorát, egész pontosan a páros sorait, míg a tr:nth-child(2n+1) ugyanezen táblázat páratlan sorait fogja jelölni, ráadásul e kettő helyett használhatjuk a tr:nth-child(even) és a tr:nth-child(odd) jelöléseket is.

Természetesen a weboldalak formázása során nem egyszer előfordul(hat) olyan eset is, amikor nem kettesével, hanem hármasával, ötösével vagy akár tízesével kell megkülönböztetnünk elemeket. Ilyenkor sincs gond, hiszen a CSS3 lehetővé teszi hogy az n elé és a plusz – vagy akár a mínusz – jel mögé tetszőleges egész számot írjunk. Így a li:nth-child(4n+1) egy felsorolás első, ötödik, kilencedik, tizenharmadik stb. elemét fogja jelölni, ahogy ol:nth-child(10n-1) azokra a számozott listaelemekre mutat, amelyek kilencre végződnek (9, 19, 29, 39 stb.).

Egy későbbi leckében még részletesen visszatérünk a strukturális pszeudoosztályokra, azonban nekünk momentán „csak” az a fontos, hogy a címsorok képesítését végző JavaScript programunkhoz hasonlóan nyugdíjba küldhessük a zebra osztállyal megjelölt táblázatainkat – például a cikkek szövegközi tábláit vagy és a résztvevők listáját – becsíkozó kódrészleteket. Hiszen innentől kezdve ezeket a néhány soros kis programrészleteket könnyedén kiválthatjuk azzal, ha a páros és páratlan sorokat közvetlenül a CSS-ben jelöljük meg a tr:nth-child(odd) formula használatával, egész pontosan a teljes „elérési útvonalakat” megadva: div#cikk tr:nth-child(even), div#cikk tr:nth-child(odd), table.resztvevok tbody tr:nth-child(even) és table.resztvevok tbody tr:nth-child(odd).

Immáron csak a táblák rendezéséhez kell JavaScript

Ezek használatánál igazából csak arra kell figyelnünk, hogy egy adott sor számozása megváltozhat annak függvényében, hogy a teljes táblát vagy csak a táblatestet vesszük figyelembe. Hiszen egy egysoros (vagy páratlan számú sort tartalmazó) táblafej esetén a táblatest első, vagyis páratlannak számító sora a teljes táblát figyelembe véve már második (de legalábbis páros) lesz. CSS-re lefordítva mindezt, a tr:nth-child(even) és a tbody tr:nth-child(even) jelölők nem biztos, hogy ugyanazokat a sorokat fogják jelenteni.