Modern CSS3 (2. rész): Alapvető technikák

Modern CSS

Az első részben nagy vonalakban szó esett a fő szemszögekről, amiket figyelembe kell venni a CSS fejlesztés során. Már ismerjük a modern CSS alapvető jellemzőit, de hogyan is kell azokat használni? Ebből a cikkből több tucatnyi kiváló technikáról tudhatsz meg mindent, kapcsolódó linkekkel, példa oldalakkal és képekkel egybekötve.

A cikkben szó lesz ezekről:

  • Az elemeket érintő változások: árnyékolás, keretek, hátterek, animáció
  • CSS kódjában történt fő változások: szelektorok, média lekérdezés, új doboz modell
  • HTML5 újdonságok: új felépítés, új elemek, JavaScript és plugin függőség
  • IE hibajavítás
  • Rugalmas elrendezés, segédrács
  • CSS keretrendszerek, OOCSS
  • CSS tömörítés, CSS Sprites
  • Betűtípus beágyazás és csere
  • stb.

CSS3

A CSS3 a stíluslapok legújabb változata, amit részben már a legtöbb böngésző támogat, ez az első dolog, amit tudnod kell róla. A CSS adja egy oldal stílusát, nem is csoda, hogy az új változat igazából rengeteg vizuális tuningot tartalmaz. Ám a CSS3 többről szól, mint csili-vili effektek és jobb tipográfia. Könnyebbé tehetjük vele a tartalom olvashatóságát, gyorsabban elkészíthetünk egy jó oldalt és persze a felhasználó is gyorsabban megkapja azt, amit akar.

Sajnos rengeteg CSS3 technika létezik, ezek persze nem férnének bele egy cikkbe, sőt kettőbe sem. Éppen ezért ebben a cikkben csak a fontosabbakról lesz szó. Sőt, némelyik témakörhöz még külön cikkeket is ajánlunk, sajnos nem mindegyik lesz magyar. Szűkösek a készletek itthon 🙁

CSS3 Vizuális effektjei

Félig áttetsző színek
Ebben segít: Fokozatos javulás, hatékonyság

Az RGBA segítségével nem csak a piros, zöld, kék színt tudjuk állítani egy színben, hanem az áttetszőségét, az alfáját is (erre utal az RGBA végén található A betű is). Hasonlóan működik a HSLA, csak használata esetén a szín, telítettség, fényerő és áttetszőség állíthatók be. Az Opera fejlesztői oldalán található egy cikk a HSLA előnyeiről (angol).

RGBA példa

24 Ways honlapja széles körben használja az RGBA adta lehetőségeket, hogy áttetsző szövegeket hozzon létre.

Az RGBA és HSLA nem csak pofás, hanem az oldal hatékonyságán is javít. Nem kell több időt pazarolni az áttetsző PNG képek kreálására, ezzel is levéve a terhet a böngészők válláról, hiszen kevesebb kép betöltésére van szükség.

Háttér és keretek testreszabása
Ebben segít: fokozatos javulás, hatékonyság

A CSS3 rengeteg új lehetőséget ad a keretek és a hátterek kezelésére, külön div hozzáadás nélkül. Ezeknek a technikáknak nagy része már a böngészők többségében elérhető, és mivel ezeket főként kozmetikai kellékekként használják a fejlesztők, kiválóan alkalmas a fokozatos javuláshoz.

Itt van néhány újdonság, amit a CSS3 használatával elérhetünk a háttereknél:

  • Több háttér egy elemen: Lehetőségünk van a background-image használatával akár több háttérképet is beállítani egy elemen, egyszerűen csak vesszőt kell rakni a különböző képek közé. Ezzel végre elkerülhetők az idegesítően fölösleges div elemek.
  • Még több irányítás a hátterek elhelyezése fölött: A background-origin segítségével a tartalmat a kerettől függően igazíthatjuk, míg a background-clip segítségével meghatározhatjuk, hogy a háttér a keret fölött vagy alatt helyezkedjen el.
  • Háttér méretezés: A background-size segítségével akár át is méretezhetjük a hátteret, így nem kell fölöslegesen nagyobb képméretben lementeni a hátteret, hanem kisebb képpel is elérhetjük ugyan azt a hatást.
  • Színátmenet: Igaz, még csak a Chrome, Safari és Firefox egyes változatai képesek helyesen megjeleníteni a színátmeneteket, ehez egyszerűen meg kell adnunk a két színt a background-image segítségével. Így az elkészült színátmenet mérettő függetlenül kiváló minőségű lesz. Eldobhatjuk a régi egyszerű képeket.

Újdonságok, amiket a kereteknél használhatunk:

Lekerekített sarkak: border-radius segítségével vége a jó öreg szögletes sarkaknak, eljött a szép, gömbölyded ívek ideje. Eldobhatjuk a régi Javascripteket és extra div elemeket.

Kép keret: Trükközés helyett mostantól valódi képeket illeszthetünk be keretnek. A hagyományos egy színű keret helyett használhatjuk az új border-image tulajdonságot, amivel egyedi képet is használhatunk az elemek bekerítéséhez.

Lekerekített sarok

border-radius használatával minden elem lekerekített sarkot kapott, természetesen hozzáadott képek nélkül. (Stunning CSS3 honlap)

Árnyék
Ebben segít: fokozatos javulás, alkalmazkodás a felhasználóhoz, hatékonyság

Az árnyékolással tiszta oldalakat kaphatunk, mostantól ráadásul képek nélkül is elérhetjük a hatást.

A box-shadow specifikációt ideiglenesen kivették a CSS3-ból, de várhatóan hamarosan visszakerül. Addig is használhatjuk a Chrome/Safari böngésző alatt működő -moz-box-shadow és -webkit-box-shadow specifikációkat. Az Opera pedig egyszerűen a box-shadow specifikációt használja, előtag nélkül. Meghatározhatjuk az árnyék vízszintes és függőleges távolságát az doboztól, színét és opcionálisan a blur mértékét és a terjedési sugarat is állíthatjuk.

Árnyékolás

Cherry honlap rengeteg árnyékolást használ a dobozain és gombjain a box-shadow segítségével.

A szövegek árnyékolásáról sem szabad megfeledkeznünk, ezt a text-shadow specifikáció segítségével tehetjük meg. A főbb böngészők mind támogatják kivéve a – kitalálhatjátok – Internet Explorert. Ez a módszer a fokozatos javulás egyik fő fegyvere, hiszen pontosan olyan dolog, amit nem baj, ha egyes felhasználók nem látnak. Hasonlóan a box-shadow specifikációhoz, megadhattuk a vízszintes és függőleges eltolását, és opcionálisan beállíthatjuk a blur mértékét ill. a terjedési sugarát.

Segítségével elhagyhatjuk az extra képeket és Flasheket, ezzel is gyorsítva az oldal betöltési sebességét. A Flash elhagyásával továbbá az olyan böngészőknek is lehetőséget adunk a megfelelő megjelenítésre, amik nem támogatják ezt a plugint.

Transzformálás
Ebben segít: fokozatos javulás, alkalmazkodás a felhasználóhoz, hatékonyság

A CSS3-ban lehetőségünk van az elemek elforgatására, átméretezésére és hozzáadott Flash vagy Javascript nélkül akár aszimmetrikus elemeket is létrehozhatunk. A transzformálás elérhető Firefox, Chrome, Safari és Opera 10.5 böngészők alatt.

A transzformációkat a transform specifikáció segítségével használhatod (sajnos néhány böngésző esetében a -moz-transform-webkit-transform, és -o-transform használatos a transzformálásra). Ugyanakkor a tranfrosm-origin segítségével pedig a transzformálás igazítását is megoldhatjuk (x és y koordintákkal, pl.: bottom right).

A transform használatához szükség van a transzformációs függvények ismeretére. Nem kell megijedni, nem nehéz megtanulni azt a néhányat, amit használhatunk. Vegyük példának a translate(10,20) függvényt, használata esetén az elem 10 pixelt jobbra és 20 pixelt lefelé mozdul el. További transzformációs függvények: scale, rotate, skew.

Transzformálás

BeerCamp SXSW 2010 oldalon a szponzorok logói elfordulnak és átméreteződnek, ha fölé viszed az egered.

Animáció és Átmenet
Ebben segít: fokozatos javulás, hatékonyság

Az animáció már nem csak a Flash és Javascript segítségével elérhető, mostantól akár egyszerű HTML és CSS oldalakon is használhatunk animációt. Sajnos ennek a CSS3 lehetőségnek még nincs túl jó támogatottsága, így kevés böngészőben elérhető, ennek ellenére, nem mehetünk el mellette említés nélkül.

A CSS3 átmenet alapjában véve a legegyszerűbb animációs típus. Megkönnyíti és látványossá teszi két CSS érték közötti váltást. Persze az animáció időtartamát is megszabhatjuk. Ezek az effektek akkor jönnek elő, amikor valami változás történik az elemen, például fölé húzod az egeret. Safari, Chrome és Opera 10.5 alatt elérhető.

Az átmenethez csupán annyit kell tudni, hogy melyik elemen szeretnénk alkalmazni, aztán ezt megadni a transition-property-ben. Emellett az átmenet időtartamát is meg kell határozni, a transition-duration segítségével (a mértékegység “s”), hiszen az alapértelmezett átmenet ideje 0 másodperc. Ha gyorsabban szeretnénk végezni, egyszerűen bevihetjük az adatokat egyben is a transition specifikációba. Emellett meghatározható az átmenet késleltetési ideje is.

Az átmenet mellett lehetőségünk van a teljes körű animációk készítésére is, akár több kulcsponttal (jelenleg azonban csak Safari és Chrome böngésző alatt). Először meg kell határoznunk az animáció nevét, majd azt, hogy pontosan mit is fog csinálni (kulcs képkocka, százalék) és mennyi ideig fog tartani. A kiválasztott elemen az animation-name, animation-duration és animation-interation-count használatával futtathatjuk majd az animációt. Az átmenethez hasonlóan, itt is meghatározhatjuk a késleltetést és időzítést.

CSS3 használhatóság / Olvashatóság fejlesztése

Az eddigi CSS3 technikák, amiken végigmentünk egyszerűen kozmetikázásra és fokozatos javulásra használatosak. De a CSS3 többre is képes, megkönnyítheti egy oldal használatát és javíthatja az információk olvashatóságát.

Szövegek több hasábban
Ebben segít: fokozatos javulás, alkalmazkodás a felhasználóhoz

Sok szöveget könnyebb több hasábban olvasni, legjobb példák erre a hagyományos újságok, hiszen ezekben is több hasábra osztják az oldalakat. A column-width segítségével megmondhatod a böngészőnek, hogy az egyes hasábok milyen szélesek legyenek, vagy a tartalmazó elemben meghatározhatod, egy sorban hány hasáb legyen (column-count). (Sajnos a támogatottság hiányában még böngészőtől függően szükség lesz a -moz és a -webkit előtagokra.) Ez egy olyan lehetőség, amit ha helytelenül használunk, elronthatja az olvashatóságot, ezért óvatosan bánni vele.

Szöveg tördelés irányítása
Ebben segít: alkalmazkodás a felhasználóhoz

A CSS3 új lehetőségeket ad az egyedi szövegrészek, szavak tördelésére, ha azok túl hosszúnak bizonyulnának. A word-wrap és a break-word segítségével a túl hosszú szavakat új sorba törhetjük (nagyon hasznos például hosszabb URL-ek esetében). A text-wrap segítségével pedig több lehetőségünk is van a törések helyének meghatározására (kivételek megadásával). A CSS3-ben használt white-space a CSS3-ban nagyban leegyszerűsödött az új white-space-collapse és a text-warp tulajdonságnak köszönhetően (a sortörésre és a szóközökre vonatkoztatva). Még egy említésre méltó tulajdonság van ebben a témakörben, ami jelen pillanatban nem is része a CSS3-nak, ez pedig a text-overflow. Segítségével a szövegdobozok végéhez hozzáadhatunk egy záró karaktersort (…), amennyiben a szöveg nem férne el a szövegdobozában.

Média lekérdezések (Media Queries)
Ebben segít: alkalmazkodás a felhasználóhoz, hatékonyság

A CSS3 lehetőséget adott a különböző médiatípusokhoz tartozó stíluslapok megjelenítéséhez – képernyő, nyomtató, és így tovább. A CSS3 tett egy lépést előre, a képernyőmérettől függően eltérő stílusokat alkalmazhatunk egy oldalra. Ez nagyon hasznos lehet egy vízszintes menü esetében, ha túl keskennyé válna a képernyő, egyszerűen függőleges elrendezésre váltjuk a navigációt.

Az Opera nagyszerű példaoldal alapján mindenki pontos képet kaphat arról, pontosan miről is beszélek. Egyszerűen méretezzük át böngészőnket, és meglátjuk, hogyan idomul a felbontáshoz az oldal.

A Média lekérdezések nem érkezhettek volna jobb időben – egyre szélesebb a képernyőméretek skálája, a leg kisebb mobil felbontástól a hatalmas szélesvásznú képernyőkig bármi előfordulhat. Mostantól lehetőségünk van az oldalaink egyszerű optimalizálására, nem szükségesek Javascript átirányítások és egyéb, kevésbé hatékony módszerek.

A média lekérdezések már bármilyen böngészőben elérhetőek, persze ez alól az IE ismét kivétel (szerencsére a mobil eszközökön Safari és Opera uralkodik). A Bevezetés a média lekérdezésekbe FireFox 3.5  alatt c. cikket ajánlanám, aki angolul kevésbé ért annak is tanulságos lehet a sok példa forráskód.

Hatékonyság növelése a CSS3 segítségével

Az eddigi CSS3 tulajdonságok, amiken végigmentünk többnyire valami extrát adtak hozzá a látványhoz, most a hatékonyságra térünk rá: Nem csak a fejlesztés gyorsaságáról van szó, hanem az oldal hatékonyságának fokozásáról.

Minden CSS3 tulajdonság hozzájárul ahhoz, hogy képek nélkül oldhassunk meg különböző problémákat. Ezzel pedig hatalmas nyomást vehetünk le szerver részéről, hiszen kevesebb fájlt kell elküldenie, míg a felhasználónak is kevesebbet kell letöltenie. Emellett persze sokkal könnyebben lehet módosítani egy már meglévő dizájnt is, mert nem kell extra időt a képek babrálásával tölteni.

Ha meg tudunk oldani egy problémát külön div létrehozása nélkül, nem csak gyorsabban végzünk, hanem az elkészített fájlok is egyszerűbbek és kisebbek lesznek. Most következzék még több említésre méltó technika.

A doboz méretezés (box sizing model)
Ebben segít: hatékonyság

A hagyományos W3C doboz modell a CSS2.1 esetében a szélesség és magasság kizárólag a tartalomra vonatkozott, a margó és a padding ehhez hozzáadódtak. A módszer használata körülményes, ahhoz, hogy egy dobozt pontosan méretre szabjunk és a benne lévő tartalmat is megfelelően pozícionáljuk, elengedhetetlen volt egy kis fejszámolás vagy további div tagok hozzáadás. A beágyazós módszer egyszerűen nagyszerű, a nagykönyvben nem így van megírva, de így jóval egyszerűbb. Sajnos azonban ettől túlságosan komplikálttá válik egy design elkészítése és a későbbiekben a módosítása is. Nem elég, hogy több ideig tart elkészíteni, fölöslegesen új elemeket kell beiktatni, de a CSS és a HTML méretét is sokkal növeli.

A probléma megoldására a box-sizing tulajdonságot állítsuk border-box-ra, így elhagyhatjuk a fölösleges div elemeket és CSS osztályokat. Ezek után már nem hozzáadja a szélességéhez és magasságához, hanem abból kivonja a margót és a padding-ot.

Doboz méretezés

A hagyományos doboz modell (alsó kép) A keret és a padding hozzáadódott a megadott szélességhez, míg az új doboz modell (fenti kép) szélességéből levonásra kerül.

A doboz méretezésnek nagyon jó böngésző támogatottsága van, kivétel természetesen van, az pedig az IE6 és IE7. Ellentétben a korábbi CSS3 tulajdonságokkal szemben, a box-sizing hiánya az oldal teljes szétesését okozhatja. Éppen ezért, egyenlőre még nem ajánljuk a használatát.

CSS3 Pszeudó-osztályok és Attribútum szelektor
Ebben segít:  haladó fejlesztés, hatékonyság, moduláris, tipográfiai sokszínűség

Van néhány CSS szelektor, ami csak a harmadik változatban került használatba. Nagy része csupán csak a CSS3-al került a képbe, de van olyan is, ami már a CSS2 óta létezik. Sajnos sokukat nem támogatja minden böngésző (például… IE), de szerencsére a helyzet fokozatosan javul.

Az új szelektorok kihasználásával javítható az oldal hatékonysága és jóval kevesebb osztály létrehozásával is csökkenthetjük a stíluslap méretét. Néhány új szelektornak köszönhetően akár az első sort, felsorolásban az utolsó vagy akár az első elemet is formázhatjuk.

HTML5

Bár a cikk középpontjában a CSS technikák állnak, nem hagyhatjuk figyelmen kívül a legmodernebb jelölőnyelvet sem. A HTML5 még fejlesztés alatt áll, az összes gyengeségével és erősségével, azonban már sok fejlesztő használja. Bár HTML 4.01 és az XHTML 1.0 még mindig nagyon jó választás, jó ötlet megismerkedni a HTML5 nyújtotta lehetőségekkel és a jövőben ezekre építeni, kihasználni őket. Éppen ezért, itt van egy rövid áttekintés arról, hogyan is segít a HTML5 a modern CSS alapú oldalak létrehozásában.

Megjegyzés: Ezeknek a technikáknak nincs még elég jó támogatottsága, hogy már most igazán kihasználhassuk az előnyeiket, ezért tekintsünk erre a részre úgy, mint egy bepillantás a jövőbe.

Új felépítésű jelölőnyelv

Ebben segít: alkalmazkodás a felhasználóhoz, modularitás, hatékonyság
A HTML5 számos új sematikus elemet vezetett be, aminek köszönhetően még könnyebben készíthetőek moduláris oldalak. Például, a fő div tagon belül több article elemet is találhatunk, amik közül mindegyik rendelkezik saját tartalommal, fejléccel (header), lábjegyzettel (footer) és címsorral (h1-től h6-ig). Mostantól fogva az artcile elemeket feloszthatod section elemekre, saját fejléccel (header) és lábléccel (footer). Az új, egyszerűbb sematikus jelölőnyelv segítségével sokkal egyszerűbb a különböző tartalmak vegyítése.

A jövőben sokkal egyszerűbb lesz a felhasználókra szabni az oldalt, hiszen az elemekre bontott gazdag HTML5 struktúrából akár a böngésző is ki fogja tudni majd emelni a tartalmakat. Így külön gombok és linkek nélkül akár át is ugorhatjuk a navigációt és a lábjegyzetet, ezzel minden felhasználó csak idő takarít meg.

A HTML5 fejlesztése és alacsony támogatottsága miatt még nem ajánlott a használata, de akár már most is létrehozhatunk újan struktúrát, amit a későbbiekben nagyon rövid idő alatt átalakíthatunk HTML5-re. A HTML5 engedélyezéséhez IE böngészőben is, szükség lesz egy kis Javascript segítségre, amit Remy Sharp oldalán találunk meg. Aki már most próbálkozna egy HTML5 oldal létrehozásával, ne felejtse el a HTML5 ellenörzőt.

Javascript és Plugin függőség enyhítése

Ebben segít: alkalmazkodás a felhasználóhoz, hatékonyság

Több olyan HTML5 elem is vár ránk, amiktől nem csak tisztább lesz az oldal kódja, hanem kevesebb Javascript és harmadik féltől származó pluginra (Flash és Java) van szükség a kliens oldalon. JavaScript és pluginok nélkül sokkal több készüléken, és ez által sokkal több felhasználó számára tehetjük alkalmassá az oldalunk. Emellett persze sokkal gyorsabbá és hatékonyabbá válik egy oldal fejlesztése, hiszen nem kell külön időt fecsérelni a megfelelő plugin és Javascript beállítására, beszerzésére. Végezetül az oldalak betöltési sebessége is gyorsul, hiszen több fájl betöltésére nincs is szükség. (Viszont lassabb is lehet, amennyiben a böngészőbe épített plugin lassabban dolgozik, mint a külső plugin, éppen ezért van szükség a HTML5 megfelelő elterjedésére.)

Néhány új tulajdonság a Javascript függőség csökkentésére:

  • Új űrlap elemek és attribútumok: A HTML5 több új bemeneti formátumot (input) vezetett be, mint az email, url, date (dátum) amiknek kliens oldali ellenőrzője van, így nincs szükség Javascript ellenőrzőre. Az gépelés közbeni ajánló, autófókusz egy mezőn már Javascript nélkül is elvégezhetők, köszönhetően a HTML5-nek. Szerencsére, a régebbi böngészők figyelmen kívül hagyják az új típusokat és egyszerű szöveges mezőt hoznak létre, így ezeket az elemeket már nyugodtan használhatjuk. — Persze a régebbi böngészőknél még mindig szükség van Javascript-re, ha ellenőrizni akarjuk a bevitt adatokat kliens oldalon. A jelenleg használatos szerver és kliens oldali ellenőrzés mellet azonban nem okoz komoly problémát, ha kihagyjuk a Javascript alapú kliens oldali ellenőrzést.
  • A vászon: A Flash és Java kiszorítására jött létre a canvas tag, ami létrehoz egy olyan vásznat hoz létre amire JavaScript segítségével bártan rajzolhatunk bármit. Igaz, ezzel nem csökken a JavaScript iránti igény, de ha a pluginok létszükségét nézzük, rengeteg a változás. Az Internet Explorer természetesen ezt sem támogatja, ahogy megszokhattuk tőle, viszont az ExplorerCanvas kód segítségével IE alatt is elérhetővé tehetjük a canvas-t.
  • Az audió és videó elemek: A HTML5-ben lehetőségünk van a videók és audiófájlok közvetlen beágyazására is, így külön plugin nélkül is lejátszhatók a multimédiás fájlok.

HTML5 űrlapok

Néhány új HTML5 elem egy widget-et hoz elő, mint ahogyan a dátum/idő beállító is. Opera alatt már kiválóan működik, és nem igényel semmilyen Javascipt manipulációt. (HTML5 űrlap mezők tesztelése)

IE szűrés

Ebben segít: Fokozatos javulás Sajnos nem úgy tűnik, hogy az IE6 a közeljövőben eltűnik, ezért meg kell tanulnod, hogyan is kezeld ezt az őskori leletet. Figyelmen kívül hagyhatod a problémáit, letilthatod, vagy akár megpróbálhatod orvosolni is (már amennyire lehet):

  • Conditional Comment az IE probléma orvoslására: Külön stíluslapokat is létrehozhatsz a különböző IE verziókhoz, így verziótól függően minden hibát kijavíthatsz.
  • IE stílushibák elrejtése, felülírása: Ez is egy conditional comment módszer, de ebben nem kell minden hibát külön orvosolnunk, hanem egyetlen fájl segítségével mindet eltüntethetjük. Andy Clarke ezt Univerzális Internet Explorer 6 CSS-nek hívja.
  • JavaScript “javítás” IE-hez: Rengeteg olyan Javascript létezik,  ami a CSS3 emulálására IE6 alatt, áttetsző PNG képek problémájának megoldására és egyéb IE6 által nem (megfelelően) támogatott hibák kiküszöbölésre szolgálnak. A legnépszerűbbek közé tartozik az ie7-js, Modernizr és az ie-css3.js.

Rugalmas elrendezés

Ebben segít: alkalmazkodás a felhasználóhoz

A felhasználókhoz való alkalmazkodás legjobb fegyvere, ha nem meghatározott szélességű dobozokban gondolkozunk, hanem rugalmas méretűekben. A média lekérdezéseknél már megtudtuk hogyan javíthatunk drasztikusan a képernyőmérethez való igazodáson, de az igazán rugalmas dizájn létrehozásához mégis más módszerre van szükség.

  • Folyékony elrendezés: A kijelző/monitor méretek nagyon széles skálán mozognak, kezdve a kisebb mobil kijelzőkön át a nagyobbacska iPhone kijelzőkön, hétköznapi monitoron keresztül egészen az egyre népszerűsödő szélesvásznú monitorokig. Egyes készülékek a helyzetüktől függően mellesleg más-más szélességet igényelnek, ezért fontos, hogy menet közben is zökkenőmentesen igazodjon az böngésző méretéhez az oldal. A min-width és max-width segítségével meghatározhatjuk egy elem minimális és maximális szélességét, ezzel rengeteg fölösleges kódtól megkímélve magunkat.
  • Rugalmas elrendezés: Ha szeretnéd megszabni, hogy egy sorban milyen hosszú szöveg kerülhet, akkor a doboz méretéhez igazodó betűméretre is szükség lesz. A rugalmasság eléréséhez ismét használhatod a max-width és min-width tulajdonságokat vagy használ média lekérdezést.
  • Képernyőméret függő elrendezés: Az ilyen típusú elrendezés hasonlít a média lekérdezéshez, azonban itt egy Javascript vált a különböző stílusok között.

Elrendezési Rács

Ebben segít: modularitás, hatékonyság Tervezéskor a függőleges és vízszintes (általában nem látható) segédrács használata nem új dolog, már századokkal ezelőtt is használták, azonban a webes dizájn területén csak néhány éve vált népszerűvé. Népszerűségének jó oka van: A segédrács egységessé teszi a dizájnt az emberi szem számára, amellett, hogy a letisztultság és rendezettség hatását kelti.

A segédrács segít a moduláris dizájn létrehozásában és hatékonyabbá teszi a fejlesztés folyamatát is. A bővítés egyszerű, hiszen minden elem mérete meghatározott, ezért nem kell a megfelelő méret kiszámításával bajlódni. Emellett a méretek megváltoztatásakor is egyszerűbb dolgunk van, ellentétben a segédrácsot nem használó dizájnokkal. Például, minden oszlopnak a rácsban meghatározott szélességűnek kell lennie, egyesek pedig annak lehetnek többszörösei is lehetnek. A kötött méreteknek köszönhetően bármilyen blokkot szabadon mozgathatunk ugyan azon az oldalon vagy akár egy másik oldalra is áthelyezhetjük (akár a stíluslap változtatása nélkül is). Legrosszabb esetben az új oszlop méretéhez kell igazítani a blokk szélességét.

Segédrács

Hatékony CSS fejlesztési gyakorlat

Ebben segít: modularitás, hatékonyság

Az eddig átvett CSS3 technikák és segédrácsnak köszönhetően sokkal könnyebben fejleszthetünk, tarhatunk karban és varázsolhatjuk modulárissá a dizájnunkhoz tartozó stíluslapot. Viszont van itt még érdekes CSS technika, amit az eddigiekkel együtt is alkalmazhatunk. Most elérkeztünk a cikkben ahhoz, hogy a leg optimálisabb CSS fejlesztésről beszéljünk, a újra felhasznosításról.

CSS Keretrendszer

A CSS keretrendszerek előre elkészített és válogatott stílusokat tartalmaznak, így a tesztelések és próbálgatások nagy részének búcsút mondhatunk. A CSS keretrendszerek nagyon különbözőek, némelyik sok részletre kitér, míg van, ami éppen csak az alapvetőekkel foglalkozik, azonban a népszerűbbekben több közös tulajdonság is van, többségük rendelkezik valamilyen elrendezési ráccsal, ill. szöveg, navigáció, űrlap (elem), kép formázással. Egy új projektnél érdemes már az elején saját keretrendszert készíteni a főbb ID-k és osztályok számára, ezzel a későbbi munkát javában megkönnyítve.

Egy jó CSS keretrendszer szilárd kiindulópontot ad és rengeteg időt takarít meg a fejlesztésből, tesztelésből, finomításból és a későbbiekben a bővítésből. Emellett a veled párhuzamosan dolgozók is sokkal könnyebben megértik, mi mire szolgál, ezzel fölösleges időpocsékolástól és stressztől szabadítod meg nem csak önmagad, hanem társaid is. A keretrendszer emellett sokat segít a modularitásban, mert hosszú és bonyolult osztályok helyett, több, kisebb és egyszerűbb osztállyal garantálható azok újrahasználhatósága (persze, ez a módszer abban is segít, hogy ne kelljen minden új elemhez új osztályt készíteni).

A keretrendszereknek azonban vannak hátrányai is. A publikus keretrendszerek (szemben a saját készítésűekkel) általában nagy méretűek, hogy bármilyen lehetséges tartalmat megfelelően tudjanak formázni. Ha több darabba vannak felszeletelve, akkor megnövelik a HTTP lekérdezések számát, ezzel lassítva az oldalt.

Az 5 népszerű keretrenszer megtalálható itt (angol).

Objektum Orientált CSS (OOCSS)

Nicole Sullivan alkotta meg az Objektum Orientált CSS (OOCSS) fogalmat. A fogalom olyan önállóan és “életképes” HTML részletekről (modulok) szól, amik az oldalon bárhol elhelyezhetők fennakadás nélkül és bármilyen osztály alkalmazható rájuk. Az OOCSS néhány főbb jellemző:

  • elsődleges osztályok ID helyett
  • alapvető osztályok létrehozása, amik később más osztályokkal is bővíthetőek (az elemen)
  • olyan szelektorok és osztály nevek kerülése, amik helyhez kötöttek
  • modulok méretbeli kötöttségeinek elhagyása, hogy könnyen áthelyezhetőek legyenek
  • az elemek és tartalmazó elemek formázásának szétválasztása

Az OOCSS célja, hogy a jövőben sokkal hatékonyabbá válhasson a CSS fejlesztés, valamint hogy a CSS sokkal modulárisabb legyen a jelenlegi redundáns helyett. Emellett persze ezzel a technikával a CSS fájlok mérete is csökkenthető.

CSS Generálás

A CSS írás egyre gyorsabb, ha gyorsabban is írhatnánk CSS-t akár egy szoftverrel, miért is ne tennénk meg? Tévedés ne essék, nem azt akarom ezzel reklámozni, hogy senki se tanuljon CSS-t és használjon programokat a teljes stíluslap legenerálásához. Ez egy nagyon rossz ötlet lenne. Viszont az a tény, hogy vannak olyan jó minőségű programok, amik segítségével gyorsabban és könnyebben nekiláthatunk egy CSS dizájnhoz, nagyon csábítóak. Persze ezek a programok nem egy teljes stíluslap elkészítésére születtek, hanem a főbb részek, alapvető struktúra legenerálására.

Nagyon sok generátor létezik, nem egyszerű megtalálni a személy szerinti leg megfelelőbbet, de ha mégis úgy gondolod, megtaláltad, alaposan nézd át a kapott fájlt. Ha érvénytelen, túl nagy vagy ocsmány kódot hagy, egyszerűen ne használd. Nem éri meg. Néhány hasznos cikk:

Online CSS generátor (magyar, ingyenes és minimalista generátor)
50 nagyon hasznos CSS eszköz (angol)
35 CSS életmentő a hatékony Web dizájnért (angol)
50 hasznos dizájn eszköz a szebb tipográfiáért (angol)

CSS teljesítmény

Ebben segít: hatékonyság

Az elkészült CSS alapú weboldalnak ugyanakkor annyira jól kell teljesítményt kell nyújtania, amennyire csak lehetséges. Az eddig átvett technikák segítségével kisebb és kevesebb fájlt kell használnunk egy dizájnhoz, aminek köszönhetően sokkal gyorsabbá vált az oldalad. Van még néhány CSS technika, amivel növelhető a teljesítmény.

CSS tömörítés

A tiszta CSS írásához fontos a gyorsírás, a szelektorok megfelelő csoportosítása és az átlátható szintaxis. Sajnos ahhoz, hogy átlátható maradjon a CSS sortörésekre, tabulátorokra, szóközökre és megjegyzésekre van szükség, míg ezek a kód értékét nem javítják és nem is rontják. A leg optimálisabb, ha ezeket a fölösleges karaktereket eltávolítjuk a CSS fájlból. Ezt megtehetjük saját kezűleg is, de több online eszköz is rendelkezésünkre áll a CSS fájl “tömörítéshez”.

10 olnine eszköz és alkalmazás az optimális CSS-ért

CSS Sprites

A CSS Sprites egy CSS technika, amit Dave Shea alkotott meg. Lényege az, hogy egy oldal képeit (akár összes képét) egy hatalmas képbe gyúrjuk, aztán a background-position segítségével a megfelelő helyre igazítjuk. Ezzel a technikával rengeteg fölösleges HTTP lekérdezéstől szabadíthatjuk meg az oldal látogatóit. A technika nem új, azonban csak a közelmúltban vált népszerűvé.

CSS Sprites

Az Apple is a CSS Spirites technikát használja.

Betűk lecserélése, beágyazása

Ebben segít: fokozatos javulás, tipográfiai sokszínűség

@font-face

A @font-face a CSS3 talán egyik legnagyobb újdonsága, segítségével saját betűtípusokat alkalmazhatunk, amik “web font” néven terjedtek el. Használata olyan egyszerű, mintha egy képet illesztenénk az oldalunkba. Szerencsére a @font-face támogatottsága nagyon jó, viszont böngészőtől függően sok minden eltérhet (pl.: anti-alias, életlenítés). Emellett sajnos sok betűstílus nem teszi lehetővé az ilyen felhasználási módot. (Az első részben részletesebb leírást olvashatsz.)

@font-face

Sam Howat oldala a @font-face segítségével olyan betűstílust használ, ami egyébként nem lenne elérhető a böngészőben.

@font-face 2

A Blue Sky Resumes is a @font-face segítségével formázza a fejlécben található szöveget.

Más módszer a betütípusok lecserélésére, beágyazására

A hagyományos @font-face helyett használhatunk más betűtípus beágyazó vagy lecserélő alkalmazást is:

  • Betűtípus beágyazás: Több olyan szolgáltatás is van, amit a @font-face tulajdonságot használja, de segítségükkel sok böngésző közti eltérés áthidalható. Ilyen szolgáltatás a TypekitKernest és a Google új Font API nevű szolgáltatása. Amellett, hogy segítenek a kompatibilitási problémák kiküszöbölésében hatalmas mennyiségű legális betűkészletet is el tudunk érni az oldalukon.
  • Betűtípus lecserélő technikák: Az olyan ingyenes technikák, mint a sIFR és a Cufón nem használják a @font-face tulajdonságot, helyette JavaScript és/vagy Flash-t használnak a betűtípus emulálására. Sajnos ezek használata esetén jogi problémák is felmerülhetnek a betűtípusokkal kapcsolatban.

Forrás: Smashing Magazine (angol)

Koller József írása –

Közel tíz éve foglalkozom informatikával, azon belül főként a webfejlesztéssel. Nem vagyok designer, de ettől teljesen függetlenül rajongok a szépen megtervezett grafikákért. Munkám első sorban a háttérben zajlik, ugyanis "kódolással" foglalkozom.

  • Ha tetszett a cikk, osztd meg!

Eddig 1 hozzászólás érkezett. Szólj hozzá!

  1. Speedy

    Bravó,csak gratulálni tudok. [igaz 1-2 részt kihagyva olvastam el]

A kommentelési lehetőség zárolva van ehhez a cikkhez.