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
Utilizzare un service principal per accedere a Azure Container Registry
Eseguire operazioni con timeout in React
Utilizzare i nuovi piani dedicati di Azure Container Apps
Disabilitare automaticamente un workflow di GitHub
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Creare form tipizzati con Angular
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Routing statico e PreRendering in una Blazor Web App
Effettuare delete massive con Entity Framework Core 7
Miglioramenti nelle performance di Angular 16
Usare le variabili per personalizzare gli stili CSS
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps