it-swarm.it

Dovrei usare HTML5 e / o CSS3 per creare il mio sito Web?

Le nuove cose HTML5/CSS3 (Web8!) Sembrano fantastiche! Dovrei iniziare a usarlo ora o continuare con css/xhtml attendere che più browser possano usarlo?

16
Jason

HTML5 è ora supportato da tutti i browser, anche IE5! (Se si utilizza lo script html5shiv). Consiglio vivamente di leggere http://diveintohtml5.org È una delle migliori risorse HTML5 disponibili.

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.

13
Jin

Probabilmente.

Ci sono parti di HTML5 che puoi usare adesso, oggi. Moduli per esempio. Se hai _<input type="email">_ in un browser che non supporta HTML5 (sì, anche IE6) vedrai semplicemente la stessa cosa che vedresti se utilizzassi _<input type="text">_. Tuttavia, su un browser che supporta elementi di modulo HTML5, si ottengono i vantaggi del tipo email: in particolare il client verificherà il valore senza JS aggiuntivo richiesto. Anche se sì, avrai comunque bisogno del JS per browser non HTML5, avrai un ulteriore livello di validazione nei browser di supporto.

Un altro domanda su questo sito fornisce 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:

  • html5shiv: uno shiv JavaScript affinché IE riconosca e modifichi gli elementi HTML5.
  • CSS3 Pie: un IE comportamento associato (un file _.htc_) che rende Internet Explorer 6 -8 in grado di eseguire il rendering di alcune delle più utili funzionalità di decorazione CSS3. Se applicato a un elemento, consente a IE di riconoscere e visualizzare _border-radius_, _box-shadow_, _border-image_, più immagini di sfondo e _linear-gradient_ come immagine di sfondo.
  • Modernizr: una libreria Javascript che utilizza il rilevamento delle funzionalità per testare il browser corrente rispetto alle funzionalità CSS3/HTML5 in arrivo, aggiungendo classi al Elemento <html> per quelli che sono supportati. Crea anche un oggetto JavaScript globale omonimo che contiene una proprietà booleana per ogni funzione, true se supportata e false in caso contrario. Aggiunge supporto per lo styling e la stampa di elementi HTML5 in modo da poter utilizzare elementi come _<section>_, _<header>_ e _<nav>_.
  • ie-css3.js: consente a Internet Explorer di identificare i selettori di pseudo-classe CSS3 e rendere qualsiasi regola di stile definita con essi. Supporta diversi selettori CSS3 in base alla libreria JavaScript utilizzata dal tuo sito.
  • DD_belatedPNG: una libreria Javascript che aggiunge il supporto immagine PNG a IE6. Puoi usare i PNG come src di un elemento _<img />_ o come proprietà _background-image_ nei CSS. A differenza di AlphaImageLoader, _background-position_ e _background-repeat_ funzionano come previsto, e gli elementi risponderanno alla pseudo-classe _a:hover_.
  • TwinHelix IE Correzione PNG: un IE comportamento associato (un file _.htc_ ) che aggiunge il supporto PNG con opacità alfa a IE 6. Il posizionamento e la ripetizione in background dei CSS completi supportano (compresi gli sprite CSS) con JavaScript (incluso) aggiuntivo.
  • Qualunque cosa: hover: un IE comportamento associato (un file _.htc_) che corregge automaticamente: hover,: active e: focus per IE6, IE7 e IE8 stranezze, permettendoti di usarli come faresti in qualsiasi altro browser. Include il supporto AJAX, il che significa che qualsiasi HTML che viene inserito nel documento tramite javascript attiverà anche gli stili _:hover_, _:active_ e _:focus_ in IE.

Interessante notare che DD_belatedPNG risolve entrambi i problemi risolti da qualunque: correzione PNG IE di TwinHelix con JavaScript puro, mentre qualunque correzione PNG IE di Hover e TwinHelix utilizza una combinazione di JavaScript e IE comportamenti allegati (_.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 IE (che significa tutti i browser finiranno per ottenerlo a meno che tu includilo nei controlli agente utente sul lato server: ciò ridurrà notevolmente le prestazioni per tutti i tuoi visitatori, piuttosto che solo per i tuoi utenti IE.)

12
Bryson

Usa la tecnologia più adatta alle tue esigenze.

Eric Meyer ha scritto n articolo di Nizza 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.

5
jessegavin

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 caratteristiche sono supportate da quali piattaforme per stili comunemente richiesti, come angoli arrotondati, sfondi sfumati, ecc.)

2

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 sostituto per dire la tua attuale convalida del modulo sul lato client, a meno che tu non abbia una sorta di fallback JS per questo.

1
D4V360

Se stai avviando un nuovo progetto usando HTML5 che dovrebbe essere supportato anche nei browser più vecchi, l'opzione migliore è usare Initializr -

http://www.initializr.com/

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.

1
Mozan Sykol

Dipende da cosa è 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 :(

0
theotherreceive

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 sull'emergente tecnologia Edge.

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.

0
Gary.Ray