Rozdział 3. Sprawdzanie obsługi elementów HTML5

> Dodaj do ulubionych

Do rzeczy

Kwesti─Ö zasygnalizowan─ů w tytule mo┼╝na by by┼éo przeformu┼éowa─ç na pytanie: „Jak mam zacz─ů─ç u┼╝ywa─ç HTML5 skoro nie obs┼éuguj─ů go starsze przegl─ůdarki”? Jednak to nie jest w┼éa┼Ťciwie postawione pytanie. HTML5 to nie pojedyncza wielka rzecz. Jest to zbi├│r indywidualnych sk┼éadnik├│w. Dlatego nie mo┼╝na sprawdzi─ç „obs┼éugi HTML5”, poniewa┼╝ to po prostu nie ma sensu. Mo┼╝na natomiast sprawdzi─ç czy przegl─ůdarka obs┼éuguje poszczeg├│lne elementy lub funkcje, np. canvas, video albo geolokalizacj─Ö.

Techniki sprawdzania obsługi HTML5

Przegl─ůdarka przed wy┼Ťwietleniem strony tworzy jej obiektowy model (DOMDocument Object Model), czyli struktur─Ö obiekt├│w reprezentujcych wszystkie elementy HTML znajduj─ůce si─Ö na stronie. Ka┼╝dy element — np. p, div, span itd. — ma w tym modelu swoj─ů reprezentacj─Ö w postaci osobnego obiektu. (Istniej─ů te┼╝ obiekty globalne, jak np. window i document, kt├│re nie s─ů powi─ůzane z ┼╝adnym konkretnym elementem.)

Wszystkie obiekty DOM maj─ů wsp├│lny zestaw w┼éasno┼Ťci, ale niekt├│re maj─ů jeszcze dodatkowe, kt├│rych brak innym. W przegl─ůdarkach obs┼éuguj─ůcych HTML5 niekt├│re obiekty maj─ů pewne wyr├│┼╝niaj─ůce je w┼éasno┼Ťci. Dzi─Öki temu wystarczy zajrze─ç do struktury DOM, aby dowiedzie─ç si─Ö, kt├│re elementy j─Özyka HTML5 s─ů obs┼éugiwane.

S─ů cztery podstawowe techniki sprawdzania czy przegl─ůdarka obs┼éuguje wybrany element HTML5. Poni┼╝ej zamie┼Ťci┼éem ich opis, zaczynaj─ůc od najprostszej:

  1. Sprawdzenie czy globalny obiekt (np. window lub navigator) ma wybran─ů w┼éasno┼Ť─ç.

    Przykład: sprawdzanie obsługi geolokalizacji

  2. Utworzenie elementu i sprawdzenie czy ma okre┼Ťlon─ů w┼éasno┼Ť─ç.

    Przykład: sprawdzanie obsługi elementu canvas

  3. Utworzenie elementu i sprawdzenie czy ma okre┼Ťlon─ů metod─Ö, a nast─Öpnie jej wywo┼éanie i sprawdzenie, co zwr├│ci.

    Przykład: sprawdzanie obsługiwanych formatów wideo

  4. Utworzenie elementu, ustawienie wybranej w┼éasno┼Ťci na jak─ů┼Ť warto┼Ť─ç oraz sprawdzenie czy w┼éasno┼Ť─ç ta zachowa┼éa t─Ö warto┼Ť─ç.

    Przykład: sprawdzanie obsługiwanych typów pola input

Modernizr — biblioteka do sprawdzania poziomu obs┼éugi HTML5

Modernizr to otwarta, dost─Öpna na licencji MIT biblioteka JavaScript do sprawdzania obs┼éugi element├│w HTML5 i CSS3. Zawsze nale┼╝y u┼╝ywa─ç jej najnowszej wersji. Aby z niej skorzysta─ç, wystarczy na pocz─ůtku strony umie┼Ťci─ç poni┼╝szy element script.

Bibliotek─Ö t─Ö do┼é─ůcza si─Ö w nag┼é├│wku (head)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dive Into HTML5</title>
  <script src="modernizr.min.js"></script>
</head>
<body>
  ...
</body>
</html>

Biblioteka Modernizr dzia┼éa automatycznie. Aby z niej korzysta─ç, nie trzeba wywo┼éywa─ç ┼╝adnej funkcji typu modernizr_init(). Gdy zostanie uruchomiona, tworzy globalny obiekt o nazwie Modernizr zawieraj─ůcy zbi├│r w┼éasno┼Ťci logicznych, dla ka┼╝dej z wykrytych obs┼éugiwanych w┼éasno┼Ťci. Je┼Ťli np. twoja przegl─ůdarka obs┼éuguje APIcanvas, to w┼éasno┼Ť─ç Modernizr.canvas ma warto┼Ť─ç true. Je┼Ťli przegl─ůdarka nie obs┼éuguje API canvas, to w┼éasno┼Ť─ç Modernizr.canvas ma warto┼Ť─ç false.

if (Modernizr.canvas) {
  // narysujmy par─Ö figur!
} else {
  // brak standardowej obsługi :(
}

Kanwa rysunku

W specyfikacji element canvas HTML5 ma nast─Öpuj─ůc─ů definicj─Ö: „zale┼╝na od rozdzielczo┼Ťci mapa bitowa stanowi─ůca kanw─Ö rysunku, kt├│rej mo┼╝na u┼╝ywa─ç do renderowania na bie┼╝─ůco wykres├│w, obraz├│w w grach i innych rodzaj├│w grafiki.” Kanwa to prostok─ůtny obszar na stronie, w kt├│rym mo┼╝na rysowa─ç dowolne obrazy za pomoc─ů JavaScriptu. W specyfikacji j─Özyka HTML5 zdefiniowany jest te┼╝ zestaw funkcji (API canvas) do rysowania figur geometrycznych, definiowania ┼Ťcie┼╝ek, tworzenia gradient├│w i stosowania przekszta┼éce┼ä.

Obs┼éuga API canvas jest sprawdzana za pomoc─ů metody nr 2. Je┼Ťli przegl─ůdarka obs┼éuguje API canvas, to utworzony obiekt DOM reprezentuj─ůcy element canvas ma metod─Ö getContext(). Je┼Ťli przegl─ůdarka nie obs┼éuguje API canvas, to utworzony obiekt DOM dla elementu <canvas> ma tylko standardowe w┼éasno┼Ťci i nie ma ┼╝adnej z charakterystycznych tylko dla tego elementu.

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}

Funkcja ta zaczyna dzia┼éanie od utworzenia atrapy elementu canvas. Jako ┼╝e nie jest on wstawiany na stron─Ö, nigdy nie zostanie wy┼Ťwietlony. Unosi si─Ö tylko leniwie w pami─Öci, jak ┼é├│dka na spokojnej rzece.

return !!document.createElement('canvas').getContext;

Po utworzeniu elementu canvas sprawdzamy czy ma metod─Ö getContext(). Metoda ta jest dost─Öpna tylko, je┼Ťli przegl─ůdarka obs┼éuguje API canvas.

return !!document.createElement('canvas').getContext;

Na koniec stosujemy sztuczk─Ö z podw├│jn─ů negacj─ů, aby wymusi─ç wynik w postaci warto┼Ťci logicznej (true lub false).

return !!document.createElement('canvas').getContext;

Za pomoc─ů tej funkcji mo┼╝na sprawdzi─ç obs┼éug─Ö wi─Ökszo┼Ťci sk┼éadnik├│w API canvas,wliczajc figury geometryczne, ┼Ťcie┼╝ki, gradienty oraz wzory. Nie wykryje zewn─Ötrznej biblioteki explorercanvas implementuj─ůcej API canvas w przegl─ůdarce Microsoft Internet Explorer.

Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi API canvas można użyć biblioteki Modernizr.

Sprawdzanie obsługi elementu canvas

if (Modernizr.canvas) {
  // narysujmy par─Ö figur!
} else {
  // brak standardowej obsługi :(
}

Istnieje osobny test do sprawdzania obsługi tekstowego API canvas. Jego opis znajduje się poniżej.

Tekstowe API canvas

Nawet je┼Ťli przegl─ůdarka obs┼éuguje API canvas, mo┼╝e nie obs┼éugiwa─ç API tekstowego canvas. API canvas z czasem ros┼éo i funkcje tekstowe zosta┼éy dodane w p├│┼║niejszym czasie jego istnienia. Niekt├│re przegl─ůdarki obs┼éugiwa┼éy element kanwy zanim jeszcze API tekstowe zosta┼éo uko┼äczone.

Obs┼éug─Ö API tekstowego canvas sprawdza si─Ö za pomoc─ů metody nr 2. Je┼Ťli przegl─ůdarka obs┼éuguje API, to utworzony obiekt DOM reprezentuj─ůcy element canvas ma metod─Ö getContext(). Je┼Ťli przegl─ůdarka nie obs┼éuguje API canvas, to utworzony obiekt DOM dla elementu canvas ma tylko standardowe w┼éasno┼Ťci i nie ma ┼╝adnej z charakterystycznych tylko dla tego elementu.

function supports_canvas_text() {
  if (!supports_canvas()) { return false; }
  var dummy_canvas = document.createElement('canvas');
  var context = dummy_canvas.getContext('2d');
  return typeof context.fillText == 'function';
}

Funkcja ta zaczyna dzia┼éanie od sprawdzenia obs┼éugi elementu canvas, u┼╝ywaj─ůc do tego celu opisanej wcze┼Ťniej funkcji supports_canvas(). Je┼Ťli przegl─ůdarka nie obs┼éuguje API canvas, to z pewno┼Ťci─ů nie obs┼éuguje te┼╝ jego API tekstowego!

if (!supports_canvas()) { return false; }

Nast─Öpnie tworzymy atrap─Ö elementu canvas i pobieramy jego kontekst rysowania. Mamy pewno┼Ť─ç, ┼╝e to zadzia┼éa, poniewa┼╝ funkcja supports_canvas() ju┼╝ sprawdzi┼éa, czy obiekty canvas maj─ů metod─Ö getContext().

  var dummy_canvas = document.createElement('canvas');
  var context = dummy_canvas.getContext('2d');

Na koniec sprawdzamy czy kontekst rysunkowy ma funkcj─Ö fillText(). Je┼Ťli tak, to API tekstowe canvas jest dost─Öpne. Hurrrra!

  return typeof context.fillText == 'function';

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi API tekstowego canvas można użyć biblioteki Modernizr.

Sprawdzanie obsługi API tekstowego canvas

if (Modernizr.canvastext) {
  // narysujmy troch─Ö tekstu!
} else {
  // brak standardowej obsługi tekstu :(
}

Wideo

W specyfikacji j─Özyka HTML5 zdefiniowano nowy element o nazwie video s┼éu┼╝─ůcy do osadzania film├│w na stronach internetowych. Wcze┼Ťniej aby odtworzy─ç film opublikowany na stronie internetowej, trzeba by┼éo mie─ç zainstalowan─ů zewn─Ötrzn─ů wtyczk─Ö, np. Apple QuickTime® albo Adobe Flash®.

Element video jest tak zaprojektowany, aby mo┼╝na by┼éo go u┼╝ywa─ç bez ┼╝adnych skrypt├│w wykrywaj─ůcych. Mo┼╝na okre┼Ťli─ç kilka format├│w plik├│w wideo, a przegl─ůdarki obs┼éuguj─ůce element video HTML5 wybior─ů odpowiedni dla siebie. (Zobacz „A gentle introduction to video encoding” part 1: container formats i part 2: lossy video codecs, aby dowiedzie─ç si─Ö wi─Öcej o formatach wideo.)

Przegl─ůdarki nie obs┼éuguj─ůce wideo HTML5 ignoruj─ů element video, ale mo┼╝na to obr├│ci─ç na swoj─ů korzy┼Ť─ç nakazuj─ůc im w takim przypadku odtworzenie filmu w zewn─Ötrznej wtyczce. Kroc Camen opracowa┼é rozwi─ůzanie o nazwie Video for Everybody!, kt├│re wykorzystuje wideo HTML5, je┼Ťli jest to mo┼╝liwe i prze┼é─ůcza si─Ö awaryjnie na QuickTime lub Flash w przypadku starszych przegl─ůdarek. W rozwi─ůzaniu tym nie jest u┼╝ywany j─Özyk JavaScript, dzi─Öki czemu dzia┼éa ono w dos┼éownie ka┼╝dej przegl─ůdarce, wliczaj─ůc aplikacje mobilne.

Je┼Ťli jednak chcesz zrobi─ç co┼Ť wi─Öcej z filmem ni┼╝ tylko go umie┼Ťci─ç na stronie i odtworzy─ç, musisz u┼╝y─ç JavaScriptu. Obs┼éug─Ö wideo sprawdza si─Ö przy u┼╝yciu techniki nr 2. Je┼Ťli przegl─ůdarka obs┼éuguje wideo HTML5, to utworzony obiekt DOM reprezentuj─ůcy element video ma metod─Ö canPlayType(). Je┼Ťli przegl─ůdarka nie obs┼éuguje wideo HTML5, to utworzony obiekt DOM dla elementu video ma tylko standardowe w┼éasno┼Ťci i nie ma ┼╝adnej z charakterystycznych tylko dla tego elementu. Obs┼éug─Ö wideo mo┼╝na sprawdzi─ç za pomoc─ů poni┼╝szej funkcji:

function supports_video() {
  return !!document.createElement('video').canPlayType;
}

Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi wideo HTML5 można użyć biblioteki Modernizr.

Sprawdzanie obsługi wideo HTML5

if (Modernizr.video) {
  // w┼é─ůczmy jaki┼Ť film!
} else {
  // brak standardowej obsługi wideo :(
  // mo┼╝e warto sprawdzi─ç czy dost─Öpne s QuickTime albo Flash
}

W rozdziale na temat wideo w sieci opisane jest jeszcze inne rozwi─ůzanie, dzi─Öki kt├│remu mo┼╝na wykorzysta─ç opisane tutaj techniki wykrywania do konwersji element├│w video na odtwarzacze Flash dla przegl─ůdarek nie obs┼éuguj─ůcych wideo HTML5.

Do sprawdzania kt├│re formaty wideo obs┼éuguje przegl─ůdarka s┼éu┼╝y inny test, kt├│rego opis znajduje si─Ö poni┼╝ej.

Formaty wideo

Formaty wideo s─ů jak naturalne j─Özyki. W polskiej gazecie mog─ů znajdowa─ç si─Ö te same informacje, co w gazecie hiszpa┼äskiej, ale je┼Ťli znasz tylko j─Özyk polski to hiszpa┼äska gazeta b─Ödzie dla ciebie bezu┼╝yteczna. Aby odtworzy─ç film, przegl─ůdarka musi zna─ç „j─Özyk”, w kt├│rym film ten zosta┼é napisany.

J─Özyk filmu wideo nazywa si─Ö kodekiem — jest to algorytm s┼éu┼╝─ůcy do kodowania filmu w postaci strumienia bit├│w. Na ┼Ťwiecie u┼╝ywa si─Ö wielu r├│┼╝nych kodek├│w. Kt├│ry w takim razie powinienem wybra─ç? W j─Özyku HTML5 wyst─Öpuje problem polegaj─ůcy na tym, ┼╝e producenci przegl─ůdarek nie mog─ů si─Ö zgodzi─ç na jeden wsp├│lny kodek. Wydaje si─Ö jednak, ┼╝e w grze pozosta┼éy ju┼╝ tylko dwa. Jeden jest p┼éatny (ze wzgl─Ödu na patent), ale dzia┼éa w przegldarce Safari i w iPhonie. (Dzia┼éa te┼╝ we Flashu, je┼Ťli u┼╝ywasz rozwi─ůzania typu Wideo dla ka┼╝dego!) Drugi kodek jest darmowy i dzia┼éa we wszystkich przegl─ůdarkach o otwartym kodzie ┼║r├│d┼éowym, jak Chromium i Mozilla Firefox.

Obs┼éug─Ö format├│w wideo sprawdza si─Ö przy u┼╝yciu techniki nr 3. Je┼Ťli przegl─ůdarka obs┼éuguje wideo HTML5, to utworzony obiekt DOM reprezentuj─ůcy element video ma metod─Ö canPlayType(). Wykorzystuj─ůc t─Ö metod─Ö mo┼╝na si─Ö dowiedzie─ç, czy przegl─ůdarka obs┼éuguje wybrany format wideo.

Poni┼╝sza funkcja sprawdza obs┼éug─Ö opatentowanego formatu obs┼éugiwanego w komputerach Mac i iPhone’ach.

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

Funkcja rozpoczyna dzia┼éanie od sprawdzenia obs┼éugi wideo HTML5 przy u┼╝yciu funkcji supports_video(), kt├│ra zosta┼éa przedstawiona w poprzedniej cz─Ö┼Ťci rozdzia┼éu. Je┼Ťli przegl─ůdarka nie obs┼éuguje wideo HTML5, to z pewno┼Ťci─ů nie obs┼éuguje te┼╝ ┼╝adnych format├│w wideo!

  if (!supports_video()) { return false; }

Nast─Öpnie funkcja tworzy atrap─Ö elementu video (nie do┼é─ůcza go do strony, dzi─Öki czemu nie jest on widoczny) i wywo┼éuje metod─Ö canPlayType(). Mamy pewno┼Ť─ç, ┼╝e metoda ta jest dost─Öpna, poniewa┼╝ sprawdzi┼éa to funkcja supports_video().

  var v = document.createElement("video");

Format wideo to w istocie kombinacja kilku sk┼éadnik├│w. Pos┼éuguj─ůc si─Ö ┼Ťci┼Ťle techniczn─ů terminologi─ů mo┼╝na powiedzie─ç, ┼╝e sprawdzamy czy przegl─ůdarka potrafi odtwarza─ç wideo w formacie H.264 Baseline i audio AAC LC w kontenerze MPEG-4. (Poj─Öcia te s─ů dok┼éadnie obja┼Ťnione w rozdziale o wideo. Mo┼╝e te┼╝ Ci─Ö zaciekawi─ç artyku┼é A gentle introduction to video encoding — Bezbolesne wprowadzenie do kodowania wideo.)

  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

Funkcja canPlayType() nie zwraca warto┼Ťci true ani false. Bior─ůc pod uwag─Ö fakt, ┼╝e formaty wideo s─ů bardzo skomplikowane, funkcja ta zwraca jeden z poni┼╝szych ┼éa┼äcuch├│w:

  • "probably" — je┼Ťli jest du┼╝e prawdopodobie┼ästwo, ┼╝e przegl─ůdarka potrafi odtworzy─ç filmy w danym formacie
  • "maybe" — je┼Ťli przegl─ůdarce „si─Ö wydaje”, ┼╝e uda si─Ö jej odtworzy─ç film w danym formacie
  • "" (pusty ┼éa┼äcuch) — je┼Ťli jest pewne, ┼╝e przegl─ůdarka nie obs┼éuguje danego formatu

Poni┼╝sza funkcja sprawdza obs┼éug─Ö otwartego formatu wideo obs┼éugiwanego przez Firefoksa i inne otwarte przegl─ůdarki. Proces sprawdzania jest prawie taki sam, jak poprzednio. Jedyna r├│┼╝nica dotyczy ┼éa┼äcucha przekazywanego do funkcji canPlayType(). Pos┼éuguj─ůc si─Ö ┼Ťci┼Ťle techniczn─ů terminologi─ů pytamy przegl─ůdark─Ö czy potrafi odtwarza─ç wideo w formacie Theora i audio Vorbis w kontenerze Ogg.

function supports_ogg_theora_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}

Powsta┼é te┼╝ nowy otwarty kodek wideo WebM (nie obci─ů┼╝ony ┼╝adnymi patentami), kt├│ry b─Ödzie obs┼éugiwany przez przysz┼ée wersje wszystkich najwa┼╝niejszych przegl─ůdarek, wliczaj─ůc Chrome, Firefoksa i Oper─Ö. Obs┼éug─Ö formatu WebM mo┼╝na sprawdzi─ç w taki sam spos├│b, jak poprzednich.

function supports_webm_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}

Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi różnych formatów wideo HTML5 można użyć biblioteki Modernizr ( 1.5 lub nowszej).

Sprawdzanie obsługi formatów wideo HTML5

if (Modernizr.video) {
  // w┼éczmy jaki┼Ť film! ale jakiego rodzaju?
  if (Modernizr.video.webm) {
    // spr├│bujmy WebM
  } else if (Modernizr.video.ogg) {
    // spr├│bujmy Ogg Theora + Vorbis w kontenerze Ogg
  } else if (Modernizr.video.h264){
    // spr├│bujmy H.264 + AAC w kontenerze MP4
  }
}

Przechowywanie danych w przegl─ůdarce

Web storage to dost─Öpna w HTML5 technika przechowywania informacji na komputerach u┼╝ytkownik├│w i pobierania ich stamt─ůd. Sama koncepcja jest podobna do cookie, ale w tym przypadku mo┼╝liwe jest przechowywanie wi─Ökszych ilo┼Ťci danych. Pliki cookie maj─ů ograniczone rozmiary i przegl─ůdarki wysy┼éaj─ů je do serwera w ka┼╝dym ┼╝─ůdaniu strony (co zajmuje czas i poch┼éania cenne zasoby). Magazyn Web storage pozostaje na komputerze i mo┼╝na go u┼╝ywa─ç poprzez JavaScript tak┼╝e po za┼éadowaniu strony.

Pytanie do profesora Kodeckiego

P: Czy technologia Web Storage jest cz─Ö┼Ťci─ů specyfikacji HTML5? Dlaczego jest opisana w osobnym dokumencie?
O: Tak, Web Storage wchodzi w sk┼éad specyfikacji HTML5. Kiedy┼Ť technologia ta by┼éa cz─Ö┼Ťci─ů g┼é├│wnej specyfikacji HTML5, ale zosta┼éa wydzielona do osobnego dokumentu, poniewa┼╝ wiele os├│b narzeka┼éo, ┼╝e HTML5 jest zbyt du┼╝y. Je┼Ťli kojarzy Ci si─Ö to z krojeniem tortu, ┼╝eby mia┼é mniej kalorii… to witaj w niezwyk┼éym ┼Ťwiecie standard├│w sieciowych.

Sprawdzanie obs┼éugi technologii Web Storage wykonuje si─Ö za pomoc─ů metody nr 1. Je┼Ťli przegl─ůdarka obs┼éuguje technologi─Ö Web Storage, to globalny obiekt window ma w┼éasno┼Ť─ç localStorage. Je┼Ťli przegl─ůdarka nie obs┼éuguje technologii Web storage, to w┼éasno┼Ť─ç localStorage jest niezdefiniowana. Jednak z powodu nieszcz─Ösnego b┼é─Ödu w starszych wersjach przegl─ůdarki Firefox test ten powoduje zg┼éoszenie wyj─ůtku przy wy┼é─ůczonych cookie. Dlatego nale┼╝y go umie┼Ťci─ç w konstrukcji try-catch.

function supports_local_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch(e){
    return false;
  }
}

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi lokalnego magazynu danych można użyć biblioteki Modernizr (1.1 lub nowszej).

Sprawdzanie obsługi lokalnego magazynu danych

if (Modernizr.localstorage) {
  // w┼éasno┼Ť─ç window.localStorage jest dost─Öpna!
} else {
  // brak standardowej obsługi lokalnego magazynu :(
  // mo┼╝esz spr├│bowa─ç u┼╝y─ç Gears albo innego zewn─Ötrznego rozwi─ůzania
}

Pami─Ötaj, ┼╝e w j─Özyku JavaScript wielko┼Ť─ç liter ma znaczenie. Atrybut Modernizr nazywa si─Ö localstorage (same ma┼ée litery), natomiast w┼éasno┼Ť─ç DOM ma nazw─Ö window.localStorage (ma┼ée i wielkie litery).

Pytanie do profesora Kodeckiego

P: Czy magazyn danych HTML5 jest bezpieczny? Czy kto┼Ť mo┼╝e odczyta─ç z niego informacje?
O: Ka┼╝dy kto ma fizyczny dost─Öp do twojego komputera mo┼╝e przejrze─ç (a nawet zmodyfikowa─ç) zawarto┼Ť─ç lokalnego magazynu HTML5. W przegl─ůdarce witryny mog─ů przegl─ůda─ç tylko warto┼Ťci, kt├│re nale┼╝─ů do nich, nie maj─ů natomiast dost─Öpu do cudzych danych. Jest to tzw. ograniczenie wsp├│lnego miejsca pochodzenia.

Robotnicy sieciowi

Robotnicy sieciowi (ang. web worker) to technologia umo┼╝liwiajca uruchamianie skrypt├│w JavaScript w tle. Z grubsza m├│wi─ůc dzi─Öki niej mo┼╝na uruchomi─ç kilka dzia┼éaj─ůcych r├│wnocze┼Ťnie „w─ůtk├│w”. (Je┼Ťli nie rozumiesz o co dok┼éadnie chodzi, to por├│wnaj to sobie ze swoim komputerem, w kt├│rym masz uruchomionych kilka program├│w na raz). Dzia┼éaj─ůce w tle „w─ůtki” mog─ů wykonywa─ç skomplikowane obliczenia, wykonywa─ç ┼╝─ůdania sieciowe albo korzysta─ç z magazynu lokalnego, podczas gdy sama strona wykonuje polecenia u┼╝ytkownika, takie jak przewijanie tre┼Ťci, obs┼éuga klikni─Ö─ç czy wpisywanie tekstu itp.

Obs┼éug─Ö robotnik├│w sieciowych sprawdza si─Ö przy u┼╝yciu techniki nr 1. Je┼Ťli przegl─ůdarka obs┼éuguje API Web Worker, toglobalny obiekt window ma w┼éasno┼Ť─ç Worker. Je┼Ťli przegl─ůdarka nie obs┼éuguje API Web Worker, to w┼éasno┼Ť─ç Worker jest niezdefiniowana.

function supports_web_workers() {
  return !!window.Worker;
}

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi robotników sieciowych można użyć biblioteki Modernizr (w wersji od 1.1).

Sprawdzanie obsługi robotników sieciowych

if (Modernizr.webworkers) {
  // w┼éasno┼Ť─ç window.Worker jest dost─Öpna!
} else {
  // brak standardowej obsługi robotników sieciowych :(
  // mo┼╝esz spr├│bowa─ç u┼╝y─ç Gears albo innego zewn─Ötrznego rozwi─ůzania
}

Pami─Ötaj ┼╝e w j─Özyku JavaScript wielko┼Ť─ç liter ma znaczenie. Atrybut Modernizr nazywa si─Ö webworkers (same ma┼ée litery), natomiast obiekt DOM nazywa si─Ö window.Worker (s┼éowo Worker jest napisane wielk─ů liter─ů).

Czytanie statycznych stron bez po┼é─ůczenia z internetem jest ┼éatwe: wystarczy po┼é─ůczy─ç si─Ö z internetem, wczyta─ç stron─Ö, roz┼é─ůczy─ç si─Ö, a nast─Öpnie zaszy─ç si─Ö w chacie w lesie na odludziu i zg┼é─Öbia─ç lektur─Ö. (Dla zaoszcz─Ödzenia czasu mo┼╝na pomin─ů─ç cz─Ö┼Ť─ç z chat─ů). Ale co z takimi aplikacjami jak Gmail czy Google Docs? Dzi─Öki j─Özykowi HTML5 ka┼╝dy (nie tylko Google) mo┼╝e zbudowa─ç aplikacj─Ö sieciow─ů dzia┼éaj─ůc─ů tak┼╝e bez po┼é─ůczenia z internetem.

Aplikacje sieciowe offline przynajmniej przy pierwszym u┼╝yciu musz─ů by─ç online. Przy pierwszej wizycie u┼╝ytkownika na takiej stronie serwer informuje przegldark─Ö, kt├│re pliki s─ů potrzebne do dzia┼éania aplikacji po od┼é─ůczeniu internetu. Mo┼╝e to by─ç wszystko — pliki HTML, JavaScript, obrazy, a nawet wideo. Gdy przegl─ůdarka pobierze wszystkie potrzebne pliki, b─Ödzie mo┼╝na korzysta─ç ze strony nawet nie maj─ůc po┼é─ůczenia z internetem. przegl─ůdarka wykryje, ┼╝e internet jest od┼é─ůczony i b─Ödzie u┼╝ywa─ç plik├│w, kt├│re wcze┼Ťniej pobra┼éa. Po pod┼é─ůczeniu internetu wszystkie wprowadzone zmiany mog─ů zosta─ç wys┼éane na serwer.

Obs┼éug─Ö tej technologii sprawdza si─Ö przy u┼╝yciu techniki nr 1. Je┼Ťli przegl─ůdarka obs┼éuguje aplikacje sieciowe offline, to globalny obiekt window ma w┼éasno┼Ť─ç applicationCache. Je┼Ťli przegl─ůdarka nie obs┼éuguje aplikacji sieciowych offline, w┼éasno┼Ť─ç applicationCache jest niezdefiniowana. Obs┼éug─Ö tej technologii mo┼╝na sprawdzi─ç za pomoc─ů poni┼╝szej funkcji:

function supports_offline() {
  return !!window.applicationCache;
}

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi aplikacji sieciowych offline można użyć biblioteki Modernizr (w wersji od 1.1).

Sprawdzanie obsługi aplikacji sieciowych offline

if (Modernizr.applicationcache) {
  // w┼éasno┼Ť─ç window.applicationCache jest dost─Öpna!
} else {
  // brak standardowej obsługi aplikacji sieciowych offline :(
  // mo┼╝esz spr├│bowa─ç u┼╝y─ç Gears albo innego zewn─Ötrznego rozwi─ůzania
}

Pami─Ötaj ┼╝e w j─Özyku JavaScript wielko┼Ť─ç liter ma znaczenie. Atrybut Modernizr nazywa si─Ö applicationcache (same ma┼ée litery), natomiast obiekt DOM ma nazw─Ö window.applicationCache (ma┼ée i wielkie litery).

Geolokalizacja

Geolokalizacja to sztuka okre┼Ťlania swojego po┼éo┼╝enia na ziemi i ewentualnie dzielenia si─Ö t─ů informacj─ů z zaufanymi osobami. Istnieje kilka sposob├│w na okre┼Ťlenie swojej lokalizacji — poprzez adres IP, czy po┼é─ůczenie sieci bezprzewodowej, sprawdzenie z kt├│r─ů wie┼╝─ů telefonii kom├│rkowej ┼é─ůczy si─Ö telefon albo przy u┼╝yciu lokalizatora GPS obliczaj─ůcego szeroko┼Ť─ç i d┼éugo┼Ť─ç geograficzn─ů na podstawie informacji otrzymanych od satelity z nieba.

Pytanie do profesora Kodeckiego

P: Czy geolokalizacja jest składnikiem języka HTML5? Dlaczego o tym piszesz?
O: Obs┼éuga geolokalizacji jest aktualnie implementowana w przegl─ůdarkach, podobnie jak obs┼éuga nowych element├│w HTML5. ┼Üci┼Ťle rzecz bior─ů, nad standardem geolokalizacji pracuje grupa robocza ds. geolokalizacji, kt├│ra dzia┼éa niezale┼╝nie od grupy roboczej ds. HTML5. Mimo to zamie┼Ťci┼éem w tej ksi─ů┼╝ce opis geolokalizacji, poniewa┼╝ jest ona wa┼╝n─ů cz─Ö┼Ťci─ů procesu ewolucji sieci, kt├│rego jeste┼Ťmy ┼Ťwiadkami.

Obs┼éug─Ö geolokalizacji sprawdza si─Ö przy u┼╝yciu techniki nr 1. Je┼Ťli przegl─ůdarka obs┼éuguje API geolokalizacji, to globalny obiekt navigator ma w┼éasno┼Ť─ç geolocation. Je┼Ťli przegl─ůdarka nie obs┼éuguje API geolokalizacji, to navigator nie ma w┼éasno┼Ťci geolocation. Poni┼╝ej przedstawiony jest spos├│b wykrywania obs┼éugi geolokalizacji:

function supports_geolocation() {
  return 'geolocation' in navigator;
}

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi API geolokalizacji można użyć biblioteki Modernizr.

Sprawdzanie obsługi geolokalizacji

if (Modernizr.geolocation) {
  // sprawd┼║my gdzie jeste┼Ť!
} else {
  // brak standardowej obsługi geolokalizacji :(
  // mo┼╝esz spr├│bowa─ç u┼╝y─ç Gears albo innego zewn─Ötrznego rozwi─ůzania
}

Je┼Ťli przegl─ůdarka nie obs┼éuguje API geolokalizacji, to i tak nie wszystko jeszcze stracone. Firma Google udost─Öpnia darmowy dodatek do przegl─ůdarek o nazwie Gears, kt├│rego mo┼╝na u┼╝ywa─ç w systemach Windows, Mac, Linux, Windows Mobile oraz Android. Wtyczka ta dodaje do starszych przegl─ůdarek wszystkie opisane w tym rozdziale nowe funkcje. Jedn─ů z nich jest te┼╝ obs┼éuga API geolokalizacji. Nie jest to to samo, co API navigator.geolocation, ale s┼éu┼╝y do tego samego celu.

W starszych platformach mobilnych istniej─ů te┼╝ indywidualne API geolokalizacji, dotyczy to np. platform BlackBerry, Nokia, Palm oraz OMTP BONDI.

Szczegółowy do bólu opis sposobu obsługi tych API znajduje się w rozdziale o geolokalizacji.

Typy p├│l formularza

Pewnie wiesz wszystko o formularzach sieciowych, prawda? Utw├│rz formularz, dodaj do niego kilka element├│w input type="text" i par─Ö element├│w input type="password" oraz przycisk input type="submit".

Tak naprawd─Ö to nie znasz nawet po┼éowy typ├│w p├│l wej┼Ťciowych. W HTML5 zdefiniowano kilkana┼Ťcie nowych typ├│w p├│l, kt├│rych mo┼╝na ju┼╝ u┼╝ywa─ç do budowy formularzy.

  1. <input type="search"> — do tworzenia p├│l wyszukiwania
  2. <input type="number"> — do tworzenia p├│l wyboru warto┼Ťci liczbowej
  3. <input type="range"> — do tworzenia suwak├│w
  4. <input type="color"> — do tworzenia element├│w wyboru koloru
  5. <input type="tel"> — do tworzenia p├│l na numer telefonu
  6. <input type="url"> — do tworzenia p├│l na adresy internetowe
  7. <input type="email"> — do tworzenia p├│l na adresy e-mail
  8. <input type="date"> — do tworzenia element├│w do wyboru daty
  9. <input type="month"> — do tworzenia element├│w, w kt├│rych mo┼╝na wybra─ç miesi─ůc
  10. <input type="week"> — do tworzenia element├│w, w kt├│rych mo┼╝na wybra─ç tydzie┼ä
  11. <input type="time"> — na znaczniki czasowe
  12. <input type="datetime"> — na dok┼éadne znaczniki data + godzina
  13. <input type="datetime-local"> — na lokalne daty i godziny

Sprawdzanie obs┼éugi typ├│w p├│l wej┼Ťciowych HTML5 wymaga zastosowania metody 4. Najpierw tworzy si─Ö w pami─Öci atrap─Ö elementu input. Domy┼Ťlnym typem tych element├│w jest "text". Wkr├│tce si─Ö przekonasz, ┼╝e jest to bardzo wa┼╝na informacja.

  var i = document.createElement("input");

Następnie ustawiamy atrybut type atrapy utworzonego elementu na typ, którego obsługę chcemy sprawdzić.

  i.setAttribute("type", "color");

Je┼Ťli przegl─ůdarka obs┼éuguje wybrany typ, w┼éasno┼Ť─ç type zachowa ustawion─ů jej warto┼Ť─ç. Je┼Ťli przegl─ůdarka nie obs┼éuguje okre┼Ťlonego typu, zignoruje ustawion─ů przez ciebie warto┼Ť─ç i w┼éasno┼Ť─ç type b─Ödzie mia┼éa warto┼Ť─ç "text".

  return i.type !== "text";

Zamiast pisa─ç 13 funkcji osobno do sprawdzenia obs┼éugi wszystkich typ├│w p├│l mo┼╝na u┼╝y─ç biblioteki Modernizr. Biblioteka ta dzia┼éa bardzo wydajnie, poniewa┼╝ sprawdza wszystkie 13 typ├│w przy u┼╝yciu jednego elementu input. Nast─Öpnie tworzy tablic─Ö skr├│t├│w o nazwie Modernizr.inputtypes zawieraj─ůc─ů 13 kluczy (atrybut├│w HTML type) i 13 warto┼Ťci logicznych (true je┼Ťli typ jest obs┼éugiwany i false w przeciwnym przypadku).

Sprawdzanie obsługi elementu wyboru daty

if (!Modernizr.inputtypes.date) {
  // brak standardowej obsługi elementu <input type="date"> :(
  // możesz zbudować własny przy użyciu bibliotek Dojo albo jQueryUI
}

Tekst zast─Öpczy

Opr├│cz dodania nowych typ├│w p├│l wej┼Ťciowych w HTML5 zaimplementowano te┼╝ kilka ulepsze┼ä w istniej─ůcych typach. Jednym z nich jest mo┼╝liwo┼Ť─ç ustawiania tekstu zast─Öpczego w polach wej┼Ťciowych. Tekst zast─Öpczy (ang. placeholder text) to napis wy┼Ťwietlany w polu wej┼Ťciowym, gdy jest puste i nieaktywne. Gdy u┼╝ytkownik w nim kliknie (albo przejdzie do niego za pomoc─ů klawisza Tab), tekst zast─Öpczy znika. Je┼Ťli nie mo┼╝esz sobie tego wyobrazi─ç, w rozdziale o formularzach znajduje si─Ö przedstawiaj─ůcy to zrzut ekranu.

Obs┼éug─Ö tej funkcji sprawdza si─Ö przy u┼╝yciu techniki nr 2. Je┼Ťli przegl─ůdarka obs┼éuguje tekst zast─Öpczy w polach wej┼Ťciowych, obiekt DOM reprezentuj─ůcy element input ma w┼éasno┼Ť─ç placeholder (nawet gdy w kodzie HTML nie zostanie zdefiniowany atrybut placeholder). Je┼Ťli przegl─ůdarka nie obs┼éuguje tekstu zast─Öpczego, obiekt DOM reprezentuj─ůcy element input nie ma w┼éasno┼Ťci placeholder.

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi tekstu zastępczego można użyć biblioteki Modernizr (1.1 lub nowszej).

Sprawdzanie obsługi tekstu zastępczego

if (Modernizr.input.placeholder) {
  // tw├│j tekst zast─Öpczy powinien by─ç widoczny!
} else {
  // brak obsługi tekstu zastępczego :(
  // zastosowanie skryptu awaryjnego
}

Automatyczne aktywowanie p├│l formularza

Aby automatycznie przenie┼Ť─ç kursor do wybranego pola formularza na stronie, mo┼╝na u┼╝y─ç JavaScriptu. Na przyk┼éad po wej┼Ťciu na stron─Ö Google.com mo┼╝na od razu zacz─ů─ç wpisywa─ç szukan─ů fraz─Ö, poniewa┼╝ kursor zostanie automatycznie umieszczony w polu wyszukiwania. Podczas gdy dla wi─Ökszo┼Ťci u┼╝ytkownik├│w jest to bardzo wygodne, niekt├│rym zaawansowanym i nietypowym u┼╝ytkownikom mo┼╝e to przeszkadza─ç. Je┼Ťli kto┼Ť naci┼Ťnie spacj─Ö spodziewaj─ůc si─Ö przewini─Öcia strony, to b─Ödzie zawiedziony, poniewa┼╝ jego czynno┼Ť─ç zostanie wykonana w polu formularza. (Po prostu w polu tym zostanie wpisana spacja). Je┼Ťli podczas ┼éadowania strony klikniemy w jakim┼Ť polu formularza, to po zako┼äczeniu wczytywania strony „pomocny” skrypt mo┼╝e z powrotem przenie┼Ť─ç kursor do domy┼Ťlnego pola, przez co przeszkodzi nam w pracy i spowoduje, ┼╝e b─Ödziemy pisa─ç w niew┼éa┼Ťciwym miejscu.

Jako ┼╝e funkcja ta jest realizowana poprzez JavaScript, mo┼╝e by─ç trudno zaprogramowa─ç obs┼éug─Ö tych wszystkich nietypowych przypadk├│w, a osoby kt├│re nie chc─ů, aby „kradziono” im kursor w og├│le nie maj─ů zbyt wielu mo┼╝liwo┼Ťci obrony.

Aby rozwi─ůza─ç ten problem, w HTML5 wprowadzono atrybut autofocus dla wszystkich element├│w formularzy. Dzia┼éanie tego atrybutu jest dok┼éadnie takie, na jakie wskazuje jego nazwa: przenosi fokus do wybranego pola wej┼Ťciowego. Dzi─Öki temu ┼╝e funkcja ta jest realizowana poprzez kod HTML a nie skrypty, dzia┼éa jednakowo we wszystkich przegl─ůdarkach. Ponadto producenci przegl─ůdarek (i tw├│rcy rozszerze┼ä) mog─ů udost─Öpni─ç u┼╝ytkownikom opcj─Ö wy┼é─ůczenia tej funkcji.

Obs┼éug─Ö funkcji automatycznego fokusu sprawdza si─Ö przy u┼╝yciu techniki nr 2. Je┼Ťli przegl─ůdarka j─ů obs┼éuguje, obiekt DOM reprezentuj─ůcy element input ma w┼éasno┼Ť─ç autofocus (nawet gdy w kodzie HTML nie zostanie zdefiniowany atrybut autofocus). Je┼Ťli przegl─ůdarka nie obs┼éuguje funkcji automatycznego fokusu dla element├│w formularzy, obiekt DOM reprezentujcy element input nie ma w┼éasno┼Ťci autofocus. Obs┼éug─Ö automatycznego fokusu mo┼╝na sprawdzi─ç za pomoc─ů poni┼╝szej funkcji:

function supports_input_autofocus() {
  var i = document.createElement('input');
  return 'autofocus' in i;
}

Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi automatycznego fokusu można użyć biblioteki Modernizr (1.1 lub nowszej).

Sprawdzanie obsługi automatycznego fokusu

if (Modernizr.input.autofocus) {
  // działa!
} else {
  // brak obsługi automatycznego fokusu :(
  // zastosowanie skryptu awaryjnego
}

Mikrodane

Mikrodane to standard umo┼╝liwiaj─ůcy zdefiniowanie dodatkowej semantyki na stronach internetowych. Za ich pomoc─ů mo┼╝na np. zadeklarowa─ç, ┼╝e opublikowane zdj─Öcie jest dost─Öpne na licencji Creative Commons. W rozdziale o mikrodanych dowiesz si─Ö np. jak za pomoc─ů mikrodanych oznaczy─ç stron─Ö typu „O mnie”. Przegl─ůdarki i ich rozszerzenia oraz wyszukiwarki mog─ů zamieni─ç mikrodane HTML w wizyt├│wk─Ö vCard, kt├│ra jest standardowym formatem udost─Öpniania informacji kontaktowych. Mo┼╝na tak┼╝e definiowa─ç w┼éasne s┼éowniki mikrodanych.

Standard mikrodanych HTML5 zawiera zar├│wno kod HTML (przeznaczony przede wszystkim dla wyszukiwarek) jak i zbi├│r funkcji DOM (przede wszystkim dla przegl─ůdarek). Dodanie mikrodanych do strony w niczym nie szkodzi. Ich kod sk┼éada si─Ö tylko z kilku atrybut├│w, kt├│re przez nierozpoznaj─ůce ich wyszukiwarki s─ů po prostu ignorowane. Je┼Ťli jednak chcesz uzyska─ç dost─Öp do mikrodanych poprzez DOM, musisz sprawdzi─ç, czy przegl─ůdarka obs┼éuguje API DOM mikrodanych.

Sprawdzanie obs┼éugi API mikrodanych HTML5 wykonuje si─Ö przy u┼╝yciu techniki nr 1. Je┼Ťli przegl─ůdarka obs┼éuguje API mikrodanych HTML5, to globalny obiekt document ma funkcj─Ö getItems(). Je┼Ťli przegl─ůdarka nie obs┼éuguje mikrodanych, funkcja getItems() jest niezdefiniowana.

function supports_microdata_api() {
  return !!document.getItems;
}

Biblioteka Modernizr aktualnie nie ma funkcji do sprawdzania obsługi API mikrodanych, a więc musisz używać funkcji podobnej do pokazanej powyżej.

API historii HTML5 jest standardowym sposobem na manipulowanie histori─ů przegl─ůdarki poprzez skrypt. Cz─Ö┼Ť─ç tego API — nawigacja po historii — by┼éa dost─Öpna ju┼╝ we wcze┼Ťniejszych wersjach j─Özyka HTML. Nowa cz─Ö┼Ť─ç dodana w HTML5 pozwala dodawa─ç elementy do historii przegl─ůdarki i reagowa─ç na zdarzenia ich usuni─Öcia ze stosu, gdy u┼╝ytkownik naci┼Ťnie przycisk Wstecz. Dzi─Öki temu adres URL mo┼╝e pe┼éni─ç rol─Ö unikatowego identyfikatora dla bie┼╝─ůcego zasobu nawet w aplikacjach zawieraj─ůcych du┼╝o skrypt├│w, kt├│re nigdy nie od┼Ťwie┼╝aj─ů strony w ca┼éo┼Ťci.

Sprawdzanie obs┼éugi API historii HTML5 polega na u┼╝yciu techniki nr 1. Je┼Ťli przegl─ůdarka obs┼éuguje API historii HTML5 to globalny obiekt history ma funkcj─Ö pushState(). Je┼Ťli przegl─ůdarka nie obs┼éuguje API historii, funkcja pushState() jest niezdefiniowana.

function supports_history_api() {
  return !!(window.history && history.pushState);
}

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi API historii HTML5 można użyć biblioteki Modernizr (1.6 lub nowszej).

sprawdzanie obsługi API historii

if (Modernizr.history) {
  // mo┼╝na manipulowa─ç histori─ů!
} else {
  // brak obsługi historii :(
  // zastosowanie skryptu awaryjnego, np. History.js
}

Lektura uzupe┼éniaj─ůca

Specyfikacje i standardy:

Biblioteki JavaScript:

Różne artykuły i kursy:

Autor: Mark Pilgrim

Źródło: http://diveintohtml5.info/

Tłumaczenie: Łukasz Piwko

Tre┼Ť─ç tej strony jest dost─Öpna na zasadach licencji CC BY 3.0