Visualizzare HTML 5 in Internet Explorer e Firefox 2
La presente è la traduzione dell' articolo - How to get HTML5 working in IE and Firefox 2 - pubblicato originariamente su http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/. La traduzione viene riportata con il consenso dei curatori del sito.
HTML 5 potrebbe essere considerata come l' ultima e, forse, grande tecnologia, ma alcuni browsers non hanno un supporto nativo per i nuovi elementi semantici. Non si dimentichino le funzionalità che alcuni nuovi elementi possono apportare, come il pieno controllo dell' elemento <video>, ma vedremo come gli elementi possono essere resi nel browser.
Il problema a-grade browsers interessa: IE8 e versioni precedenti, Firefox 2 e Camino 1 (questi ultimi 2 hanno lo stesso motore di rendering, per cui sono entrambi interessati).
IE non formatta gli elementi HTML 5
Internet Explorer ha tutta una serie di problemi se si dovesse fare un confronto con Firefox, ma di questo se ne discuterà in seguito. IE non riconosce gli elementi introdotti da HTML 5 e per cui non applica nessuna formattazione.
Ciò significa che se in una pagina è presente un elemento <aside> flottante a destra, IE non visualizzerà mai l' elemento stilizzato, in quanto non è assolutamente a conoscenza della sua esistenza.
Infatti è esattamente lo stesso problema che si aveva prima della comparsa di HTML 5 con il tag <abbr> non riconosciuto da Internet Explorer 6 - tanto da realizzare in diversi modi la possibilità di fixare tale bug ( si aggiunga che anche da parte nostra si cerca di trovare una soluzione all' elemento <abbr>, oltre a far riconoscere l' HTML 5 ad Internet Explorer).
La correzione del bug
Non c'è speranza. Si può usare JavaScript per creare questi elementi in IE, in modo tale da poter associare loro delle formattazioni con i fogli di stile. Questa correzione funziona in IE6 e versioni superiori (problema altrimenti noto come a-grade browser).
Tale risultato lo si ottiene utilizzando un frammento di codice HTML 5 come scritto in un articolo di Sjoerd Visscher.
La soluzione consiste semplicemente nel creare un nuovo elemento utilizzando JavaScript. Solo allora IE sarà in grado di riconoscerlo e stilizzarlo.
document.createElement('header');
Per esempio, si vuole formattare l' elemento <time> in corsivo, vediamo come:
<!DOCTYPE html>
<html>
<head>
<title>Header test</title>
<style>
time { font-style: italic; }
</style>
</head>
<body>
<time datetime="2009-09-13">my birthday</time>
</body>
</html>
In IE, prima di applicare la correzione:
Ed ora si introduca la correzione:
<!DOCTYPE html>
<html>
<head>
<title>Header test</title>
<style>
time { font-style: italic; }
</style>
<script>document.createElement('time');</script>
</head>
<body>
<time datetime="2009-09-13">my birthday</time>
</body>
</html>
Il problema è risolto; dopo averlo corretto lo si può anche stilizzare con i CSS:
La soluzione in un unico file
Per comodità è stato scritto un unico file JavaScript il quale può essere richiamato per attivare tutti gli elementi HTML 5 (compreso <abbr>) anche per IE.
Scarica lo script per gli elementi HTML 5 in IE.
Si includa lo script nella sezione <head> della pagina per poter formattare in maniera corretta gli elementi anche in Internet Explorer.
<!--[if lte IE 8]>
<script src="/html5.js" type="text/javascript"></script>
<![endif]-->
Da notare che è stato applicato il commento condizionale per IE 8 e versioni inferiori. Si spera che IE 9 supporterà gli elementi dell' HTML 5 ma, fino a quel momento, ci si accerti della presenza del commento per tutti i browser IE.
Includere JavaScript
Naturalmente questo significa che attualmente il design di una pagina in HTML 5 dipende da JavaScript. Una percezione in merito a questo punto, se è stato utilizzato markup semantico per un sito web, è la seguente: nonostante gli elementi non siano stati stilizzati in maniera corretta, i contenuti sono completamente leggibili.
Di seguito una screenshot della home page di un sito web, scritto interamente in HTML 5, con e senza JavaScript abilitato per IE. Si può vedere che i contenuti sono perfettamente leggibili in quanto degradano correttamente (similarmente alla situazione in cui i CSS sono disabilitati):
Un piccola idea potrebbe essere buona
Se si crea un nuovo elemento e non si utilizza il tag <body> (cose perfettamente valida), IE metterà tutti gli elementi creati nel tag <head>. Idea simpatica ed alquanto strana ma che potrebbe essere evitata se si usano sempre i tag <head> e <body> nel markup. Leif Halvard lo spiega in maniera approfondita con delle demo.
Interpretazione del bug in Firefox 2 e Camino
Sia Firefox 2 che Camino presentano un bug nel parsare la pagina, specialmente nelle versioni precedenti alla 1.9b5:
Firefox versione 2 (o qualsiasi altro browser con motore di rendering Gecko pre 1.9b5) presenta un bug quando si chiude un elemento sconosciuto all'interno del quale si trova un elemento di blocco come p, h1, div e così via.
Secondo le statistiche del W3 Schools, Firefox 2 ha all' incirca il 3% del mercato. Tale cifra è abbastanza bassa per poter essere presa in considerazione.
Tuttavia, senza addentrarci nel problema, un sito potrebbe vedersi male con tale tipo di browser.
Il problema è dovuto al fatto che il motore di rendering Gecko non riconosce i nuovi elementi. Quando Gecko incontra - ed eseguue - un elemento sconosciuto, rimuove il suo contenuto e lo posiziona accanto all' elemento.
Per esempio il seguente codice:
<body>
<header><h1>Title</h1></header>
<article><p>...</p></article>
</body>
viene interpretato come se fosse inteso in questo modo:
<body>
<header></header>
<h1>Title</h1>
<article></article>
<p>...</p>
</body>
Il risultato visuale è simile alla esecuzione in IE senza JavaScript ma leggermente diverso; come se l' albero DOM, in realtà, avesse un ordine differente da come è stato pensato dallo sviluppatore.
La soluzione
Esistono due metodi per la risoluzione di questo problema; fino ad ora si è avuto successo con un approccio non-JavaScript.
Il metodo con JavaScript è quello di "ciclare" l' albero del DOM per riarrangiare gli elementi così come sono presentati.
Simon Pieters ha realizzato un piccolo esempio di come potrebbe essere risolto questo errore (lo si trova verso la fine della pagina) ma, in pratica, non sempre potrebbe funzionare per qualsiasi tipo si markup. Sicuramente è risolvibile con JavaScript ma c'è ancora molto lavoro da fare.
Il secondo metodo è quello di servire una pagina in modalità XHTML ai motori di rendering Gecko. Questo dovrebbe essere un metodo più semplice se si sta generando una pagina dinamica con PHP o con un file .htaccess che si avvale del mod_rewrite.
XHTML
La prima modifica necessaria da apportare nel markup, è quella di includere l' attributo xmlns nel tag <html>, in tutte le pagine:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
Dopo si dovrebbe adottare il "browser-sniffing" (solitamente un metodo non proprio corretto, ma giustificabile per quel 3% di utenti Firefox). Se la versione di Gecko è inferiore alla 1.9, si deve servire il tipo di contenuto come application / xhtml + xml.
Se si volesse usare il mod_rewrite in un file .htaccess (o file httpd.conf), si devono inserire le seguenti righe di codice:
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]
Questa regola invia il contenuto come xhtml a tutti i browser basati su Gecko, le cui versioni siano inferiori alla 1.9, “rv:1.9pre”, “rv:1.9a”, “rv:1.9bx”. La x specifica un numero inferiore a 5.
Se non si desidera utilizzare il mod_rewrite, è necessario inviare manualmente l' intestazione dello script lato server.
Di seguito il codice PHP:
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');
}
Il precedente frammento di codice deve trovarsi al primo posto nello script.
Schermata gialla - errore xml
La pagina gialla appare quando c'è un errore XML nel codice. Se si sta servendo la pagina come XML e si chiede al browser di interpretarla in maniera rigorosa, qualora avessimo inserito qualsiasi tipo di carattere sconosciuto, apparirà il seguente messaggio:
Il messaggio visualizza e mette in evidenza il punto in cui andare a correggere.
Strict markup
Ci si deve accertare che il codice di markup sia estremamente pulito.
Entità HTML
Non dovrebbero essere usate entità HTML; al contrario, invece, delle entità XML le quali sono rappresentate in maniera numerica. Ci si potrebbe avvalere di un tool che visualizza le entità HTML ed il loro valore numerico in XML: HTML entity lookup.
Per esempio & bull ; è 8226; l' entità XML corrispondente è: & # 8226 ;
Contenuti generati
Se il sito si basa sui contenuti generati, come per esempio i commenti in un blog, allora si ha bisogno di un ouptput pulito al fine di garantire che ci sia una validazione per evitare gli errori e, di conseguenza, la schermata di errore gialla. Solo questo problema potrebbe giustificare l'utilizzo di JavaScript.
Alla fine di tutto, Firefox ha un ottimo processo di aggiornamenti automatici e guardando le statistiche nel sito W3Schools, si possa affermare che la quota di mercato con qusto bug, in breve tempo potrebbe essere azzerata.
Approfondimenti
- Firefox 2 rendering issue on WHATWG Blog
- IE / missing head tag issue
- HTML5 shiv
- HTML5 enabling script
| < Prec. | Succ. > |
|---|
