Quali tag HTML5 posso utilizzare senza preoccuparmi della compatibilità del browser?


93

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.


48
Controllare caniuse.com e html5please.com per informazioni aggiornate sulla compatibilità del browser.
rink.attendant.6

@diceze eventuali link per saperne di più sugli spessori?
Swagg

4
HTML5 Boilerplate è una buona risorsa
Michael Peterson

47
IMHO non puoi usare nulla nello sviluppo web senza preoccuparti della compatibilità del browser ...
Uooo

2
Vedi I tre livelli di utilizzo di HTML5 . Le cose di livello 1 possono essere utilizzate senza problemi. Le funzionalità di livello 2 si degradano con grazia. Le funzionalità di livello 3 richiedono un polyfill se il supporto per i browser meno recenti è un problema.
Mathias Bynens

Risposte:


100

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.


Inoltre, se puoi specificare, cos'è il vecchio IE? 6,7,8?
Swagg

4
Generalmente il vecchio IE è <IE9
iConnor

Fai attenzione al meta tag X-UA-Compatible. Se usi qualcosa come html5 boilerplate che ha commenti condizionali che circondano l' <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.
Cheezone

Grazie per le informazioni, eventuali post sul blog o alcune informazioni che posso aggiungere nella risposta in merito a questo problema sarebbero utili :)
iConnor

12

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


1
Devo notare che localStorage e fileReader non sono tag HTML, l'OP ha chiesto quali tag HTML5 hanno problemi di compatibilità.
iConnor

O si. C'è questo grande elenco di tag semantici che viene inserito in HTML5 come un modo per rendere la tua pagina più leggibile dalla macchina 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. Penso che caniuse possa avere questa informazione ...
Paul

8

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.


7
Lo userei volentieri <!DOCTYPE html>come linea superiore invece di quelle maledette cose lunghe e brutte che ci sono state imposte nei tempi precedenti.
Paul

Se questa è l'unica cosa che cambia tra i tuoi documenti HTML 4 e "HTML 5" ... qual è il punto? :)
inganno

4

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.



2

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.