Come scrivere HTML5 compatibile?

Question

mi piacerebbe iniziare a utilizzare le funzioni di base di HTML5, ma allo stesso tempo, mantenere il mio codice compatibile con i vecchi browser (graceful degradation). Per esempio, mi piacerebbe utilizzare le proprietà CSS3 fresche per fare gli angoli arrotondati. C'è qualche lezione privata a disposizione per la scrittura di HTML5 con grazia degradabili?

Inoltre, quello che i browser dovrei sostenere in modo che la mia app. è funzionale per almeno il 95% dei visitatori? Quali sono i modi per testare i browser in modo indolore?

Answer 1

Quando si parla di HTML5 o CSS3, si dovrebbe di testa oltre:

Quando posso utilizzare ...

Come si può vedere, siamo ancora molto molto lontano da utilizzando tale.

Inoltre, dal momento che le vecchie versioni dei browser non supporterà HTML5 o CSS3, tuttavia, è possibile fare ciò che è noto come:

Progressive Enhancement e degradazione Graceful

Ecco alcune risorse anche:

• Galleria dei siti HTML5 (Si può imparare e ottenere l'idea da loro)
• Crea moderni siti web utilizzando HTML5 e CSS3

Answer 2

I browser che, collettivamente, la copertura del 95% del mondo: Firefox, Chrome, IE6 / 7/8. Il modo migliore per testare loro è quello di installare sul vostro computer.

Answer 3

Si desidera utilizzare i tag html e css compatibile con i browser mobili.

Per quanto CSS3 avvolgerla in javascript condizionale. Ho sempre assicurarsi che il dispositivo larghezza è atleast 240px, quindi nulla al di sotto che è il vecchio, scadente, sguardo mobile.

È possibile utilizzare un piccolo testo standard mobili per i CSS, per ripristinare le tag di base che si utilizzano (farli sembrare loro stessi nei vari browser). Come con qualsiasi boilerplate, si dovrebbe guardare il css per vedere se è modo eccessivo.

Per una guida controllo completo le linee guida W3 mobile CSS2: http: //www.w3.org/TR/2000/WD-css-mobile-20001013

Un'altra buona risorsa è questa tabella di compatibilità: http://www.quirksmode.org/m/ css.html

Answer 4

La degradazione Graceful è tutto di fare compromessi - se si potesse fare tutto nella versione più bassa, probabilmente avrebbe fatto. Per scegliere l'esempio di angoli arrotondati che citi, può accettabile per voi (o il vostro cliente) a vivere senza di loro, dove non esistono renderer estensioni specifiche CSS per sostenerli (questo è il modo http://www.ipswich-angle.com/ maniglie, per esempio, credo). Altre opzioni che coinvolgono le immagini ci sono, ma è in gran parte dipende da ciò che si compromette e il vostro cliente sono disposti a fare.

Answer 5

Un servizio come browsershots.org è molto utile per verificare come il sito viene visualizzato su diversi browser e sistemi operativi. Bisogna aspettare in coda per un po ', ma vale la pena di farlo.

Answer 6

I stava per rendere questo un commento, ma poi mi ha portato via ..

w3schools ha suggerimenti per l'utilizzo di elementi di web semantico sul tuo sito. Si suggerisce di utilizzare una libreria JavaScript chiamato html5shiv.js aggiungere styling sostegno a IE8 e di seguito in modo da può trovare i file javascript che emulano le funzionalità specifiche integrata in HTML5 come JSON2.js e Webforms2.js .

questo articolo dà un esempio completo di emulare una forma HTML5 con molti dei nuovi attributi / funzionalità.

Per quanto riguarda la costruzione del sito, vi consiglio la costruzione di un sito HTML4 prima utilizzando elementi semantici liberamente (con html5shiv) e test con IE7. Allora come si costruisce parti del sito che richiedono nuove funzionalità, ricerca un file JavaScript che fornirà i vecchi browser con la stessa funzionalità, ad esempio: quando è il momento di aggiungere il primo angolo arrotondato o gradiente forse aggiungere CSS3Pie . Ricordate sempre così che la tua casella di modello; border-radius e gradienti sono supportati in WebKit, così come API di Mozilla così tanti attributi CSS3 è necessario aggiungere 3 volte:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

Purtroppo non ho una buona risorsa per come le API / mozilla WebKit confrontare con funzionalità di HTML5.

L'unica funzionalità che ho faticato a trovare è il supporto per selettori CSS3 nel browser più vecchi, spesso è possibile ottenere via con questo, voglio dire, se non sei intenzione di aggiornare il tuo IMHO del browser si può vivere con pochi confini doppio spessore o mancanti alternate fila styling nelle tabelle.

Forse un giorno ci sarà un sito che è possibile caricare il codice per che vi dirà cose come "Chrome 20.xyz non supporta gli angoli arrotondati, aggiungi -webkit-border-radius per aggiungere il supporto", ma fino ad allora l'aggiunta di compatibilità all'indietro dopo la infatti sarà quasi impossibile per i siti complessi.