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.

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 metatag 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 .

Collegamenti helper HTML5

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.

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 storagetornare 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.

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)

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.