Wsparcie elementów HTML5

Wsparcie dla nowych elementów HTML5

Powyższe sekcje są nowymi elementami w HTML5, dlatego starsze przeglądarki ich nie rozpoznają. Strona zbudowana przy użyciu tych nowych sekcji może nie wyświetlać się prawidłowo w starszych przeglądarkach, dlatego musimy im pomóc rozpoznać te elementy.

W starszych przeglądarkach elementy te zostaną potraktowane jako elementy liniowe, dlatego przy użyciu CSS musimy nadać im blokowy charakter (div jest elementem blokowym).

Zmiany tej możemy dokonać poprzez własność CSS display (ang. wyświetlanie). Przyjmuje ona m.in znane nam już wartości inline oraz block. Żeby elementy te były elementami blokowymi, wystarczy, że grupowo przypiszemy do nich tą własność.

header, nav, main, aside, footer, article, section {
  display: block;
}

Jeśli chcemy do więcej niż jednego elementu przypisać te same wartości CSS wymieniamy je po przecinku.

Jednak jest jeszcze jedna sprawa. Nie wszystkie przeglądarki pozwalają na takie przypisywanie wartości do nowych nieznanych im elementów i tworzenie tych elementów w ten sposób. Przeglądarki starsze od Internet Explorer 9 potrzebują jeszcze wsparcia w postaci JavaScript, który utworzy te elementy. Został utworzony nawet specjalny skrypt, w celu wsparcia starszych przeglądarek HTML5 shiv. Żeby z niego skorzystać wystarczy dodać poniższą linijkę na swoją stronę najlepiej pod koniec sekcji <head>.

...
<!-- [if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<![endif-->]

</head>

Nie musimy się tak na prawdę zagłębiać co tak na prawdę powyższy zapis znaczy, no ale jak chcecie to proszę. Całość jest zapisana w komentarzu HTML (o komentarzach będzie na późniejszej lekcji). Jeśli (ang. if) przeglądarka jest starsza niż (ang. lt – later than) IE9 (Internet Explorer 9) to proszę zaimportować skrypt z podanego adresu.

W zasadzie nie musimy znać języka JavaScript, żeby posługiwać się tym zapisem. Wystarczy go skopiować, a reszta zostanie zrobiona za Nas.