Risposte:
HTML5 è ora supportato da tutti i browser, anche IE5! (Se usi lo script html5shiv). Consiglio vivamente di leggere http://diveintohtml5.org È una delle migliori risorse HTML5 in circolazione.
Per quanto riguarda CSS3, se lo usi, assicurati di usare anche il predix del fornitore, in aggiunta alla sintassi normale. per esempio
border-radius
-moz-border-radius
-webkit-border-radius
Credo nel miglioramento progressivo. Il supporto css3 di IE9 sembra molto promettente.
Probabilmente.
Ci sono parti di HTML5 che puoi usare adesso, oggi. Moduli per esempio. Se hai <input type="email">
un browser che non supporta HTML5 (sì, anche IE6) vedrai semplicemente la stessa cosa che vedresti se lo usassi <input type="text">
. Tuttavia, su un browser che supporta elementi di modulo HTML5, si ottengono i vantaggi del email
tipo: vale a dire che il client verificherà il valore senza JS extra richiesto. Sebbene sì, avrai comunque bisogno di JS per browser non HTML5, avrai un ulteriore livello di validazione nei browser di supporto.
Un altro domanda su questo sito offre una buona panoramica delle nuove funzionalità disponibili tramite HTML5 e CSS3. Ci sono anche molti buoni dati sui moduli in quella domanda.
Poiché Internet Explorer (e le versioni precedenti di Safari e Firefox, per quanto rare possano essere) non supportano molte di queste funzionalità, rimangono vuote le librerie JavaScript per colmare il vuoto. Questi includono un aumento delle prestazioni (anche se è solo per i browser che devono usarli) quindi fai attenzione ai tuoi utenti quando li impiegano.
Per mitigare i problemi con la mancanza di supporto per le funzionalità, se dovessi decidere che ne valgono la pena, usa le seguenti risorse:
.htc
file) che rende Internet Explorer 6-8 in grado di eseguire il rendering di alcune delle più utili funzionalità di decorazione CSS3. Quando viene applicato a un elemento, permette di IE di riconoscere e di visualizzazioneborder-radius
,box-shadow
,border-image
, più immagini di sfondo, elinear-gradient
come immagine di sfondo.true
se supportata e infalse
caso contrario. Aggiunge supporto per lo stile e la stampa di elementi HTML5 in modo da poter utilizzare elementi come<section>
,<header>
e<nav>
.src
di un<img />
elemento o comebackground-image
proprietà nei CSS. DiversamenteAlphaImageLoader
,background-position
ebackground-repeat
funziona come previsto, e gli elementi risponderanno allaa:hover
pseudo-classe..htc
file) che aggiunge il supporto PNG con opacità alfa a IE 6. Il posizionamento e la ripetizione di background CSS completo sono supportati (compresi gli sprite CSS) con JavaScript (incluso) aggiuntivo..htc
file) che corregge automaticamente: hover,: active e: focus per le stranezze di IE6, IE7 e IE8, permettendoti di usarle come faresti in qualsiasi altro browser. Include il supporto AJAX, il che significa che qualsiasi codice HTML che viene inserito nel documento tramite javascript si innescherà anche:hover
,:active
e:focus
stili in IE.Interessante notare che DD_belatedPNG risolve entrambi i problemi risolti da qualunque cosa: hover e la correzione PNG IE di TwinHelix con puro JavaScript, mentre qualunque cosa: hover e la correzione PNG IE di TwinHelix usano una combinazione di comportamenti collegati JavaScript e IE ( .htc files
).
Generalmente le persone che usano browser non IE li aggiornano quando richiesto, e quindi IE porta il peso di "Ma alcuni browser non supportano questa funzione!" denunce, contestazioni. Modernizr aggiungerà la possibilità di utilizzare HTML5 / CSS3 a qualsiasi browser che probabilmente vedrai e non solo a IE. ie-css3.js farà la stessa cosa, devi semplicemente implementarlo senza un commento condizionale di IE (il che significa che tutti i browser finiranno per ottenerlo a meno che tu non lo includa con i controlli agente utente sul lato server - questo ridurrà notevolmente le prestazioni per tutti i tuoi visitatori, piuttosto che solo per i tuoi utenti IE.)
Usa la tecnologia più adatta alle tue esigenze.
Eric Meyer ha scritto un bell'articolo sul perché iniziare a usare prefissi specifici del fornitore sulle regole CSS non è zoppo come un tempo usavano gli hack del filtro CSS.
Penso che lo stesso valga per HTML5. Se riesci a controllare il supporto del browser per funzionalità diverse, perché non utilizzarlo. Finché il sito si degrada con garbo, vivilo.
Alcuni altri link utili, al momento di decidere quali funzionalità CSS3 potresti voler usare: http://caniuse.com/ (fornisce una buona suddivisione di quali elementi e selettori sono utilizzabili su quali piattaforme)
http://css3please.com/ (un parco giochi modificabile in-page per pasticciare con le funzionalità CSS3, questo dà anche alcuni consigli su quali tecniche e funzionalità sono supportate da quali piattaforme per stili comunemente richiesti, come angoli arrotondati, sfondi sfumati, eccetera.)
Lo uso per migliorare l'esperienza sui browser moderni in modo che gli utenti con un buon browser vengano "premiati" con un'interfaccia utente dall'aspetto più bello (angoli arrotondati, ombre, cose del genere). Immagino che non dovresti usarlo come un sostituto per dire la tua attuale convalida del modulo sul lato client, a meno che tu non abbia un qualche tipo di fallback JS per questo.
Se stai avviando un nuovo progetto usando HTML5 che dovrebbe essere supportato anche nei browser più vecchi, l'opzione migliore è usare Initializr -
Utilizza HTML5 Boilerplate nel backend e aggiunge alcune opzioni a sé stanti per darti un modello che puoi distribuire sul tuo sito. Include le librerie Javascript (come HTML Shiv o Modernizr), che renderanno il tuo sito compatibile con i browser più vecchi.
Dipende da cosa sia il pubblico e da quali funzionalità si desidera utilizzare. Mi aspetto che passeranno diversi anni prima che il progetto medio possa eliminare il supporto per ie6 :(
Se il tuo sito è una rete intranet privata e controlli il browser o hai una gamma limitata di browser da gestire, sentiti libero di lavorare al limite della tecnologia.
In caso contrario, indipendentemente da ciò che si utilizza, si dovrà sempre prendere in considerazione il minimo comune denominatore. In questo caso è probabilmente una combinazione di IE 6 e una gamma di browser mobili. Quindi, se vai avanti con HTML 5 hai l'ulteriore problema di assicurarti che il tuo sito "degrada" bene.