Vlastní HTML atributy

Podobně jako je možné si vytvářet vlastní HTML elementy (od IE 9 plně funkční včetně možnosti stylování), dá se totéž dělat i s atributy. S těmi je to dokonce ještě lepší — pro stylování je lze využít už v IE 7.

<style>
  div[barva=cervena] {color: red}
</style>
<div barva="cervena">
  Červený div.
</div>

Živá ukázka. Použití je bezproblémové. Pochopitelně v případě, že se omylem náhodou netrefíme do existujícího atributu. Prohlížeče neznámý atribut nijak neřeší, ale umožní stylování atributovým selektorem.

Jediná nevýhoda bude možná teoreticky lehce nižší rychlost než při klasickém stylování třídami nebo identifikátory, ale zatím jsem nic takového nepostřehl. Otázka je spíš, co to v CSS přinese navíc.

Od IE 8 je možné číst hodnotu i přímo v CSS.

Mimochodem, atributový selektor má nižší váhu než class nebo id.

Vlastní atributy a JavaScript

Zajímavé mi přijde až používání v JavaScriptu. Nestandardní atributy se dobře hodí k uložení nějaké hodnoty, označení stavu aplikace nebo označení elementů se společnými znaky.

Zejména to ukládání stavů do vlastních atributů mi přijde „čistší“, než je používání běžných tříd. Je tak hezky odděleno samotné stylování vzhledu a stylování funkcí (např. skrytí obsahu).

Výběr elementů podle vlastní atributů

Od IE 8, který umí metody querySelector/querySelectorAll, je výběr těchto elementů velmi jednoduchý.

var cerveneDivy = document.querySelectorAll("div[barva=cervena]");

(Pro IE 7 by případně querySelector mohl jít dodělat polyfillem.)

V případě, že bychom chtěli najít libovolné elementy s požadovaným atributem, řešení je hvězdičkový selektor.

var cerveneDivy = document.querySelectorAll("*[barva=cervena]");

Živá ukázka.

Nastavování a čtení atributů

Odlišnost oproti běžným atributů je v získávání/nastavování hodnoty.

Je nutné používat metody getAttribute/setAttribute (poznámka: pro standardní atributy jsou lepší standardní vlastnosti DOMu.)

var element = document.querySelector("*[barva]");
element.getAttribute("barva"); // obsah atributu „barva“
element.setAttribute("barva", "novaHodnota); // nastaví obsah

Ukázka

Data atributy, nebo vlastní?

Podle specifikace by vlastní atributy měly začínat prefixem data-. Má smysl se tohoto držet?

  • Dle vlastní libosti pojmenované atributy neprojdou validátorem (validátor je vyhodnotí jako nepovolené pro danou značku). To data-atributy toleruje.
  • U data- prefixu by nemělo hrozit, že se námi vymyslený atribut dostane do specifikace, prohlížeče mu začnou přisuzovat nějaký význam a web se tak rozbije.
  • Pojmenování atributu jako data-nazev-atributu místo prostého nazev-atributu může člověku, co detailně nezná všechny HTML atributy, pomoci v orientaci. Na první pohled je vidět, že je atribut vlastní.
  • Jinak je to asi jedno.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Rozbalovací nabídka <select>

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

Podmíněné komentáře pro IE

Podmíněné komentáře pro Internet Explorer

Jak rychle a snadno hackovat HTML a CSS v různých versích Internet Exploreru.

Tag <label> a atribut for

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

Značka <base href>

HTML značka <base>

K čemu využít a na co si dát pozor u HTML tagu <base>?

Komentáře