m1chu.eu - another devblog » Szybka porada http://m1chu.eu we live, as we dream... alone - another devblog Sun, 14 Nov 2010 11:07:18 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Szybka porada: jak zmusić Internet Explorer 8 i Firefox 2 do obsługi HTML 5? (#1) http://m1chu.eu/2010/08/24/szybka-porada-jak-zmusic-internet-explorer-8-i-firefox-2-do-obslugi-html-5-1/ http://m1chu.eu/2010/08/24/szybka-porada-jak-zmusic-internet-explorer-8-i-firefox-2-do-obslugi-html-5-1/#comments Tue, 24 Aug 2010 20:38:47 +0000 m1chu http://m1chu.eu/?p=1825 Jak zmusić Internet Explorer 8 do obsługi HTML 5?

Sieć została ogarnięta szałem najnowszej, piątej wersji języka HTML. Jak to zazwyczaj bywa słabo z jej obsługą radzi sobie Internet Explorer. We wszystkich wydanych wersjach pojawia się problem z parsowaniem elementów języka HTML 5, a co za tym idzie nie ma domyślnie możliwości ich poprawnego ostylowania. Podobny problem w przeszłości występował w Firefoksie 2.

Zarys problemu

Załóżmy więc, że tworzymy nowy projekt i jesteśmy na etapie dodawania nagłówka oraz stopki dokumentu.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Obsługa HTML 5 z CSS</title>
    <style>
    body { text-align: center; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial; font-size: 11px; }
    header { font-style: italic; width: 770px; height: 70px; padding: 15px; margin: 5px auto; background-color: #FC0; text-align: left; }
    footer { font-weight: bold; clear: both; width: 770px; height: 15px; padding: 15px; margin: 5px auto; background-color: #FC0; text-align: left; }
    </style>
</head>
<body>
    <header>Nagłówek</header>
    <footer>Stopka</footer>
</body>
</html>

Nadaliśmy powyżej kilka atrybutów stylów pozycjonujących elementy oraz nadających im odpowiedni wygląd. Po przetestowaniu w Internet Explorerze i alternatywnych przeglądarkach zobaczymy jednak różne wyniki.

Wynik w Firefoksie 4
Wynik w Firefoksie 4.

Wynik w Internet Explorerze 8
Wynik w Internet Explorerze 8.

Internet Explorer – rozwiązanie pierwsze

Aby pozbyć się tego problemu należy do sekcji head wstawić:

<script>
document.createElement('header');
document.createElement('footer');
</script>

Internet Explorer – rozwiązanie drugie

Dla każdej wersji Internet Explorera można także dodać do dokumentu HTML (w sekcję head) zewnętrzny kod JavaScript, dzięki któremu osiągniemy wyżej opisany skutek.

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

Firefox 2

Niespełna jeden procent internautów nadal używa drugiej odsłony popularnego lisa. Zarówno on, jak i wszystkie przeglądarki oparte na silniku Gecko pre 1.9b5 (np. Camino 1.x) posiadają błąd parsowania dzięki któremu w przypadku otwarcia nowego znacznika każdy nieznany, wcześniej otwarty zostanie automatycznie zamknięty.

Rozważmy więc przykładowy kod.

<body>
    <header><h1>Nagłówek</h1></header>
    <footer>
        <p><strong>S</strong>topka</p>
    </footer>
</body>

Przeglądarki oparte na omawianej wersji silnika Gecko przeparsują go w następujący sposób:

<body>
    <header></header><h1>Nagłówek</h1>
    <footer></footer><p><strong>S</strong>topka</p>
</body>

Aby rozpocząć modyfikacje należy wykonać dwie rzeczy:

  1. Wykonać przekierowanie przykładowo za pomocą mod_rewrite lub PHP tak, aby Firefox 2 uważał analizowany dokument jako XHTML 
    • RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]
    • if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
  header('Content-type: application/xhtml+xml');
}
  2. Dodać atrybut xmlns do znacznika html 
    <html lang="pl" xmlns="http://www.w3.org/1999/xhtml">

W tym wypadku należy jednak pamiętać o tym, że XML jest wrażliwy na encje HTML-owe. Przykładowo więc używanie &sdot; należy zaniechać na rzecz &#8901;.

Następnym razem dowiecie się…

jak stworzyć wielokolumnową treść w CSS3?

]]> http://m1chu.eu/2010/08/24/szybka-porada-jak-zmusic-internet-explorer-8-i-firefox-2-do-obslugi-html-5-1/feed/ 0