Dziewczyna wyglądająca przez okno

03 czerwca 2013 · 0 komentarzy

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (głosów: 3, średnia ocena: 5,00)
Loading ... Loading ...

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

W rozdziale:

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 (DOM —Document 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.)

dziewczynka wyglądająca przez okno

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 :(
}

W rozdziale:

Historia HTML Kurs HTML5

Narzędzia

FavoriteLoadingDodaj do przechowalni

Dodaj komentarz









Dołącz do nas na Facebooku

Newsletter

Subskrybując nasz newsletter masz pewność, że nie ominie Cię żadna nowość w serwisie!