Sto costruendo un'app Web da utilizzare su PC. Quali sono i tag HTML5 da cui evitare di evitare problemi di compatibilità con Browser come IE8 e versioni successive?Quali tag HTML5 posso utilizzare senza preoccuparmi della compatibilità del browser?
Nota: la maggior parte delle domande ha 1-3 anni su questo argomento.
Hai chiesto quali tag HTML5 evitare.
Bene Alcuni dei tag da HTML5 sono stati creati per motivi semantici. come il seguente, ad esempio.
<article> <section> <aside> <nav> <header> <footer> ..ect
Questi sono quasi bene per lavorare, e richiedono solo un po 'di CSS ad es. display: block; funzionare normalmente nella maggior parte dei browser, anche se nei browser più vecchi vale a dire. Internet Explorer è necessario creare un elemento in Javascript affinché sia compatibile.
Ecco un esempio.
document.createElement('article');
dovrebbe impostare l'elemento <article> per l'uso in più vecchio Internet Explorer.
Per i tag HTML5 più avanzati che richiedono la funzionalità Javascript per funzionare sono alcuni come il seguente.
<audio> <video> <source> <track> <embed> And most importantly <canvas>
Questi elementi sono più difficili da sostenere/Shiv nei browser più vecchi. Anche se ho inserito un link per i crossfile di cross browser in fondo, anche se non li ho investigati personalmente.
Quindi direi che qualsiasi elemento che non richiede funzionalità Javascript è perfettamente adatto per l'uso con un piccolo bit di codice di supporto cross browser.
Se il tuo targeting > IE8 allora dovresti stare bene se usi un shiv.
Come si chiamano i browser meno recenti? < IE9
Il supporto del browser per i tag HTML5 è oggi.
<section>, <article>, <aside>, <header>, <footer>,
<nav>, <figure>, <figcaption>, <time>, <mark>
non sono supportati da Internet Explorer a meno di 8 ma può essere risolto in questo modo.
CSS:
section, article, aside, header, footer, nav, figure, figcaption{
display: block;
}
time, mark {
display: inline-block;
}
Javascript:
var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for(var i = 0; i < elements.length; i++) {
document.createElement(elements[i]);
}
E <audio> <video> <canvas> non sono supportate in < IE 9
Il 012.365.elemento ha il supporto parziale > IE8
Si dovrebbe anche prendere in considerazione questo tag.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Questo meta tag dice Internet Explorer per visualizzare la pagina in alto modalità IE disponibili, invece di andare in modalità di compatibilità e il rendering della pagina come IE7 o 8 farebbe. Maggiori informazioni su quello Here.
Per un Kick Start è possibile controllare HTML5 BoilerPlate
Per le tabelle di supporto compatibilità del browser è possibile controllare - http://caniuse.com/
HTML5 Shiv - https://github.com/afarkas/html5shiv
Elenco di HTML5 polyfills - https://github.com/Modernizr/Modernizr/wiki/...
Aggiornamento
Come menzionato in un commento
stare attenti con il meta tag X -UA-compatibile. Se si utilizza qualcosa come html5 boilerplate che contiene commenti condizionali che circondano l'elemento (questo accade anche con il doctile IIRC html5), è possibile che si verifichino problemi con IE9 forzandosi nella modalità standard IE7 anche con il tag. IE colpisce ancora
Si consiglia di guardare in questo, non ho nulla da questo backup al momento.
Siete alla ricerca di una compatibilità HTML5 matrice
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
Nota: "L'accuratezza dei fatti di questo articolo potrebbe essere compromessa a causa di informazioni non aggiornate. Aggiornare questo articolo per riflettere eventi recenti o nuove informazioni disponibili." (Marzo 2013) " – gersande
Sì, probabilmente vero ma in generale Google" 'Compatibilità html5' Sono sicuro che ci sono molte risorse. – bradgonesurfing
In generale, ci sono problemi.
mi è stato detto che la tua domanda è formulata per chiedere di HTML 5 tag ma è anche utile a guardare le nuove funzionalità di luce di qualsiasi Javascript si potrebbe trovare o scrivere.
In pratica, il metodo consigliato è verificare l'esistenza della funzionalità anziché un browser specifico. Lo script Modernizr può essere utile in questo senso, ma ci sono anche rapporti di undetectable features in HTML5.
Alcune funzioni come local storage tornano a IE8.
altri, come FileReader, richiedono IE10/Firefox21/Chrome27
Per informazioni aggiornate, provare http://caniuse.com
Devo notare che localStorage e fileReader non sono tag HTML, l'OP ha chiesto quali tag HTML5 hanno problemi di compatibilità. – iConnor
Oh, si. Esiste questo grande elenco di tag semantici che vengono spinti in HTML5 come un modo per rendere la tua pagina più leggibile dal computer e forse più SEO friendly [o forse no]. Ci sono alcuni nuovi elementi di input. Suppongo che alcuni di questi potrebbero avere problemi in uno o più browser. Pensavo che caniuse potesse avere quell'informazione ... – Paul
Scrivi HTML 5 come si farebbe normalmente e utilizzare Shims per assicurare la compatibilità con i vecchi browser. Devi solo fare attenzione con le API di Javascript, perché sono davvero poco flessibili. Se si sta cercando di attenersi alla baseline HTML 4 per la compatibilità, non ha senso utilizzare HTML 5.
Per un confronto rapido di quali tag sono disponibili in quali browser e quale livello di supporto per ciascun tag, html5test.com è disponibile una grande risorsa.
Inoltre, per la migliore compatibilità cross-browser, suggerisco di utilizzare questo reset.css creato da Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Questo rende gli elementi che differiscono da un browser a un altro, per comportarsi allo stesso modo in tutti i browser.
Controllare http://caniuse.com e http://html5please.com per informazioni sulla compatibilità del browser aggiornate. –
@deceze qualsiasi link per saperne di più sugli shim? – Swagg
[HTML5 Boilerplate] (http://html5boilerplate.com) è una buona risorsa –