Sto creando un'app Web da utilizzare su PC. Quali sono i tag HTML5 da cui stare alla larga per evitare problemi di compatibilità con browser come IE8 e superiori?
Nota: la maggior parte delle domande su questo argomento risalgono a 1-3 anni.
Sto creando un'app Web da utilizzare su PC. Quali sono i tag HTML5 da cui stare alla larga per evitare problemi di compatibilità con browser come IE8 e superiori?
Nota: la maggior parte delle domande su questo argomento risalgono a 1-3 anni.
Risposte:
Hai chiesto quali tag HTML5 stare alla larga.
Bene, alcuni dei tag di HTML5 per quanto ne so sono stati creati per ragioni semantiche. come il seguente per esempio.
<article> <section> <aside> <nav> <header> <footer> ..ect
Questi vanno quasi bene con cui lavorare e richiedono solo un po 'di CSS, ad es. display: block;
per funzionare normalmente nella maggior parte dei browser, anche se nei browser meno recenti, ad es. Internet Explorer è necessario creare un elemento in Javascript per renderlo compatibile.
Ecco un esempio.
document.createElement('article');
Impostare l' <article>
elemento per l'utilizzo in Internet Explorer meno recente.
Per i tag HTML5 più avanzati che richiedono la funzionalità Javascript per funzionare, sono alcuni come i seguenti.
<audio> <video> <source> <track> <embed> And most importantly <canvas>
Questi elementi sono più difficili da supportare / cambiare nei browser meno recenti. Anche se ho incluso un collegamento per incrociare i polyfill del browser in fondo, anche se non li ho esaminati personalmente.
Quindi direi che qualsiasi elemento che non richiede la funzionalità Javascript va benissimo da usare con un po 'di codice di supporto cross browser.
Se il tuo targeting è > IE8 , dovresti andare bene se usi un coltello.
Come chiamo i browser meno recenti? <IE9
Il supporto del browser per i tag HTML5 oggi lo è.
<section>, <article>, <aside>, <header>, <footer>,
<nav>, <figure>, <figcaption>, <time>, <mark>
Non sono supportati da Internet Explorer meno di 8 ma possono essere risolti 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 supportati in <IE 9
L' <embed>
elemento ha un supporto parziale in > IE8
Dovresti anche esaminare questo tag.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Questo meta
tag indica a Internet Explorer di visualizzare la pagina nella modalità IE più alta disponibile, invece di entrare in modalità di compatibilità e visualizzare la pagina come farebbero IE7 o 8. Maggiori informazioni su questo qui .
Per iniziare subito puoi controllare HTML5 BoilerPlate
Per le tabelle di supporto per la compatibilità del browser puoi controllare - http://caniuse.com/
HTML5 Shiv - https://github.com/afarkas/html5shiv
Elenco di Polyfill HTML5 - https: //github.com/Modernizr/Modernizr/wiki / ...
Aggiornare
Come accennato in un commento
Fai attenzione al meta tag X-UA-Compatible. Se usi qualcosa come html5 boilerplate che ha commenti condizionali che circondano l'elemento (questo accade anche con html5 doctype IIRC), potresti incontrare problemi con IE9 che si impone in modalità standard IE7 anche con il tag. IE colpisce ancora
Potresti voler esaminare questo, al momento non ho nulla a sostegno.
<html>
elemento (questo accade anche con html5 doctype IIRC), potresti incontrare problemi con IE9 che si impone in modalità standard IE7 anche con il tag. IE colpisce ancora.
In generale, ci sono problemi.
Mi è stato detto che la tua domanda è formulata per chiedere informazioni sui tag HTML 5, ma è anche utile esaminare le nuove funzionalità alla luce di qualsiasi Javascript che potresti trovare o scrivere.
In pratica, il metodo consigliato è testare l'esistenza della funzionalità piuttosto che un browser specifico. Lo script Modernizr può essere utile a questo proposito, ma ci sono anche segnalazioni di funzionalità non rilevabili in HTML5 .
Alcune funzionalità come local storage
tornare a IE8.
Altri, come FileReader
, richiedono IE10 / Firefox21 / Chrome27
Per informazioni aggiornate, prova http://caniuse.com
Scrivi HTML 5 come faresti normalmente e usa Shim per garantire la compatibilità con i browser meno recenti. Devi solo stare attento con le API Javascript, perché quelle sono difficilmente spessorabili. Se stai cercando di attenersi alla linea di base HTML 4 per la compatibilità, non ha senso usare HTML 5.
<!DOCTYPE html>
come linea superiore invece di quelle maledette cose lunghe e brutte che ci sono state imposte nei tempi precedenti.
Per un rapido confronto di quali tag sono disponibili in quali browser e quale livello di supporto per ogni tag, html5test.com è un'ottima risorsa.
Stai cercando una matrice di compatibilità HTML5
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
html5 compatability
sono sicuro che ci sono molte risorse.
Inoltre, per la migliore compatibilità cross browser, ti suggerisco di utilizzare questo reset.css creato da Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Questo fa sì che gli elementi che differiscono da un browser all'altro si comportino allo stesso modo in tutti i browser.