• Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

HTML5: niestandardowe atrybuty

Opublikowane 18 listopada 2010. Autor: Kamil Brenk. Wizyt: 8 114.

Kategorie: HTML5 & CSS3
Tematyka: HTML5, JavaScript, jQuery w praktyce, optymalizacja serwisów, semantyka stron internetowych

lis 18

Funkcjonalność o której tutaj mowa pojawiła się w specyfikacji HTML5 już dość dawno temu. Mowa tutaj o nowym atrybucie data-*, rozszerzającym elementy HTML o możliwość tworzenia własnych atrybutów do przechowywania danych.

Dotychczas każdy, kto potrzebował przechowywać dodatkowe informacje niewidoczne dla klienta, ale później wykorzystywane na stronie, korzystał z kilku opcji: dodawał niestandardowe atrybuty (co było niezgodne ze specyfikacją), tworzył ukryte pola formularzy lub pobierał te dane z wykorzystaniem XHR.

Tak było wcześniej – często bardzo niewygodnie i niezbyt wydajnie. A jak będzie teraz? Najlepiej zobrazować to na przykładzie.

Tworzymy własne atrybuty w praktyce

Przykładowo, chciałeś dodać do swojej galerii zdjęć bardzo popularny skrypt Lightbox? Tak wyglądał stworzony kod HTML:

1
2
3
4
5
6
7
<a href="images/01.jpg" rel="lightbox[paryz]" title="Wieża Eiffla">
    <img src="images/01.jpg" alt="Wieża Eiffla" />
</a>

<a href="images/02.jpg" rel="lightbox[paryz]" title="Wersal">
    <img src="images/02.jpg" alt="Wersal" />
</a>

Jak widzisz, dodano tutaj atrybut rel, którego przeznaczenie jest zupełnie inne (kod nie jest semantyczny). Inną praktyką było wrzucanie takich danych do atrybutu class, co było również nieprawidłowe. Czas to zmienić.

1
2
3
4
5
6
7
<a href="images/01.jpg" data-gallery="paryz" title="Wieża Eiffla">
    <img src="images/01.jpg" alt="Wieża Eiffla" />
</a>

<a href="images/02.jpg" data-gallery="paryz" title="Wersal">
    <img src="images/02.jpg" alt="Wersal" />
</a>

Tak napisany kod wygląda przyjemniej, jest zgodny ze standardem, czytelniejszy i łatwiejszy do późniejszego rozszerzania.

JavaScript i obsługa niestandardowych atrybutów

Oczywiście wraz z HTML-owym rozszerzeniem specyfikacji, musi nastąpić rozszerzenie funkcjonalności JavaScript, coby można było obsłużyć nową zabawkę.

Aby dostać się do utworzonych przez nas atrybutów musimy odwołać się do obiektu przez dataset, wg schematu: obiekt.dataset.nazwaAtrybutu. Poniżej przykładowy kod HTML i JavaScript:

1
2
3
<span id="me" data-birthday="25-07-1988" data-city="Wyrzysk">
    Urodziłem się 25 lipca 1988 roku w Wyrzysku.
</span>
1
2
3
var me = document.getElementById('me');
    me.dataset.birthday;    // 25-07-1988
    me.dataset.city;        // Wyrzysk

Możesz także odwołać się do tak stworzonych atrybutów w tradycyjny sposób, mając pewność, że kod zostanie obsłużony przez wszystkie przeglądarki:

1
2
3
var me = document.getElementById('me');
    me.getAttribute("data-birthday");   // 25-07-1988
    me.getAttribute("data-city");       // Wyrzysk

A może korzystasz z biblioteki jQuery? Biblioteka ta oczywiście zapewniła już wsparcie dla niestandardowych atrybutów (od wersji 1.2.3).

1
2
3
var me = $('#me');
    me.data('birthday');    // 25-07-1988
    me.data('city');        // Wyrzysk

Prościej już chyba być nie może! :-)

Kilka słów podsumowania

Myślę, że powyższa funkcjonalność jest bardzo przydatna – przynajmniej z mojej perspektywy, bo nie raz zdarzało mi się stosować wspomniane obejścia problemu.

Po więcej informacji o tworzeniu niestandardowych odsyłam do specyfikacji. Do samego zaś tworzenia niestandardowych atrybutów (w razie potrzeby) jak najbardziej zachęcam.

Komentarze (7)

  1. Michal Wachowski 19 listopada 2010

    Bajer fajny – szczególnie że zdarza się iż nawet w „obejściu” po prostu zabraknie parametrów do wpisywania potrzebnych danych :D

    A teraz komentowanie wpisu – bo z niektórymi rzeczami się nie mogę zgodzić.
    – rel – co prawda standardowo lightbox używa rel=”lightbox[group]”, jednak nic nie stoi na przeszkodzie zmodyfikowanie JS’a tak, by korzystał z bardziej odpowiedniego zapisu
    – zaś wrzucenie lightboxa do class, NIE ZAWSZE jest niezgodne, w momencie gdy anchor dla obrazków używa specyficznej klasy – ma to sens i jest zgodne :)

    Przy prostych stronach, rzadko (nie przypominam sobie bym w ogóle) potrzeba dodatkowych parametrów.
    W webowych aplikacjach – notorycznie mi brakuje – szczególnie przy …

  2. Spawnm 19 listopada 2010

    Wreszcie ktoś zobaczył że tego brakuje i postanowił coś z tym zrobić.
    Wielką radość okazuję czytając twój wpis :-D

  3. Kamil Brenk 20 listopada 2010

    @Michał: to prawda, nie zawsze wrzucanie takich informacji do class czy nawet rel jest błędne – czasem możemy w ten sposób identyfikować pewne elementy. Można też odpowiednio konfigurować biblioteki w JavaScript. Teraz jednak nie będzie trzeba dodatkowo się kłopotać i mamy oficjalne rozwiązanie :-)

  4. sokzzuka 22 listopada 2010

    Dla mnie jest to troszkę mało purystyczne, mimo, że bardzo praktyczne. Zdecydowanie bardziej mi odpowiadała by idea xml-owa – jak chce wrzucić jakieś dodatkowe dane, to wrzucam kilka tagów z osobnego namespace’a, tak jak zagnieżdża się SVG czy MathML.

  5. PakoOrdoniez 10 grudnia 2010

    …musi nastąpić rozszerzenie funkcjonalności JavaScript – Rozszerzenie funkcjonalności JavaScript brzmi jak rozszerzenie funkcjonalności samego języka. Chyba bardziej pasuje: rozszerzenie DOM API.

  6. Kamil Brenk 10 grudnia 2010

    @PakoOrdoniez: zgadzam się, jednak rozszerzanie modelu DOM o nowe metody jest równocześnie rozszerzaniem funkcjonalności samego języka, jeśli dobrze rozumiem. :-)

  7. PakoOrdoniez 10 grudnia 2010

    Zależy jak rozumiesz rozszerzenie funkcjonalności Javascript (Javascript === język programowania). Dla mnie rozszerzenie funkcjonalności języka następuje wraz z nowymi jego wersjami (np C# 2.0 > 3.0 – wiele nowych rzeczy doszło w wersji 3.0). No ale to może kwestia interpretacji – każdy inaczej rozumuje ;)



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w modułach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassaną przez file_get_content?
    • ERMLAB: Od czegoś trzeba zacząć :) Wiele osób właśnie stawia na...
    • david: co nalezy wkleić na stronę aby plik ze stylami był ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyłem prostą stronkę w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Wysyłanie wiadomości SMS w PHP
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Michał Wachowski
    • Tomasz Kowalczyk
    • Filip Górczyński
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧