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


16

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


Cosa intendi con Web8?
Aaron,

3
html5 + css3 = web8!
Jason,

Che dire di HTTP 1.0 e ECMAScript 5.0?

Risposte:


13

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.


2
Penso che intendi mettere il raggio del bordo sul fondo, giusto?
Grant Palin,

1
Purtroppo, il sito Dive Into HTML5 originale è sparito. Ci sono molti specchi disponibili. Eccone uno: diveintohtml5.info
M. Dudley,

12

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 emailtipo: 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:

  • html5shiv: uno shiv JavaScript per IE per riconoscere e modellare gli elementi HTML5.
  • CSS3 Pie: un comportamento associato a IE (un.htcfile) 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-gradientcome 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 all'elemento <html> per quelle supportate. Crea anche un oggetto JavaScript globale omonimo che contiene una proprietà booleana per ogni funzione,truese supportata e infalsecaso contrario. Aggiunge supporto per lo stile 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 elementisrcdi un<img />elemento o comebackground-imageproprietà nei CSS. DiversamenteAlphaImageLoader,background-positionebackground-repeatfunziona come previsto, e gli elementi risponderanno allaa:hoverpseudo-classe.
  • TwinHelix IE PNG Fix: un comportamento allegato IE (un.htcfile) 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.
  • Qualunque cosa: hover: un comportamento associato a IE (un.htcfile) 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,:activee:focusstili 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.)


Mi dispiace Bryson ma quelle cose che aggiungono il supporto HTML5 a Internet Explorer sono incubi assoluti per scopi pratici.

1
Ho aggiornato il mio post con qualche informazione in più e ho riconosciuto i risultati delle prestazioni nell'uso di queste librerie JS. Tuttavia, non sono d'accordo con te sul fatto che il loro uso sia un incubo. Ho usato tutti questi almeno una volta, e tutti hanno uno scopo. Inoltre non mi hanno causato ulteriori mal di testa. Cosa ti fa dire che sono incubi?
Bryson,

OK, gli "incubi assoluti" possono essere un modo troppo forte per esprimere le cose, ma le prestazioni spesso soffrono abbastanza gravemente che la pagina diventa inutilizzabile, quindi penso che tu stia esagerando il caso.

5

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.


2

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


1

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.


1

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.


0

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 :(


0

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.

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.