Kam kráčí webový vývoj?
Poznámka: Je velice pravděpodobné, že jste už článek na podobné téma minimálně jednou četli, tak ten můj s klidem přeskočte.
Tento článek jsem chtěl původně napsat jako novoroční zamyšlení, ovšem od té doby uběhlo relativně hodně času, tak to bude zamyšlení skoro pololetní. Bude to zamyšlení o webových technologiích, nebo jak by se to dalo nazvat.
V budoucnosti (jestli blízké nebo vzdálené ukáže čas) nás čeká několik významných milníků ve značkování a stylování webů. Mezi nimi to bude například HTML5, CSS3… Ale ten největší bude příchod (a doufejme rozšíření) Internet Exploreru 8. Jsou to věci tak zajímavé, že jsem se o nich odvážil i cosi napsat pro případné neznalce.
Opouštíme velké X
Je to tak, velká módní ikona posledních let, XHTML, ustoupí do pozadí, aby uvolnila místo sémantičtějšímu webu, který přichází s HTML 5. Novinek nás čeká hned několik, ale já bych se dnes rád věnoval té nejvýraznější, která ovlivní tvoření každých webových stránek a s trochou štěstí vývoj pozmění k lepšímu. Máme tu totiž nové elementy!
Začněme povídáním o tom, jak skládáme web dnes. V zásadě celek tvoří hlavička, navigace, obsah a patička, v tom se nejspíš shodneme. Taktéž doufám, že budete souhlasit s takovouto základní strukturou, která se používá u většiny webů:
Je potřeba si uvědomit, k čemu nám slouží HTML: ke značkování obsahu, čili k popisování různých částí stránky. V začátcích internetu toto fungovalo velice dobře – pár textových nadpisů, odstavce, tučný text, případně obrázek. Toto se dá v HTML docela fajn označkovat. Problém nastává, když chcete označkovat třeba navigaci, či patičku. Pro takové účely byly navrženy neutrální elementy div a span, se kterými neutrálně označkujete vše potřebné. Značkovat web pomocí divů a stylovat podle jejich identifikátorů je sice “správné”, ale prohlížeč stále vidí pouhý shluk nicneříkajících neutrálních elementů. To samé vidí hlasové čtečky, nebo třeba vyhledávače. Inu, HTML 5 nám nabídne hezké řešení:
Takový kód bude nejen krásně vypadat a dobře se udržovat, ale značně si polepší právě hlasové čtečky a vyhledávače opět dostanou další faktor relevantnosti.
V HTML 5 se objeví ještě mnoho dalších features (včetně šikovného tagu video umožňujícího odproštění od Flashe, a mnoho dalších), které tady ale nechci probírat – chci se soustředit na oblasti, které ovlivní vývoj každých stránek.
IE8 aneb zpět k tabulkám
Za nějakých 5 (možná více) let, kdy bude Jeho Výsost Internet Explorer 7 ve stejné pozici, jako je dnes šestka, začne malá webová revoluce. IE8 jako poslední ze společenstva bude standards-compliant, což pro nás ze začátku znamená spíše odpadání problémů se zlobivými layouty, ale v době, kdy se bude reálně hovořit o zániku IE7, bude nám vhod CSS definice display: table;, oujé! Co to znamená? Zpět k nezničitelnému tabulkovému layoutu!
[Otázka pro zvídavé] Pokud mám ty správné zdroje, tak debatu k tomuto tématu nastartovala jistá kniha od SitePointu, je tomu tak? Nevíte-li, s klidem čtěte dál.
Počkat, tabulkový layout je přece prasárna, ne?
Ano, pokud je tvořen tak, jak byl tvořen před nedávnem, tedy pomocí table tagů, nikoliv pomocí CSS. Jak jsem podotknul výše, HTML nám říká, co je obsah uvnitř – tabulky zapsané tagem table se používají pouze na data, která jsou fakt tabulkou. Ale protože máme CSS styly, jenž nám oddělují vzhled od struktury (tedy popisují jak má který element vypadat) nic nám nebrání říct prohlížeči, že se má layout chovat jako tabulka, zatímco logicky je chápán jako (třeba) div.
Představme si dvousloupcový, automaticky natahovaný layout s dynamicky natahovaným pozadím podle délky obsahu. V dnešním CSS je to nepříjemná záležitost, o které jsem jednou mimochodem psal. Zkusme si načrtnout to samé pomocí HTML tabulek:
<table cellpadding="0" cellspacing="0"> <tr> <td class="levy"> Lorem Ipsum dolor sit amet consectetur adipiscing elit </td> <td class="pravy"> Etiam vitae velit ultricies tortor venenatis imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ullamcorper vehicula mi. </td> </tr> </table>
Nastylovaných takto:
table { width: 800px; margin: 0 auto; }
.levy { width: 40%; background: #ff0000; }
.pravy { width: 60%; background: #0000ff; }
Až na to, že je to (jak se dnes říká) velká prasárna, to je docela fajn udržovatelný kód, který se jen tak nerozsype roztažením okna prohlížeče, či podobnými zákeřnými jevy a hlavně se s ním dá velice jednoduše stvořit layout.
Problém je ale s onou subjektivní prasárnou, musíme to tedy přepsat do CSS, což je, jak jsem již řekl, nepříjemná záležiost. Pokud bychom chtěli takovýto layout dnes, musíme využít techniky, která se nazývá “faux columns“, česky “falešné sloupce”, nebo nějak tak. Protože si ale můžeme plácnout s IE8, uděláme to moderně:
<div id="obal"> <div id="levy"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div id="pravy"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>
HTML se nám moc od běžného layoutu nezměnilo, proto se hned vrhneme na CSS!
#obal { width: 800px; display: table; margin: 0 auto; }
#levy { width: 40%; background: #ff0000; display: table-cell; }
#pravy { width: 60%; background: #0000ff; display: table-cell; }
Všiměte si toho koncertu nových vlastností, sémantiky a krásného kódu. S těmito třemi řádky nám celý faux-column může políbit klobouk!
Pokud to někomu nedošlo, divu #obal jsme nastavili vlastnost display: table;, čímž se z něho stal tag <table> – podobně jako když spanu nastavíte display: block;. Není to geniální?
Podle pravidel kvalitní tabulky by před tagem <td> (table-cell) měla následovat řádka tabulky – <tr>, ale protože teď děláme všechno v CSS, můžeme se na to s klidem vybodnout a našim sloupečkům nastavíme vlastnost display: table-cell;. Zkuste se na to podívat v prohlížeči, hm?
Hotovo
Když jsem tohle řešení viděl poprvé, tak trochu jsem se chytal za hlavu, co kvůli IE musíme pořád dělat navíc. Nebudu daleko od pravdy když řeknu, že jsem skoro brečel. Holt se máme na co těšit, do té doby přeju pevné nervy.