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
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Sostituire la GitHub Action di login su private registry
Potenziare Azure AI Search con la ricerca vettoriale
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Usare una container image come runner di GitHub Actions
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Eseguire operazioni con timeout in React
Eseguire attività basate su eventi con Azure Container Jobs
Evitare la command injection in un workflow di GitHub
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
I più letti di oggi
- C# 4
- Spaziatura tra i caratteri in Silverlight 5
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Segui in tempo reale il TechEd 2004
- da oggi è possibile fare login velocemente con LinkedIn e Google. a questi si aggiunge il supporto già attivo per Facebook, Twitter, Microsoft Account, Windows Hello e OpenID, per darvi sempre più possibilità di accedere semplicemente alla nostra community! #aspitalia
- Migrare una service connection a workload identity federation in Azure DevOps
- Evitare postback multipli in un UpdatePanel