A HTML 5 és CSS 3 újdonságai

Beindult a marketing gépezet a HTML 5 kapcsán, viszont viszonylag keveset hallani arról, hogy a marketing dumákon kívül miről is van szó pontosan (bár korábban például már én is írtam a HTML 5-ről). A Flash leváltására alkalmas csodaszerként, a Google új fegyvereként, a HTML webkettőjeként szokás emlegetni, holott a történet egész másról szól. Egy néhol száraz, de igen érdekes specifikációról. Sőt, a HTML 5 mellett itt van a CSS 3, és itt van az SVG és egyéb más lehetőségek is. Egy több bejegyzésből álló sorozatban megpróbálom összeszedni, hogy mi is volt a HTML 5 és a CSS 3 története, hogy pontosan milyen új eszközöket kapunk ezekkel a specifikációkkal, s hogy hol tart most ezeknek a böngészőkben implementálása.

HTML 5 – így történt

A Wikipédia HTML 5 szócikke nem túl bőbeszédűen, de egész jól összeszedi, hogy hogyan is jutottuk el a HTML 5 mai állapotáig. Az egész a WHAT Munkacsoport (Web Hypertext Applications Technology Working Group) megalakulásával kezdődött 2004 júniusában, pár hónapos előkészítő munka után. A csoport alapítói az alternatív (IE-hez képest) böngészőgyártók, konkrétan az Apple (Safari), a Mozilla Alapítvány (Firefox) és az Opera Software (Opera) voltak, céljuk egy a W3C-tól független, annál hatékonyabban működő, nyitott, laza összefogás volt. A Microsoft eleinte ki lett hagyva a játékból, később pedig egy ideig még nem ismerte el a törekvéseket, de az IE 8 kapcsán már elkezdett implementálni részleteket, és az IE 9-ben további implementációk várhatóak. A W3C akkoriban nem a rugalmasságáról volt híres, a (nem alacsony tagdíjat fizető) tagok vehettek csak részt a döntésekben és az irányok meghatározásában, és sokkal inkább az akadémiai hozzáálláson, mint a praktikumon volt a hangsúly. A problémák a W3C ajánlásokban szereplő, de a böngészőkben nehezen megvalósítható, vagy egyszerűen csak nem használt funkciókban (lásd például a CSS 2.1 megjelenésének oka, vagy az XHTML 2.0 teljes csődje) jelentkeztek.

A WHATWG a Web Forms 2.0, Web Apps 1.0 és Web Controls 1.0 dokumentumok elkészítésével kezdett el foglalkozni. A Web Forms célja a HTML 4.01-ben definiált form elemek olyan jellegű bővítése volt, melyek a régi böngészőkkel is kompatibilisek, de igazodnak a kor igényeihez, és JavaScripttel a régi böngészőkben is megvalósíthatóak. A Web Apps egy sokkal összetettebb, a webalkalmazásokat támogató, már létező és teljesen új fejlesztések szabványos irányba tereléséről szólt. Új HTML elemektől kezdve a session kezelés, a helyi adattárolás, WYSIWYG szerkesztés, 2D és 3D canvas, különböző kommunikációs megoldások és további kisebb-nagyobb fejlesztések mind a HTML leíró nyelvet, mind pedig a DOM-ot illetően az, amit magába foglalt a specifikáció. Végül a  Web Controls célja olyan lehetőségek definiálása volt, melyek lehetővé tennék új “widgetek”, kvázi HTML elemek definiálását és működésének leírását.

Az új ajánlások közzététele és tervezése eleve a W3C ajánlások formátumával kompatibilis módon zajlott, és célként volt kitűzve, hogy amennyiben lehetséges, a W3C fogadja majd be a dokumentumokat. A szabványok kialakítása ezután nagy lendülettel elkezdődött, új elemek is beléptek, és volt olyan is, amiről kiderült, hogy mégsincs rá szükség, és 2006-ban indult egy blog is, mely folyamatosan beszámol azóta is a fejleményekről. 2007-ben a W3c bejelentette, hogy újra nekifut a HTML történetnek, ekkor már nyílt levelezőlistával, és határozottan együttműködve a WHATWG-vel is.

A Web Apps 1.0-ba végül beleolvadt a Web Forms 2.0, és átnevezték HTML 5-re, a Web Controls pedig időközben elhalt a nem túl nagy érdeklődés, illetve a hasonló célú XBL 2.0 miatt.

HTML 5 – itt tartunk

A HTML 5 fejlesztése kifejezetten aktív. A specifikálás azóta sem állt meg, s bár elég jól körvonalazódott már a HTML 5 tartalma, továbbra is előfordulhat, hogy új elemek kerülnek be, vagy kikerülnek kevésbé fontos elemek, sok részlet pedig folyamatosan finomításra kerül. A böngészőgyártók elkezdeték implementálni a különböző lehetőségeket, összességében elmondható, hogy az összes szóba jövő böngésző jó úton halad, s még ha az Internet Explorer le is van maradva, de a legtöbb dolog ebben a böngészőben is implementálva lesz szépen lassan.

Egy bekezdésben nehéz lenne összefoglalnom, hogy mennyi részlete van a specifikációnak, nagyon-nagyon komplex. Nagyon sokat lehet tanulni belőle nem csak a jövőről, de arról is, hogy most hogyan működnek a böngészők és úgy általában a web, hiszen a céljai között az eddig nem dokumentált, de az évek során kompromisszumos megoldásként összeállt viselkedések definiálása is szerepel. A dokumentum nem csak a HTML elemeket, hanem a DOM lehetőségeit, illetve egyéb, a HTML feldolgozásához, megjelenítéséhez kapcsolatos részleteket is leír. Íme egy önhatalmúlag összeállított kivonat:

• oldalvázat, szekciókat leíró elemek: body, section, nav, article, aside, h1-h6, hgroup, header, footer, address
• új szöveges elemek, mint például: time, progress, meter
• új tartalmat beágyazó elemek, mint például: figure, video, audio, source, canvas, map
• az újfajta beviteli mezők, form elemek és a komplex formok leírását lehetővé tevő jelölők, elemek
• interaktívitást lehetővé tevő elemek: details, command, menu
• microdata – adatok HTML-be ágyazásának és kiolvasásának módja
• a HTML és a JavaScript kapcsolatát, események működése
• offline alkalmazások létrehozásának lehetősége
• linkek, kapcsolódó tartalmak leírásának (feedektől a nofollow-on át a faviconokig) módja
• a felhasználói interakcióval kapcsolatos lehetőségeket, mint például: szöveg kiválasztása, WYSIWYG szerkesztés lehetősége, helyesírás ellenőrzés, drag’n'drop
• kommunikáció különböző domainek között az oldalon belül és a külvilággal
• HTML vs. XHTML kérdést és a feldolgozás mikéntje
• a megjelenítés az alapvető kérdésektől a betűtípusok kezeléséig
• az idejétmúlt elemeket mint például: applet, marquee, frame, DOM lehetőségeket és az ezekkel kapcsolatos hibakezelést

Elég szabadon válogattam a dokumentumból részleteket, de a lista hosszúságából talán látszik, hogy nem egy 5 perces olvasmányról van szó, s hogy a böngészőgyártók elé igen komoly feladatok vannak kitűzve. Hogy tovább árnyaljam a képet, az olyan lehetőségek például, mint a canvas elem, itt a felsorolás egyik pontjában egy belső felsorolás részeként szerepelnek csak, holott egy könyv teljes fejezetét, vagy akár egy könyvet is lehetne szentelni a témának.

CSS 3 – így történt

A CSS 3 egy egészen más utat járt be, a kezdetektől W3C projektként fut. Itt is érdemes elolvasni a Wikipedia CSS bejegyzését, jól mutatja be a CSS múltját. A CSS 2 1998 májusában jelent meg, de a böngészők már ekkor komoly lemaradásban voltak, a Macintoshra kiadott Internet Explorer 5.0 a CSS első változatát is csak két évvel a második változat kiadása után, 2000-ben implementálta, és ezzel az első, legmodernebb böngésző volt akkor. A második változatot évekkel később sem tudta egyik böngésző sem megvalósítani teljes egészében annak viszonylagos összetettsége miatt. A helyzet normalizálása érdekében hozta ki a W3C a CSS 2.1-es változatát, mely alapvetően egy butított megvalósítás volt, a praktikumot előtérbe helyezve, és igazodva az akkori böngészőkhöz kihagyták belőle a “megvalósíthatatlan” részeket.

Tanulva a hibáiból a CSS 3 immár modularizált lett, vagyis különböző funkciók mentén modulokra robbantották az újdonságokat, melyeket a böngészők így “csomagban” tudnak megvalósítani, vagy akár átmenetileg figyelmen kívül hagyni. A CSS 3 egyes moduljai közel végleges, más moduljai kezdetleges állapotban vannak (helyzet), hatalmas mozgolódás nincs is ezirányban a specifikáció terén (a teljesen hiányos roadmap), havonta egy-két dokumentum frissül. Az implementációt illetően a böngészőgyártók bár nem rohannak, de jó ütemben implementálják az érdekesebb modulokat, adott funkciókat egész jól valósítanak már meg, sok dolog van még így is hátra.

A CSS 3 fejlesztése is sokkal nyitottabb folyamat már, mint korábban volt, a levelezőlistához bárki csatlakozhat, és véleményt, javaslatokat formálhat az irányokról, problémákról.

CSS 3 – itt tartunk

A CSS 3-nak vannak izgalmas, már-már eszement részei is, érdemes átfutni a specifikációt, és ismerkedni egy kicsit a várható irányokról, de ezeket én is igyekszem majd összefoglalni. Ahogy a HTML 5-nél, itt is összeszedtem egy listát, mely a CSS 3 különböző moduljait, és azok szerepét foglalja össze:

• CSS Template Layout: a CSS 2.1-ben “nincs” olyan elem, mely oldalak layoutjának leírására, meghatározására szolgálnak (a float-ok ilyen célú használata például egy kompromisszum csak), a CSS Template Layout ezt a hiányosságot próbálja meg orvosolni. Elsőre elég vad és szokatlan, de mégis hatékonynak tűnő leíró megoldással.
• CSS Aural Style Sheets: a CSS alapvetően a vizuális megjelenítésről szól, ez a CSS 3 modul viszont azt írja le, hogy hogyan lehet hangokat kapcsolni a dokumentumokhoz, illetve az eseményeihez (hover, oldal betöltődés, stb.), továbbá hogy hogyan lehet ezeknek a hangoknak a különböző tulajdonságait befolyásolni (balansz, hangerő, stb.).
• CSS Backgrounds and Borders: a CSS 2.1 szabvány viszonylag puritán lehetőségeket kínál egy adott block megjelenésű elem hátterének és keretének beállításához. Ez a modul azt írja le, hogy hogyan rendelhetünk akár több háttérképet is egy elemhez, hogy hogyan állíthatjuk be azok pozícióját, kivágását és torzítását, illetve a kereteket illetően hogyan lehet a vonalak helyett képeket használni, vonalas keretet hogyan lehet lekerekíteni, s hogyan lehet árnyékot beállítani.
• CSS Basic User Interface: formok különböző állapotaival kapcsolatos kiválasztók (Web Forms 2.0-hoz kapcsolódóan), a kerethez hasonló outline, egérkurzorok – az alapvető felhasználói interfész elemekről szól ez a modul.
• CSS Basic Box Model: szintén alapvető dolgokkal foglalkozó modul, mely a doboz modellről szól, a display tulajdonság különböző értékeiről, a float és clear hatásáról és viselkedéséről, az overflow-ról és hasonló témákról. Az eddig használt, de részleteiben nem definiált, az IE overflow-x, overflow-y lehetőségének “legalizálásáról” és teljesen új dolgokkal is foglalkozik ez a modul.
• CSS Extended Box Model: ami nem fért bele a  Basic modellbe – egyelőre ebben a modulnak még nem kezdődött el a publikus kidolgozása sem
• CSS Marquee: animált üzenősáv lehetőségek leírását teszi lehetővé, a doboz modell moduljából vált ki.
• CSS Cascading and Inheritance: ez a modul az olyan alapvető szabályokról, mint az öröklődés, egymásba ágyazás, különböző médiák kezelése szól, alapértelmezett értékek, szabályok súlyának számítása szól. Alapvetően az eddig nem tisztázott, de nagyjából ugyanúgy működő megoldások pontos dokumentálása a célja, nagy újdonságokat nem hoz be.
• CSS Color: a színek leírásának módjáról szól, ami újdonság benne, az legfőképpen a “negyedik dimenzió”, avagy a áttetszőség mint “szín” komponens kezelése.
• CSS Fonts: a betűkészletek kezelését foglalja magában ez a modul, újdonságot a betűtípusok méreteinek egymáshoz igazításával és a “letölthető”, avagy a felhasználó gépén nem jelen levő betűkészletek használhatóságával kapcsolatban hoz.
• CSS Generated Content for Paged Media: a Paged Media modulon felüli lehetőségek “oldal alapú” médiákhoz, mint például egy nyomtatott dokumentum verzió, vagy akár egy prezentáció. Olyanok vannak benne, mint dinamikus hivatkozások a dokumentumon belül (“lásd a 25. oldalon”), vagy például az oldal fejlécének/láblécének beállítása a dokumentum h1/h2/h3 (vagy bármilyen más) elemeinek segítségével.
• CSS Generated and Replaced Content: oldal tartalmak létrehozásáról, vagy cseréjéről szóló modul, “hivatalosan” ezzel lehet például egy szöveges fejléc elemet képre cserélni, vagy adott elemek elé/mögé beszúrni tartalmakat
• CSS Hyperlink Presentation: a linkek megjelenéséért, viselkedéséért felelős, például hogy mikor számít “aktívnak” egy link, de az is leírható a modulban foglaltak segítségével, hogy hol (új ablak, fül, stb.) nyiljon meg egy link.
• CSS Introduction: ez egy összefoglaló modul, ami egy bevezetést, áttekintést (fog) adni a CSS 3 lehetőségeiről – majd ha “kész” lesz.
• CSS Line Layout: a sorok függőleges igazítását, továbbá az összefüggő szövegek első karakterének, első sorának kiválasztóját írja le.
• CSS Lists: a különböző listák megjelenésének leirhatóságát szabályozza ez a modul, a számozástól kezdve képek elhelyezéséig a listaelemek elé.
• CSS Math: matematikai képletek, kifejezések (MathML) megjelenésének szabályozását végzi.
• CSS Multi-column Layout: szövegek több oszlopba renderelését megvalósító modul, az oszlopok számának megadásától az elválasztó “hézag” paraméterének megadásáig lehet szabályozni a megjelenítést.
• CSS Namespaces: az XML névtereinek támogatása CSS-ben is: a kiválasztók kiegészítése névtér támogatással.
• CSS Object Model: a DOM “szabvány” azt szabályozza, hogy hogyan érhetőek el és módosíthatóak a HTML és XML dokumentumok “kívülről” valamilyen (pl. JavaScript) programnyelv által, ez a modul ugyanezt írja le, csak a CSS tulajdonságok kapcsán.
• CSSOM View Module: egy dokumentum megjelenésének szabályozása valamilyen (pl. JavaScript) programnyelv által – konkrétan a dokumentum és elemek scroll pozíciójának állítása került bele ebbe a modulba, de foglalkozik a tartalmak kiválasztásával és az egér eseményekkel is.
• CSS Paged Media: a korábban már említett modul, mely az oldalak fejlécének, láblécének, oldalak sorszámozásának állításáért felelős.
• CSS Positioning: a position tulajdonság értékeinek pontos viselkedését szabályozó modul.
• CSS Presentation Levels: különböző megjelenési szinteket, lépéseket definiál, például egy prezentáció egyes oldalaihoz definiálhatunk lépéseket (hányadik lépés), és megadhatjuk, hogy ha az adott lépésnél (szintnél) vagyunk, akkor mi legyen látható.
• CSS Reader Media Type: ez a modul már megszűnt, de a különböző felolvasók támogatásáról szólt.
• CSS Ruby: egyes írásoknál (pl. kínai és japán) léteznek az olvasást segítő “meta” írásjelek, melyek például az adott “szó” kiejtését teszik egyértelművé – ezek az úgynevezett “ruby”-k. Ezek pozícionálását szabályozza le ez a modul.
• CSS Scoping: hogy pontosan mi is akarna lenni ez a modul, arról nem találtam konkrét információt, de a CSS Namespaces modulban létezik egy hasonló témakör – mely a kiválasztók működési területéről szól.
• Grid Positioning: a CSS Template Layout modul is megpróbál választ adni arra a kérdésre, hogy hogyan lehet leírni egy komplex oldal layoutját, ez a modul is ezért a területért felelős, s alapvetően “grid”, azaz háló alapú layoutok leírását teszi lehetővé, kevésbé vad szintakszissal, mint társa.
• CSS Speech: ez a modul azt szabályozza, hogy egy adott dokumentum hogyan prezentálható hang formában. Elég sok felhasználási lehetősége lehet az okostelefonoktól a navigációs rendszerekig.
• CSS Style Attribute Syntax: a HTML (és egyéb CSS-sel szabályozott dokumentumok) “style” tulajdonságának formátumát definiálja – ez az egyik olyan alapvető dolog, ami korábban nem igazán volt szabályozva.
• CSS Syntax: a CSS szabvány formátumának átfogó szabályozása, a leírónyelv filozófiáját foglalja magában.
• CSS Tables Module: a táblázatok megjelenéséért felelős modul.
• CSS Text: szövegek megjelenését szabályzó modul, az aláhúzástól kezdve a szövegek több sorra törésének leírásáig foglalja össze a terület kérdéseit.
• CSS Text Layout: folytatja az előző modul feladatait, a függőleges írásiránytól kezdve a jobbról-balra történő írások jelöléséig.
• CSS Line Grid: összetett szimbólumok vonalhoz igazodását leíró modul, mint például a japán szövegek karaktereinek egymás alá illesztése.
• CSS Values and Units: a CSS értékeinek (számok, szöveges színek, URL-ek stb.) és egységeinek (px, em, ex, stb.) pontos működését és leírását szabályzó modul.
• CSS Web Fonts: megszűnt, beleolvadt a CSS Fonts modulba.
• Behavioral Extensions to CSS: dokumentum elemekhez viselkedések csatolását leíró modul – kvázi új dokumentum elemek hozhatóak létre a segítségével (pl. egy <ledmatrix> elemhez hozzárendelhetünk egy külső URL-en – XBL leírónyelvvel – leírt viselkedést).
• CSS Flexible Box Layout Module Level 3: elemek box és inline-box megjelenéssel történő renderelését leíró modul.
• CSS Image Values Module Level 3: képekre hivatkozó CSS tulajdonságok (pl. háttérkép) szabályait írja le.
• CSS 2D Transforms Module: olyan kétdimenziós transzformációkat ír le, mint a mozgatás, nyújtás, forgatás, torzítás.
• CSS 3D Transformations Module: perpektívikus 3D alapú transzformációkat ír le, a kétdimenziós transzformációkat ruházza fel egy harmadik dimenzióval.
• CSS Transitions Module: átmenetek (oldal betöltődéstől kezdve a hover effektekig) viselkedését leíró modul.
• CSS Animations Module: mozgás és egyéb animáció leírása CSS segítségével: időzítések, állapotok, késleltetések.

Nem mindegyik modult fejlesztik persze aktívan, van, amelyik több éves – vagy azért mert befejezettnek tekinthető, vagy azért, mert nem volt rá komolyabb igény. Számos aktív modulról lehet viszont olvasni manapság, ezek megvalósításánál talán a WebKit (Safari és Chrome mögött) áll az élen.

A fentiekből jól látható, hogy vannak nagyon alapnak tekinthető modulok, melyek jól kidolgozottak, és a CSS filozófiáját, pontos szintaktikáját mutatják be, vagy már évek óta használt, de eddig pontosan nem definiált részleteket szabályoznak.

Összefoglalás

Mint a fentiekből is látható, izgalmas korba születtünk. Jópár évnek kell eltelnie, mire a HTML 5 és a CSS 3 többségét használni fogjuk majd tudni, de sok olyan részlet van, melyeket már ma is tudunk használni, vagy mert a “gracefully degradation” jegyében a felhasználó egy tökéletesen működő, csak fapadosabb megoldással találkozik az azokat nem támogató böngészőkben, vagy pedig azért, mert JavaScript vagy más megoldásokkal azokban a böngészőkben is működőképesek lehetnek, melyek alapvetően nem támogatják még azokat. Ahol ez a helyzet, s ahol ebből nem származik komoly hátrány, ott mindenképpen javaslom az újdonságok használatát, hiszen ezzel kényelmesebbé tehető a modern böngészőket használók élete, és látványos megoldásokat lehet kihozni a dologból.

Emlékeimből, illetve a különböző dokumentumokból, blogbejegyzésekből igyekeztem rekonstruálni a történteket, ha valaki másképp tud valamit, ne hezitáljon azt jelezni egy hozzászólás formájában. Folyt. köv.