Modern CSS3 (1. rész): Alapvető jellemzők

Modern CSS

A jó öreg böngészők és a jó öreg technikák már lassan kimennek a divatból, épp itt az ideje, hogy elsajátítsunk valami újat és fantasztikusat. Elérkezett az idő, hogy belekukkantsunk a CSS3 és a HTML5 adta lehetőségekbe és elsajátítsuk azokat, hiszen a webes dizájn új fegyverarzenálját képviselik.

Sajnos a technika fejlődésével sokkal több dologra  kell majd oda figyelnünk. Egyre több böngésző és még több különböző eszköz (PC, mobil eszközök, PDA stb.), ami nagy fejfáját a legtöbb dizájnernek.

Ebben a cikkben nem a dizájn trendekről és stílusokról lesz szó, amik a modern CSS alapú elrendezéseket alakítják. Ugyanis ezek  nagyon gyorsan változnak, helyette inkább a széles körben elterjedt és népszerű alapfogalmakat fogjuk megismertetni veled. Például a tartalom elrendezése és megjelenítése még mindig nagyon fontos a CSS oldalakon, de a modern CSS több, eddig jelentéktelen eleme is fontos szerephez jut. Ami jellemző a modern CSS-re:

  • Fokozatos javulás
  • Alkalmazkodás a felhasználókhoz
  • Moduláris
  • Hatékony
  • Tipográfiai sokszínűség

Fokozatos javulás

A fokozatos javulás azt jelenti, hogy olyan egyszerű dizájnt készítünk, aminek a tartalmát és teljes funkcionalitását böngészőtől függetlenül ugyan úgy el lehet érni. Viszont minél újabb technológiát támogató böngészőt használunk, annál több vizuális és szerkezeti elem jelenik meg a dizájnban.

Az, hogy egy dizájn két böngészőben másként jelenjen meg nem újkeletű dolog. Már évekkel ezelőtt is hangsúlyozták, hogy a betűkészletek és megjelenítésük, szín tónusok, pixelszámolás és egyéb technikai tényezők miatt az eltérő platformok és böngészők mindig máshogy jelenítenek meg egy dizájnt. A legtöbb dizájner éppen ezért kerüli a “pixel tökéletességet” és inkább megbarátkozik a gondolattal, hogy minden böngészőben egy picit másként fog kinézni a dizájn. Az elmúlt években azonban egyre nőtt böngészőhöz igazodó dizájnok száma, ezek a dizájnok néha meglepően sok különbséget mutatnak két böngészőben.

Például a tweetCC weboldal rengeteg CSS3 tulajdonságot tartalmaz, ami még vonzóbbá teszi megjelenését. Például a szöveg mögötti árnyék, több oszlop és különböző színű “háttérképpel” (anélkül, hogy ténylegesen különböző képeket használna). Az effektek más-más böngészőkben eltérőek, köztük a legszegényesebb az IE6. Ez persze miért is lenne probléma, hiszen a szöveg IE6-ban is kiválóan olvasható és a dizájn is egész jó.

TweetCC - Safari

tweetCC Safari böngészőben

tweetCC IE

tweetCC IE6-ban

A CSS3 alkalmas böngészőkben, mint például a Safari (felül) több olyan vizuális effekt látszik, ami az Internet Explorer 6-ban (alul) nem. Ezek a jelentős különbségek teljesen rendben vannak, a Weben hozzá kell szokni.

A fokozatos javulásnak jótékony hatásai:

  • Robosztusabb oldal
    Ahelyett, hogy először egy teljesen kész  és modern technológiákkal megtömött dizájnt készítenénk, amit aztán le kell butítani régebbi böngészőkre. Kezdjük inkább egy “alapvető” oldallal, ami a régi böngészőkön kiválóan fut, és erre építsük rá az újabb technikákat.
  • Boldogabb felhasználók
    A mobil eszközök vagy régebbi böngészőket használó látogatók minden alapfunkciót elérnek és az oldal kinézete is megfelelő lesz számukra. Míg azok, akik egy teljesen friss, “még meleg” böngészőt használnak az alapvető funkciók mellett további extrákhoz jutnak mind funkcionalitás, mind dizájn terén.
  • Kevesebb fejlesztési idő
    Nem kell fölösleges órákat azzal tölteni, hogy minden böngészőben ugyan úgy nézzen ki az oldal, sem arra, hogy a teljes funkcionalitásában pompázó oldalt lebutítsa egy régebbi böngésző szintjére.
  • Kevesebb karbantartási idő
    Ha egy újabb böngésző vagy egy újabb technológia lát napvilágot, lehet, hogy problémát fog okozni a már meglévő funkciók működésében. Abban az esetben, ha fokozatosan építettünk az alap oldalra, egyszerűen hozzátesszük az új funkciót az alap oldalhoz és nem kell bajlódnunk azzal, hogy minden változatot módosítsunk.
  • Még több móka
    Ha fokozatosan építesz az alap oldalra, nem kell megvárnod, amíg egy régi böngésző eltűnik a színről. Helyette az új technikák már megjelenésük pillanatában beépítheted az oldaladba.

Alkalmazkodás a felhasználókhoz

A modern CSS dizájnoknak igazodnia kell a böngészők, eszközök, képernyőméretek, betűméretek, segéd technológiák és egyéb tényezők széles skálájához. Néhány éve egy kézen meg lehetett számolni, milyen felbontások népszerűek. Manapság azonban a 10″ eszközökötől egészen a 30″ widescreen monitorokig bármi lehetséges, nem is beszélve a 30″ mellet mikroszkopikusnak tűnő mobil kijelzőkről.

Smart Columns - Minta

Soh Tanaka “Smart columns with CSS and jQuery” című cikkében leírja a technikáját, ami segítségével az elrendezés a pillanatnyi felbontáshoz igazodik, jobban mondva szélességéhez.

Olyan dizájn készítése, ami minden esetben kiválóan működik, nem lehetséges. De tehetünk azért, hogy minimálisra csökkentsük a hibás megjelenések számát. A CSS3 sokkal rugalmasabb, mint elődei, így kezünkben a fegyver, hogy a lehető legjobb kompatibilitású dizájnokat készítsünk. CSS elrendezéseknél érdemes figyelembe venni az alábbiakat:

  • Böngésző
    A dizájn kihasználja a legújabb böngészők adta lehetőségeket? Kifogástalanul működik régi böngészőkkel is?
  • Platform
    Jól működik PC-, Mac-en és Linux-on is?
  • Eszköz
    A dizájn alkalmas kis mobil eszközökön való használatra is? Hogy néz ki egy teljes felbontású mobil eszközön (pl.: iPhone)?
  • Felbontás
    Egységes marad a dizájn több, különböző felbontásban is? Különböző felbontásokban is szép és olvasható a dizájn? Ha a dizájn alkalmazkodik a felbontáshoz nem lesz-e túl szűk vagy túl széles (használjuk ki a min-width és max-width lehetőségeit)?
  • Betűkészlet
    A dizján betűméretei megfelelőek különböző betűtípusokkal? A dizájn egységes marad a betüméret menet közbeni változásával? Szép és könnyen olvasható a mérete?
  • Szín
    A tartalom olvasható feketén-fehéren? Elég kontrasztos színvakoknak vagy gyengén látóknak?
  • JavaScript függőség
    A dizájn működik Javascript nélkül?
  • Képfüggőség
    Olvasható marad-e az oldal tartalma képek nélkül?
  • Akadálymentesített
    Az oldal működik egér nélkül? Használható érintőképernyővel?

Sajnos ez nem egy túl átfogó lista, de a legfontosabb szempontokat tartalmazza egy dizájnnal kapcsolatban. Mindig fontos, hogy a lehető legszélesebb felhasználó tábornak legyen megfelelő az oldal, hisz ezen múlik a népszerűség.

Moduláris

A modern weboldalak már nem egyszerű statikus HTML oldalak
gyűjteményei. A tartalom részei és a dizájn elemek az egész oldalon használhatók és akár más weboldalakkal is megoszthatók, főként a tartalomkezelő rendszerek (CMS), RSS és a felhasználók által készített tartalmak népszerűsödése miatt. A modern dizájn elemeknek alkalmazkodniuk kell a változó környezetükhöz és változó tartalmukhoz is.

Objektum Orientált CSS

Az Object Oriented CSS Nicole Sulivan kísérlete egy keretrendszer létrehozása, ami lehetővé teszi a fejlesztőknek, hogy gyorsan, könnyen karbantartható, szabványokon alapuló kódot írjanak.

A moduláris CSS kínálata (a használt technikától és eszközöktől függően):

  • Kisebb fájlméret
    Használatával csupán maroknyi osztályra van szükség, nem kell megszámlálhatatlanul sok ID, amik csak korlátozott körben használhatók. Sokkal kevesebb kóddal is elérhetjük ugyan azt a hatásfokot.
  • Kevesebb fejlesztési idő
    A keretrendszer, standard osztályok és moduláris CSS eszközök segítségével nem kell minden új weboldalnál “ismét feltalálni a kereket”. A már előre elkészített osztályok segítségével átugorható a tesztelések és optimalizálások nagy része.
  • Kevesebb karbantartási idő
    Ha új tartalommal bővül az oldal, nincs szükség új osztályok létrehozására és a régiek módosítására. Ugyan akkor, a CSS rendezettsége és kis mérete miatt, sokkal gyorsabb a hibakeresés és frissítés.
  • Könnyebb karbantartás mások számára
    Amellett, hogy számodra is kevesebb időt igényel a karbantartás, a jól szervezett és beszélő nevekkel ellátott osztályok megkönnyítik azok dolgát is, akik nem vettek részt az alap stíluslap elkészítésében. Képesek lesznek megtalálni azt, amit keresnek és megfelelően módosítani. A CMS-eknél jól működik ez az elv, az oldal komolyabb ismerete nélkül is könnyen elvégezhető minden módosítás, hiszen az oldal alapja közismert.
  • Rugalmasabb dizájn
    A keretrendszernek és elrendezési rácsnak köszönhetően különböző oldalakon könnyedén válthatsz a az elrendezések közt. Ráadásul a dizájn újabb tartalom esetén sem omlik össze.
  • Egységesebb dizájn
    Egy osztály újra felhasználható más elemeken is, így fő stílusjegyeikben megegyeznek, ezáltal egységesen tartva a dizájnt. A CMS és keretrendszerek éppen az egységességben segítik a dizájnokat.

Hatékonyság

A modern CSS dizájnoknak két módon is hatékonynak kell lenniük:

  • Hatékonyság fejlesztők szemszögéből
  • Szerver oldalon és böngésző oldalon is egyaránt

Fejlesztőként, egyet érthetünk, hogy a mi szemszögünkből is fontos a hatékonyság. Ha időt és pénzt spórolhatnál amellett, hogy ugyan olyan kiváló végeredményt kapsz, akkor miért ne használnál hatékonyabb CSS technikákat? Sajnos a felhasználói oldal hatékonysága gyakran nem kap elég figyelmet. Az internet egyre gyorsabb és gyorsabb, az oldalak betöltési ideje még mindig fontos a felhasználók számára. Az internet sebességének növekedésével a felhasználók az oldalak gyorsulását is elvárnák, ezért érdemes odafigyelni rá. Egy oldal betöltésénél másodpercek is sokat számítanak.

Már megvitattuk, hogy a moduláris CSS hogyan csökkenti a fejlesztési és karbantartási időt és hogyan teszi gyorsabbá, hatékonyabbá. Számtalan eszköz áll a rendelkezésedre, amivel gyorsabban írhatod a CSS kódjaid, amit majd a második részben ismertetünk is veled. A CSS fejlesztésed során pedig rendelkezésre áll rengeteg új CSS3 effekt, amik segítségével sokkal gyorsabban és könnyebben tudod ugyan azt a hatást elérni, mint sokáig tartó macerával és különféle trükközésekkel.

Több CS3 technika használata gyorsabb és hatékonyabb. Vegyük példának a lekerekített sarkakat. A hagyományos technikában több DIV és kép kellet hozzá, míg a CSS3-ban nem szükséges hozzá semmilyen kép sem, így csökkentve a HTTP lekérések számát és gyorsabbá téve az oldalt. Képek nélkül a letöltendő fájlok is kisebbek lesznek. A CSS3 módszer emellett nem igényel további DIV-eket, ami csökkenti a lapozó fájl méretét és megint csak gyorsítja az oldal betöltődését. Egy olyan oldalon, ahol sok ilyen lekerekítés volt, hatalmas változást jelenthet egy ilyen volumenű változás.

Tiszta CSS írásnál a gyorsírás képessége kifejezetten előny, a csoportosított szelektorok és a megfelelő szintakszis egyaránt javíthatja a teljesítményt. Sok CSS trükk is nagyban drasztikusan javíthat az oldal teljesítményén, ezek jelentősége szerencsére az elmúlt időben egyre csak javult. Például a CSS Sprites technika segítségével drasztikusan csökkenthető a letöltendő képek száma. A technika lényege, hogy egy nagyobb kép tartalmazza a sok kisebbet, a szükséges képrészletet pedig a background-position tulajdonság módosításával tudjuk elérni. Elsőként Dave Shea írt róla 2004-ben, azóta több nagy weboldal is használatba vette (többek közt a Google). Ez a megoldás nem csak nagyvállalatok weboldalai esetében, hanem kis oldalaknál is nagymértékben csökkentik a HTTP lekérdezések számát. Emellett lehetőségünk van a CSS fájlok tömörítésére is, amire a második részben fogunk kitérni.

Tipográfiai sokszínűség

Az eddigi témáinkhoz első látásra kevésbé kapcsoló témakörhöz érkeztünk. Téved, aki azt hiszi, hogy a megfelelő betűméretekről és szöveg elrendezésekről lesz szó. Helyette inkább a széles körben elterjedt olvashatóságról és egyedi kinézetről szóló fogalmakat vitatjuk meg, amiket az új CSS3 segít világra. A tipográfia a webdizájn leggyorsabban fejlődő területe. Pontosan emiatt, nekünk is fejlődnünk kell!

Mostanáig a dizájnerek csak olyan betütípusokat használhattak, amik a látogató számítógépén is megtalálhatóak voltak. A képcserés trükkök és ügyes technikák (sIFR) megjelenésével az elmúlt években megnyíltak a kapuk, azonban ezek egyikével sem lehetett túl könnyen dolgozni. Az elmúlt évben nagy lépés történt a betütípusok webes felhasználása terén, hiszen a CSS3 @font-face lehetővé teszi, hogy saját betütípust használjunk. Sajnos még ezekez is szükség van egy kis trükközésre, de jó hír, hogy könnyedén használhatók. Ilyen például a Cufón vagy Typekit.

A @font-face lehetővé teszi, hogy a szerveren található betűtípust használjuk, amit “Web font”-nak neveznek. Olyan egyszerű használni, mintha egy képet illesztenénk az oldalunkba, de általa elveszítjük a függőségünk a kliens oldalra telepített betűtípusoktól. Vége használhatod azokat a betütípsuokat, amiért már korábban megvesztél. Nincs határ.

@font-face működés közben: Teehanlax.com

Teehanlax

Craigmod

Craigmod

Nicewebtype

NiceWebType

A fenti három kép jó példa a @font-face képességeire.

A legnagyobb probléma ezzel kapcsolatban – eltekintve a böngésző kompatibilitástól – az, hogy sok betűtípust nem licence miatt nem lehetne ilyen módon használni. Ez az a rész, ahol az olyan @font-face szolgáltatások lépnek képbe, mint a TypekitFontdeck vagy Kernest. Olyan betűkészletek készítővel állnak kapcsolatban, akik lehetővé teszik a betűkészleteik “webes kölcsönzését”. Csupán fel kell iratkozni ezekre a szolgáltatásokra és máris kibérelhetjük magunknak a kiválasztott betűtípust, így elkerülve a későbbi jogi problémákat.

Typekit - For a beautiful web

For A Beautiful Web oldal a Typekit betütípus beágyazó szolgáltatását használja saját weboldalán nevénhez és bevezető szövegéhez.

Kernest - Ruler of the Interwebs

Ruler of the Interwebs oldal a Kernest betütípus beágyazó szolgáltatását használja saját oldalának nevéhez és címsorokhoz.

Még hosszú ál előttünk ezen a téren, de a tipográfia egyre fontosabbá válik a világhálón. Hogy a dizájnod valóban kitűnjön a többi közül, használd ezeket a modern tipográfiai technikákat, amikről a következő részben még többet elárulunk.

A cikk egy angol cikk alapján készül, ami elérhető a Smashing Magazine oldalán.

Hamarosan jön a következő rész…

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!