10 czerwca 2013 · 0 komentarzy

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

Jak przeglądarki obsługują nieznane im elementy

Każda przeglądarka ma zdefiniowaną listę obsługiwanych przez siebie elementów HTML. Przykładowo lista Firefoksa jest przechowywana w pliku nsElementTable.cpp. Jeśli jakiegoś elementu nie ma na tej liście, to uważa się go za „nieznany”. Z nieznanymi elementami są dwa problemy:

  1. Jak taki element ma być formatowany? Domyślnie przed i za elementem p wstawiana jest pusta przestrzeń o określonym rozmiarze, element blockquote jest wcięty za pomocą lewego marginesu, a element h1 ma powiększony rozmiar pisma. Ale jakie domyślne style zastosować do nieznanych elementów?
  2. Jak powinien wyglądać DOM nieznanego elementu? Plik nsElementTable.cpp Mozilli zawiera informacje o tym, jakiego rodzaju elementy może zawierać każdy element. Jeśli napiszemy kod <p><p>, to drugi akapit domyślnie stanowi zamknięcie pierwszego, dzięki czemu elementy te są w strukturze dokumentu równorzędne. Jeśli jednak napiszemy <p><span>, to element span nie oznacza zamknięcia akapitu, ponieważ Firefox wie, że <p> jest elementem blokowym mogącym zawierać śródliniowy element <span>. Dlatego element <span> w tym przypadku będzie potomkiem elementu <p> w strukturze DOM.

Odpowiedź na postawione pytania zależy od przeglądarki. (Dziwne, prawda?) Z wszystkich najważniejszych przeglądarek najwięcej problemów w tej kwestii sprawia Internet Explorer Microsoftu, ale tak naprawdę każda przeglądarka potrzebuje trochę pomocy.

Odpowiedź na pierwsze pytanie powinna być względnie prosta: nie nadawać żadnego specjalnego formatowania nieznanym elementom. Niech normalnie dziedziczą własności CSS po elementach nadrzędnych i niech autor strony zatroszczy się o ich konkretne formatowanie. I w zasadzie tak jest, ale trzeba uważać na jedną pułapkę.

Pytanie do profesora Kodeckiego

Wszystkie przeglądarki nieznane elementy prezentują jako śródliniowe, tzn. tak, jakby miały zdefiniowane ustawienie CSS display:inline.

Ale niektóre nowe elementy HTML5 są blokowe. To znaczy, że mogą zawierać inne elementy blokowe i przeglądarki obsługujące HTML5 domyślnie przypisują im ustawienie display:block. Jeśli chcesz ich używać w starszych przeglądarkach, musisz im tę deklarację przypisać własnoręcznie:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

(Powyższy kod został podkradziony z resetu CSS dla HTML5 Richa Clarka. Reset ten robi jeszcze kilka innych rzeczy, których opis nie należy do tematu tego rozdziału.)

Ale to nie wszystko. Jest gorzej niż myślisz! Internet Explorer do wersji 8 włącznie w ogóle nie stosuje arkuszy stylów do nieznanych elementów. Załóżmy na przykład, że mamy na stronie poniższy kod:

<style type="text/css">
  article { display: block; border: 1px solid red }
</style>
...
<article>
<h1>Witaj w Initech</h1>
<p>To jest twój <span>pierwszy dzień</span>.</p>
</article>

Internet Explorer do wersji 8 włącznie nie potraktuje elementu article jako blokowego ani nie zastosuje wokół niego czerwonego obramowania. Wszystkie reguły CSS odnoszące się do tego elementu w tej przeglądarce zostaną zignorowane. W Internet Explorerze 9 usterkę tę już naprawiono.

Drugi problem dotyczy struktury DOM dokumentu z uwzględnieniem nieznanych elementów. W tym przypadku również najwięcej trudności sprawiają starsze wersje Internet Explorera (starsze od wersji 9, w której już usterkę usunięto). Gdy IE 8 nie rozpoznaje elementu po nazwie, wstawia go do drzewa DOM jako pusty nie mający dzieci węzeł. Z tego powodu wszystkie elementy, które powinny być bezpośrednimi potomkami tego nieznanego elementu są z nim równorzędne.

Poniżej znajduje się atrakcyjna grafika ASCII, która doskonale ilustruje omawiany problem. Tak wygląda DOM według struktury kodu HTML5:

article
|
+--h1 (dziecko elementu article)
|  |
|  +--text node "Witaj w Initech"
|
+--p (dziecko elementu article, brat elementu h1)
   |
   +--text node "To jest twój "
   |
   +--span
   |  |
   |  +--text node "pierwszy dzień"
   |
   +--text node "."

A taką strukturę DOM utworzy Internet Explorer:

article (brak dzieci)
h1 (brat elementu article)
|
+--text node "Witaj w Initech"
p (brat elementu h1)
|
+--text node "To jest twój "
|
+--span
|  |
|  +--text node "pierwszy dzień"
|
+--text node "."

Na szczęście istnieje genialne rozwiązanie tego problemu. Przed użyciem elementu <article> na stronie wystarczy utworzyć jego atrapę za pomocą JavaScriptu, aby Internet Explorer magicznie zaczął go rozpoznawać i stosować do niego arkusze CSS. Nie trzeba nawet tej atrapy umieszczać w strukturze DOM. Wystarczy tylko raz utworzyć element na stronie, aby Internet Explorer nauczył się go rozpoznawać.

<html>
<head>
<style>
  article { display: block; border: 1px solid red }
</style>
<script>document.createElement("article");</script>
</head>
<body>
<article>
<h1>Witaj w Initech</h1>
<p>To jest twój <span>pierwszy dzień</span>.</p>
</article>
</body>
</html>

Sztuczka ta działa we wszystkich wersjach Internet Explorera aż do wersji 6! W ten sam sposób można włączyć obsługę wszystkich nowych elementów HTML5 na raz. Przypomnę, że nie są one wstawiane do drzewa DOM, a więc nigdy ich nie zobaczysz. Potem możesz ich używać nie martwiąc się o stare przeglądarki.

Remy Sharp napisał nawet specjalny skrypt o tajemniczej nazwie Skrypt włączający obsługę HTML5. Program ten był już wielokrotnie przerabiany, ale podstawa jego działania jest następująca:

<!--[if lt IE 9]>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<![endif]-->

Znaczniki <!--[if lt IE 9]> i <![endif]--> to komentarze warunkowe. Internet Explorer interpretuje je jako instrukcję if: „jeśli przeglądarka, w której otwarto tę stronę jest Internet Explorerem w wersji starszej od 9, to wykonaj ten blok kodu”. Dla wszystkich innych przeglądarek cały ten blok kodu jest zwykłym komentarzem HTML. W efekcie Internet Explorer do wersji 8 włącznie wykona skrypt, a pozostałe przeglądarki go zignorują. Dzięki temu w przeglądarkach, w których ta sztuczka jest niepotrzebna strona będzie się szybciej wczytywała.

Użyty w skrypcie kod JavaScript jest względnie prosty. Zmienna e jest tablicą łańcuchów, np. "abbr", "article", "aside" itd. Później przeglądamy ją za pomocą pętli i tworzymy elementy ze znajdujących się w niej nazw za pomocą wywołania metody document.createElement(). Jako że ignorujemy wartość zwrotną tego wywołania, elementy nie są dodawane do drzewa DOM. To jednak wystarczy, aby Internet Explorer traktował te elementy tak, jak chcemy, gdy będziemy ich używać później na stronie.

W poprzednim zdaniu bardzo ważne jest słowo „później”. Skrypt musi znajdować się na początku strony, najlepiej w elemencie head. Absolutnie nie można go umieszczać na końcu dokumentu. Dzięki temu Internet Explorer wykona go przed przeanalizowaniem elementów strony i ich atrybutów. Gdyby skrypt umieszczono na dole strony, to jego działanie byłoby spóźnione. Internet Explorer zdąży źle zinterpretować kod HTML i utworzyć nieprawidłowe drzewo DOM, a od tego nie ma odwrotu. Nie można już nic naprawić.

Remy Sharp zminimalizował swój skrypt i udostępnił go w repozytorium Google. (Dodam jeszcze, że skrypt jest otwarty i dostępny na licencji MIT, a więc można z nim robić, co się chce). Można go nawet „hotlinkować” bezpośrednio z serwerów Google:

<head>
  <meta charset="utf-8" />
  <title>Mój blog</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

Teraz możesz zacząć używać nowych semantycznych elementów HTML5.

Obsługa HTML5 Kurs HTML5

Narzędzia

FavoriteLoadingDodaj do przechowalni

Dodaj komentarz









Newsletter

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