Dall'archivio script > HTML5

Compatibilità cross-browser dei nuovi tag semantici di HTML5

di Matteo CasatiMatteo Casati, in HTML5, CSS3,

HTML5 introduce una serie di nuovi tag per attribuire un significato semantico alle diverse parti che costituiscono la pagina: header, nav, footer, article, section, figure, ecc.
Se i browser moderni supportano nativamente questi elementi, i browser più datati (come le versioni di Internet Explorer precedenti la 9) semplicemente ignorano la presenza di questi tag, rendendo ad esempio impossibile applicare uno stile specifico mediante CSS.
Per risolvere questo problema di compatibilità possiamo utilizzare un markup ibrido, ovvero che preveda un "wrap" tramite elementi noti (tipicamente un div) dei nuovi tag:

<!DOCTYPE html>
<html>
<head>
 <style>
 header, div.header { background: red; }
 </style>
</head>
<body>
 <header>
  <div class="header">
   <h1>Titolo</h1>
  </div>
 </header>
</body>
</html>

Oppure: 

<!DOCTYPE html>
<html>
<head>
 <style>
 header, div.header { background: red; }
 </style>
</head>
<body>
 <div class="header">
  <header>
   <h1>Titolo</h1>
  </header>
 </div>
</body>
</html>

Senza intervenire sul markup possiamo consentire a IE di "riconoscere" i nuovi elementi usando Javascript. Tramite una tecnica nota "HTML5 Shiv" (o "HTML5 Shim") è infatti sufficiente creare un tag tramite la funzione document.createElement affinché possa essere riconosciuto da IE6+:

<!DOCTYPE html>
<html>
<head>
 <style>
 header { background: red; }
 </style>
 <script>
 document.createElement("header");
 </script>
</head>
<body>
 <header>
  <h1>Titolo</h1>
 </header>
</body>
</html>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi