xHTML, CSS, JavaScript

HTML5 se mi začíná líbit čím dál tím více. V testovacím režimu ho už zkouším i na svém blogu. Pro mnohé je to ale stále ještě velká neznámá, proto jsem se rozhodl některé novinky trochu přiblížit. Na úvod se budu věnovat novým elementům a novým atributům v porovnání s HTML4 nebo xHTML1. Zhruba před třemi lety jste si mohli na mém blogu přečíst článek xHTML 2 versus HTML 5. Mnohé se ale změnilo, a tak dnes přináším další článek o vývoji nové verze značkovacího jazyka.

V dnešním článku se budu věnovat JavaScriptu úplně od začátku. Spousta začínajících vývojářů často chybuje v poměrně základních věcech, a tak bych rád uvedl některé z nich na pravou míru. Dodržování těchto pravidel vám pomůže dosáhnout čistého kódu, správné implementace složitých funkcí a naučí vás udržovat si pořádek v šablonách. Kromě tipů na nasazování vlastních či cizích knihoven uvedu i některé rady, jak předejít nepochopitelnému chování, na jehož řešení už bývá většinou pozdě, pokud nastane.

Při studiu a práci s JavaScriptem jsem mnohokrát narazil na situace, kdy mi standardní JavaScriptové funkce nestačily. Řešení v PHP by bylo triviální, ovšem v JavaScriptu dané funkce prostě chyběly. Trochu jsem hledal a narazil na zajímavý projekt phpjs.org, kde jsem objevil rozsáhlou knihovnu PHP funkcí přepsaných do JS. Samozřejmě mi nedalo se o ně nepodělit.

Tak, jako v PHP pracujeme s parametry oddělenými otazníkem a následně ampersandem (&), můžeme v JavaScriptu pracovat s kotvami. Nejčastější využití takzvané kotvy spočívá v odkazu na nadpis či odstavec dále v textu nebo přímý odkaz na aktivní záložku. Pomocí hodnoty kotvy ale můžeme v kódu podmiňovat naprosto cokoli. Tak, jako query string ?arg=value&page=3 splní svůj účel, může pracovat i kotva ve tvaru #arg=value&page=neco. PHP takový řetězec v URL už rozpoznat nedokáže, kdežto JavaScript si z něj umí vzít potřebné hodnoty.

Odlišené vykreslení různými prohlížeči je věc, která dříve či později potrápí každého kodéra. Ať už se jedná přímo o bugy, nebo pouze o drobný rozdíl při vykreslování konkrétních prvků, je potřeba dosáhnout shody ve všech majoritních prohlížečích. Chyby Internet Exploreru a způsoby, jak je obejít jsou dávno obecně známé, ovšem o umravnění zlobivého Firefoxu nebo Google Chrome se tolik nemluví. I když je v kodérově nejlepším zájmu, psát styly tak, aby hacků použil co nejméně, nastávají situace, kdy se jim vyhnout nemůžeme. Oprava stylů po někom jiném je práce, kterou nikdo nemá rád a nechce dělat, ale také vhodná chvíle, kdy nasadit CSS hacky.

CSS není jen o znalosti atributů a jejich vykreslení v tom či jiném prohlížeči - CSS skrývá i spoustu dalších úskalí. Denně přicházím do kontaktu s weby, jejichž stylové předpisy mají 30 kilobytů či více, a věřte nevěřte, jsou i případy, kdy se přidání nebo smazání některé globální definice rovná píchnutí do vosího hnízda. Někdy totiž nestačí pouze vyladění pro nejpoužívanější prohlížeče - člověk musí znát i způsoby zápisu té samé definice a prioritu, kterou bude mít oproti definicím ostatním. Říká se, že poslední definice platí...

A já se ptám: Kdo za to dá ruku do ohně?

1.) Mějme následující HTML kód:

<div id="all" class="all">
  <p id="test" class="test">&nbsp;</p>
</div>

K němu se z připletl takovýto CSS předpis:

#all p {border:1px solid black;}
#test {border:1px solid blue;}
.test {border:1px solid red;}
div p {border:1px solid green;}

A já se ptám: Jakou barvu bude mít rámeček? Proč?

2.) Zápis trochu obměníme. Nyní se bude prohlížeč rozhodovat pouze mezi dvěmi definicemi:

#all .test {border:1px solid green;} 
.all #test {border:1px solid orange;}

Jakou barvu bude mít rámeček nyní? Proč zrovna tu?

3.) Styly opět změníme. Je spousta možností, jak definici zapsat:

#all #test {border:1px solid violet;}
body .all #test {border:1px solid red;}
html body div p {border:1px solid orange;}
html body .all .test {border:1px solid yellow;}

Že nevíte, na co se zeptám?

4.) A na konec něco trochu jednoduššího:

.test {border:1px solid blue;}
div .test {border:1px solid red;}
p {border:1px solid brown;}

Dříve, než se podíváte na pokračování článku a na řešení, zkuste si tipnout, jak tomu bude. Která vlastnost se projeví? Zkuste také odhadnout, která vlastnost bude mít druhou nevyšší prioritu.

Při hledání odpovědi co přesně se Internet Exploreru honí hlavou když se přepíná do Quirk módu a proč tomu tak činí jsem narazil na spoustu článků, popisující chování IE při pár konkrétních DTD, ale všude vždy 2, maximálně 3 příklady. Stejně tak, jako se všichni zabývají neustále jen Box Modelem a některé další důležité neshody opomíjí.

Vytvořil jsem si proto 5 různých html dokumentů s pěti různými Doctype a zkoumal jejich chování v IE5, IE6 a IE7. Krom vykreslení rámečku jsem testoval i dvě další vlastnosti, s jejichž odlišnou interpretací jsem se v minulosti setkal. Ve dvou dílech svých CSS tutoriálů jsem vždy popisoval řešení, jak potencionální problémy obejít, jak se jim vyhnout. Pokud ale předpovíme přesné chování Exploreru, můžeme toho i využít a viditelně si ulehčit práci.

Návštěva odborného weblogu reinholdweber.com a otestování Diagnostického CSS skriptu mě inspirovalo k napsání dalšího článku na tematiku kaskádových stylů, tentokrát trochu podrobněji o pseudo~třídách a selektorech. Text se týká částečně i CSS3, hlavně ale porovnání interpretace nejrozšířenějšími prohlížeči. Který z nich na tom skončil nejhůř snad ani uvádět nemusím… Nejdříve tedy k takzvaným pseudo~třídám.

Třídy jako :hover či :first-letter byste měli snad všichni znát, existuje však i spousta dalších. Uvádět zde všechny nemá smysl, pohovořím jen o těch, jejichž použití se nám mnohdy samo nabízí.

V prvním dílu svého návodu na vytvoření layoutu za použití kaskádových stylů jsem vás nabádal, abyste nepoužívali tabulky, ale divy. V dnešním článku vám pro změnu ukážu, že to jde i bez nich. "Bezdivový" je ale přecijen trochu nadsazený pojem, jeden div použijeme %1 Rozvržení stránky v CSS namísto v tabulkách už by dnes měla být samozřejmost, a já vám popíšu základy tvorby layoutu s minimálním použitím divů. Div je ze sémantického hlediska zbytečný; nic nedělá. A HTML je jazyk bohatý, tudíž můžeme využít spoustu jiných značek pro rozvržení stránky.

Nedávno jsem narazil na poměrně zajímavý článek na serveru xhtml.com popisující změny v připravovaných verzích značkovacích jazyků HTML 5 a xHTML 2. Některé z nich vypadají opravdu zajímavě, jiné jsou podle mého názoru nesmyslné a spousta z nich je pouze "vata"... Článek jsem přeložil na nabídnu Vám ho k přečtení na svém blogu.

XHTML 2

Novým elementem v jazyce XHTML 2 budou takzvané Navigační seznamy. Podle mého názoru se ovšem nejedná o nějaký výrazný krok kupředu, ale pouze náhradu za striktními specifikacemi zavržený element :

<nl>
    <label>Navigace</label>
    <li href="#">Úvodní stránka</li>
    <li href="#">Link</li>
    <li href="#">Link</li>
    <li>Neaktivní link</li>
</nl>