Novajxoj: data-atributoj

En HTML5 cxia ajn atributo, kies nomo komencigxas per data- (kaj sekvas kelkajn pliajn regulojn), estas libere uzebla laux la bontrovo de la pagxokreanto por specialaj celoj. Tiaj atributoj estas uzeblaj cxe cxiuj ajn elementoj.

data-atributoj estas celitaj por teni datumojn, kiuj estas specialaj kaj privataj por la koncerna pagxo aux TTT-programo, kiam ne ekzistas ordinara atributo tauxga por la koncerna celo. La datumoj en tiaj atributoj ne estu intencataj por aux uzataj de programoj, kiuj ne apartenas al la TTT-ejo de la pagxo. Interalie ili ne uzigxu en kromprogramoj instalitaj en TTT-legiloj.

Jen ekzemplo:

<ul id="katoj">
  <li>
    <a href="informoj.php?kato=Tami">
      <img src="tami.jpg"
        data-grandaversio="grandatami.jpg"
        alt="Tami estas virkato"
        title="Alklaku por vidi informojn pri Tami"
        data-title="Alklaku por vidi pli grandan bildon de Tami"
      />
    </a>
  </li>

  <li>
    <a href="informoj.php?kato=Tesi">
      <img src="tesi.jpg"
        data-grandaversio="grandatesi.jpg"
        alt="Tesi estas katino"
        title="Alklaku por vidi informojn pri Tesi"
        data-title="Alklaku por vidi pli grandan bildon de Tesi"
      />
    </a>
  </li>

  <li>
    <a href="informoj.php?kato=Tini">
      <img src="tini.jpg"
        data-grandaversio="grandatini.jpg"
        alt="Tini estas katineto"
        title="Alklaku por vidi informojn pri Tini"
        data-title="Alklaku por vidi pli grandan bildon de Tini"
      />
    </a>
  </li>
</ul>

Tiu listo de bildoj povas funkcii en TTT-legilo sen aktiva Javaskripto: Se oni alklakas bildon, oni iras al pagxo kun pliaj informoj pri la koncerna afero. Se Javaskripto estas aktiva, la pagxo povas funkcii iom alie: Kiam oni alklakas bildon, Javaskripta kodo unue montras pli grandan version de la bildo, uzante la informojn en la atributoj data-grandaversio kaj data-title. Se oni poste alklakas tiun grandan bildon, oni finfine iras al la pagxo kun pliaj informoj. (Aux io alia povas okazi, laux la bontrovo de tiu, kiu kreas la pagxon kaj la Javaskriptan kodon.) En HTML ne ekzistas atributo por ”pli granda versio de la bildo”, nek ekzistas atributo por alternativa titolo (alternativa title). Tial la pagxoverkinto kreis la atributojn data-grandaversio kaj data-title por tiuj celoj. Tiuj fantaziaj atributoj tamen funkcias nur en tiu pagxo, kaj nur pere de Javaskripta kodo verkita aparte por tio.

Jen ligilo al pagxo kun la cxi-antauxa ekzemplo de data-atributoj, kaj kun Javaskripta kodo, kiu funkciigas la pagxon laux la cxi-antauxaj klarigoj. Se vi malaktivigos Javaskripton en via TTT-legilo, kaj poste vizitos tiun pagxon, vi konstatos, ke la pagxo funkcias ankaux tiam, kvankam en iom pli simpla maniero.

Tiaj liberaj data-atributoj jam funkcias tute bone en cxiuj TTT-legiloj. Jam delonge multaj uzas fantazie nomatajn atributojn por diversaj specialaj celoj. Tio estis nenorma, sed tamen funkciis. En HTML5 tia uzo finfine estas normigita, sed limigita de la regulo, ke la fantaziaj atributonomoj devas komencigxi per data-. Neniu nuna HTML-atributo havas, kaj neniu estonta iam ajn havos, nomon, kiu komencigxas per data-. Tiel malaperas la risko, ke iu estonta versio de HTML enkondukos atributon kun nomo, kiun iu jam uzas por privata celo en HTML-pagxo. Tia nomkolizio povus kauxzi problemojn, se la nova HTML-atributo havos signifon kaj efikon tute neintencitan kaj neimagitan de la pagxoverkinto, kiu ekuzis la fantazian atributonomon.

Noto: Tiaj liberaj atributonomoj devas, post la komenco data-, konsisti el almenaux unu signo post la dividostreko. Ili ne rajtas uzi majusklajn Askiajn literojn (A-Z), kaj ili devas esti kongruaj kun la XML-aj reguloj por atributo-nomoj. Tio precipe signifas, ke ili ne rajtas enhavi la signon : (dupunkto). La efektivaj reguloj estas suficxe komplikaj kaj malfacile klarigeblaj en mallonga spaco. Plej sekure kaj rekomendinde estas uzi nur minusklajn Askiajn literojn (a-z) en tiaj nomoj.

Noto: Tiaj liberaj atributonomoj estas jam nun uzeblaj en cxiuj TTT-legiloj. Oni povas ilin facile atingi en Javaskripta programo per la funkcioj getAttribute() kaj setAttribute(). HTML5 aldone difinas specialan novan manieron uzi tiajn atributojn en Javaskripto, nome per la propreco dataset. Tiu nova maniero tamen ankoraux ne funkcias en cxiuj TTT-legiloj.