Vytváření vlastních HTML značek
Je možné si kromě standardních HTML tagů vytvořit nějaké vlastní?
Prohlížeč v podstatě cokoliv začínajícího <
a nějakým písmenem považuje za HTML značku.
Pokud takovou značku zná a má nějaký speciální význam, převezme její obsah či atributy a na jejím místě zobrazí nějakou svou komponentu.
Typickým příkladem jsou formulářové prvky, například značka
<input>
, která vykreslí , nebo třeba značka<progress>
vykreslí v podporovaných prohlížečích průběh.- Když daná značka žádnou komponentu vykreslovat nemá, což je většina značek (např.
<div>
,<span>
,<h1>
apod. nebo i vlastní značky), pouze se vypíše obsah mezi počáteční a koncovou značkou.
Známé značky potom mají v prohlížečích před-připravené CSS styly (zhruba následující), tudíž třeba <h1>
se zobrazí velkým tučným písmem s odsazením. Nic nám ale nebrání známé i neznámé značky dále stylovat.
Vlastní značka
Zapíšeme HTML:
<ctverec barva=modry></ctverec>
Přidáme trochu CSS:
ctverec {display: block; width: 50px; height: 50px}
ctverec[barva=modry] {background: blue}
A čtverec zapsaný vlastní značkou je na světě:
Co na to specifikace?
HTML specifikace přímo počítá s vytvářením vlastních značek. Aby nedocházelo ke konfliktu s existujícími značkami, mají mít vlastní tagy v názvu –
.
Příklad se značkou <ctverec>
tedy neodpovídá specifikaci. V praxi nicméně bude fungovat. Jedině hrozí risiko, že někdy v budoucnu vznikne oficiální značka stejného názvu.
Starší prohlížeče
V IE 8 a starších se normálně neobjeví nic, protože stylovat neznámé značky neumí.
Dá se tomu ale pomoci skriptem:
document.createElement("nazev-znacky");
Popřípadě registrování vlastních značek víc automatisovat.
var znacky = "ctverec obdelnik kruh";
znacky.replace(/\w+/g, function(znacka){document.createElement(znacka)});
HTML 5 značky
Jako vlastní HTML značky se chovají i elementy z HTML 5 jako <header>
, <footer>
, <article>
a podobně, tj. starší prohlížeče je neznají a není možné je stylovat.
HTML 5 značky v IE 8 a starších
Stačí použít výše uvedený postup pro vlastní značky i s HTML 5 značkami. A nejspíš skript připojit podmíněnými komentáři jen pro IE 8 a starší.
<!--[if lte IE 8]>
<script>
var znacky = "article aside audio bb canvas datagrid datalist details dialog eventsource figure figcaption footer header hgroup mark menu meter nav output progress section time video";
znacky.replace(/\w+/g, function(znacka){document.createElement(znacka)});
</script>
<![endif]-->
Používat, nebo ne?
Z důvodu zmíněné nekompatibility se nabízí otázka, zda vlastní HTML značky nebo neznámé HTML5 značky používat.
- Z pohledu vývojáře
Mohou vlastní/HTML5 značky zpřehlednit a zrychlit psaní. Místo
<div class=header>
stačí napsat<header>
.- Z pohledu návštěvníka
Momentálně nenabízejí vlastní značky téměř nic navíc, jen vytváří komplikace uživatelům starších Explorerů, ve kterých je celý web s využitím vlastní značek závislý na JavaScriptu, který navíc ještě zdržuje načítání.
Odkazy jinam
- HTML5 Shiv
Hotové řešení registrující HTML 5 značky pro starší prohlížeče řeší i výchozí CSS a jde hotlinkovat.
Hotlinkování se zrovna v tomto případě ukázalo jako nepraktické, protože URL níže přestala fungovat.
Hromada webů je tak teď kvůli tomu rozbitá v Internet Exploreru 8.
<!--[if IE]> <script src="
http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->Připojit vzdáleně HTML5 Shiv je možné například z CDNJS, ale nejbezpečnější s ohledem do budoucna je použít lokální kopii.
- Hudba budoucnosti
Komentáře