Novajhoj: data-atributoj

En HTML5 chia ajn atributo, kies nomo komencighas per data- (kaj sekvas kelkajn pliajn regulojn), estas libere uzebla lau la bontrovo de la paghokreanto por specialaj celoj. Tiaj atributoj estas uzeblaj che chiuj ajn elementoj.

data-atributoj estas celitaj por teni datumojn, kiuj estas specialaj kaj privataj por la koncerna pagho au TTT-programo, kiam ne ekzistas ordinara atributo tauga por la koncerna celo. La datumoj en tiaj atributoj ne estu intencataj por au uzataj de programoj, kiuj ne apartenas al la TTT-ejo de la pagho. Interalie ili ne uzighu 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 pagho kun pliaj informoj pri la koncerna afero. Se Javaskripto estas aktiva, la pagho 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 pagho kun pliaj informoj. (Au io alia povas okazi, lau la bontrovo de tiu, kiu kreas la paghon 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 paghoverkinto kreis la atributojn data-grandaversio kaj data-title por tiuj celoj. Tiuj fantaziaj atributoj tamen funkcias nur en tiu pagho, kaj nur pere de Javaskripta kodo verkita aparte por tio.

Jen ligilo al pagho kun la chi-antaua ekzemplo de data-atributoj, kaj kun Javaskripta kodo, kiu funkciigas la paghon lau la chi-antauaj klarigoj. Se vi malaktivigos Javaskripton en via TTT-legilo, kaj poste vizitos tiun paghon, vi konstatos, ke la pagho funkcias ankau tiam, kvankam en iom pli simpla maniero.

Tiaj liberaj data-atributoj jam funkcias tute bone en chiuj 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 komencighi per data-. Neniu nuna HTML-atributo havas, kaj neniu estonta iam ajn havos, nomon, kiu komencighas 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-pagho. Tia nomkolizio povus kauzi problemojn, se la nova HTML-atributo havos signifon kaj efikon tute neintencitan kaj neimagitan de la paghoverkinto, kiu ekuzis la fantazian atributonomon.

Noto: Tiaj liberaj atributonomoj devas, post la komenco data-, konsisti el almenau 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 sufiche 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 chiuj 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 ankorau ne funkcias en chiuj TTT-legiloj.