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