Stage XL demo Je tomu dávno pradávno, kdy jsem dělal HTML stránky. Pak jsem se ponořil do Androidů, cloudů, Java informačních systémů a celou HTML/CSS sazbu nechal mladším. Koncem roku 2014 jsem se do toho ale znovu ponořil. Přátelé. Vůbec to není špatné.

Tento článek bych rád věnoval všem oldschoolistům, kteří podobně jako já na sazbě před 10-15 lety začínali, ale pak je IT větry zavály do jiných vod. Nemůžu garantovat 100% správnost a ani svůj 100% vhled do problematiky, ale nějakou představu o tom co se jak dělá vám to dá. Především očekávejte chaotickou směs tipů a triků, které jsem potkal a hodily se.

Can I use …

Na úvod vás bude zajímat, co můžete bezpečně použít a co ne. Pokud neznáte, there is an app for that: http://caniuse.com. Zatím jsem ji nanačapal, že by mi lhala, takže určitě doporučuju. Co tam ovšem nenajdete, jsou:

Preprocesory

To asi znáte, ale pro skutečné oldschoolisty to sem vrazím.

CSS je možná human-readable, ale je na hranici human-usable. Na složitějším webu začne bobtnat a bobtnat a nakonec degeneruje na !importnant + copy’n’paste guláš.

Existují dva zásadní nástroje, kterým se podařilo situaci trochu usnadnit. Less a Saas. Je jedno, který si vyberete, jsou skoro stejné. Napíšete takové CSS na steroidech, poštvete na to vybraný preprocessor a on vygeneruje čisté CSS. Hele na příklady.

Začneme teda tím CSS.

box-sizing: border-box

Nejblbější byl na starým CSS ten jeho “box-model”. Když nastavíte elementu šířku, dejme tomu 50%, a pak přidáte border a padding, jste v loji, vašich 50% se o ně nafoukne. A protože border říkáte typicky v px a padding v em, nemáte ani šanci se dopočítat, na kolik tu šířku teda nastavit, aby to v součtu bylo těch 50%. Jistě. Byly na to hacky.

Jeden z webů jsem zkoušel sázet s tím, že jsem na úvod deklaroval:

* {
  box-sizing: border-box;
}

V ten moment se padding a border započítává do nastavené šířky, tzn. - ať děláte co děláte, šířka zůstane 50%. Nirvána.

Can I use box-sizing? Yes, you can.

calc

Pokud nemáte odvahu takhle fundamentálně převrátit svoje CSS návyky, nebo zasahujete do už existujících stylů, nezoufejte. Ještě je možné stejný trik udělat pomocí “calc”:

section {
  padding: 1em;
  border: 1px solid filajová;
  width: calc(50% - 1px - 1em);
}

To je ukecanější, ale udělá to totéž. Pochopitelně to lze použít i jinde, ne jen pro šířku.

Can I use calc? Yes, you can.

rem, vh, vw

Když jsme u těch rozměrů, jsou tu nové a velmi zajímavé jednotky.

  • 1vh - jedno procento výšky viewportu
  • 1vw - jedno procento šířky viewportu
  • 1rem - podobné jako “em”, ale vztaženo na výchozí velikost fontu, tj. mimo aktuální kontext

K čemu to je? No - řekněme, že potřebujete na stránce 3 čtverce přes celou šířku. Šířka čtverce bude 33.33333333% … a výška? Aha? Tak například na to.

transform

V rámci “obyčejného CSS” máte možnost nejrůznějšího pozicování, postrkávání a zarovnávání … ale má to svoje limity. Ty lze zcela prokopnout pomocí transform. Po tom, co se vypočítá pozice a rozměr elementu, máte možnost ho vyslat do úplně jiné dimenze. To se hodí na různé efekty, např. v kombinaci s animacemi (viz níže), ale má to i extrémně praktická uplatnění. Třeba když potřebujete element, jehož výšku neznáte, vertikálně vycentrovat v rodiči, jehož výšku taky neznáte. Ve starým CSS? Bez Javascriptu? LOL. Sledujte tohle:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Cha! (Zdroj: http://zerosixthree.se/)

Can I use transform? Yes, you can.

Kromě pozicování tu máte možnost i rotate, scale, skew, …

animace

V podstatě máte dvě možnosti jak s animacemi pracovat. Možnost první: element naučíte, které CSS vlastnosti má animovat, tomu se správně říká CSS transitions:

div {
    transition: top 0.2s;
}

Kdykoliv změníte “top”, neprovede se změna skokem, ale plynule, během 0.2s. Top změníte třeba tím, že JavaScriptem přídáte elementu nějakou třídu. A nebo využijete například “:hover” selektor. Tím se dá udělat fůra muziky.

Druhá možnost jsou plnotučné poctivé animace pomocí keyframes - definujete přesně stavy, kterými má element procházet.

HTML

Z oblasti CSS jsem spoustu novinek zatajil, ale obvykle z dobrého důvodu - ještě je neovládám. Třeba display: flex;. Jsou tu ale i fajnové změny v HTML.

Pro mě osobně je komplikované rozlišit, co je součástí HTML5 a co je “cool emerging standard”, poněkud mi to splývá. Ale HTML5 beru do značné míry jako marketingový brand. Nakonec jde stejně jen o to, kolik procent prohlížečů ve vaší cílové skupině danou featuru podporuje a kolik ne. Tak jaký s tim tento.

Pro-forma: HTML 5 je aktuálně hotový standard.

Zajímavé je, že HTML5 není založeno na SGML, je to v podstatě nový standard serializace dokumentu. DTD pro to neexistuje a ani ho nelze napsat. Z historických důvodů se na úvod vyžaduje:

<!DOCTYPE html>

… a ano, syntaxe je velmi podobná HTML4, ale to je v podstatě skutečně jen “podobnost”. Pravidla pro zanořování elementů jsou popsána pouze slovně - ve specifikaci. Ale online validátory jsou, pokud vás to pálí.

header, footer, section - semanticke tagy

Jednoznačně je vidět směřování k větší srozumitelnosti dokumentu. Přibyly elementy, které technicky nemají jiný význam, než že jsou to jinak pojmenované div-y. Ale poskytují důležité semantické informace.

<section> - uvnitř je nějaká logická část webu
<article> - unitř je jedna položka - článek například
<header> - záhlaví (webu, <section>, <article>, ...)
<footer> - zápatí
<aside> - uvnitř je nějaká méně podstatná okrajová informace
<nav> - uvnitř je navigace, např. menu

Nádhera.

svg

Takový responzivní web neznamená jen to, že se na určité šířce celý web nějak přeskládá a přebarví, aby vypadal dobře na mobilu. Těch různých šířek a rozlišení je spousta a často není ani jasná hranice kde začíná co (phablet?). Jako optimální se mi jeví cesta sázet web v podstatě jen pomocí em (vh, vw, %), úplně se vyhnout všemu absolutnímu a přízpůsobovat jednotlivé části plynule, podle potřeby. Tak se teď vlastně chová náš web.

S tím souvisí i potřeba plynule scalovatelné grafiky, což PNG nebo JPG zrovna nesplňují. Naštěstí podpora SVG je už dost slušná, takže různé ikonky lze bez problémů zobrazovat ve vektorech. Vůbec není třeba se toho bát.

canvas

Některé úlohy se skutečně obtížně řeší čistě pomocí HTML, ale není už nutné sahat po flashi a pluginech. Canvas je velmi mocný. Tomu jak ho osedlat pomocí Dartu jsem ovšem věnoval celý dlouhý tutoriál. Jestli je nějaká oblast Dartu skutečně bez problémů “production ready” (což se o Polymeru nebo Angularu říct nedá), je to jistojistě StageXL.

viewport

A teď už skutečně browsím po okrajových tématech, ale jsou to věci, se kterými do styku přijdete.

<meta name="viewport" content="width=device-width, initial-scale=1">

Meta tag viewport slouží k tomu, abyste mobilním prohlížečům vysvětlili, že váš web funguje i na nich, že jste na ně mysleli a že nemusí dělat nějaké automatické chytristiky ohledně šířky a scalování - udělali jste je vy. Tohle je určitě potřeba nastudovat a používat, bez toho se neobejdete.

humans.txt

No a tohle už s HTML5 nesouvisí. Ale líbí se mi to. Když mají roboti svůj TXT soubor, proč ne lidi?

Úvod, stať … jak bylo to třetí?

Závěrem říkám: Příjemně mě překvapilo, jak se to pohnulo kupředu, kolik toho opruzu už dávno není opruzem, ale krásně funkční věcí. Browsery k sobě nevyhnutelně konvergují, takže je slušná šance udělat stránku tak, že vypadá skutečně zcela stejně na všech prohlížečích. MSIE dávno není tak hrozný jak bývalo (ve skutečnosti mi nejvíc dáva zabrat Safari).

Kudy dál: