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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Limitare le richieste lato server con l'interactive routing di Blazor 8
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Eseguire operazioni con timeout in React
Miglioramenti nell'accessibilità con Angular CDK
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Criptare la comunicazione con mTLS in Azure Container Apps
Miglioramenti nelle performance di Angular 16
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Utilizzare Tailwind CSS all'interno di React: primi componenti
Creare moduli CSS in React