it-swarm.it

Cosa c'è di nuovo in HTML5 / CSS3?

Ho visto questo sito e questo sito , ma è molto da digerire. Quali sono le cose principali di HTML5 che lo rendono diverso/migliore del normale HTML (CSS) vecchio (X)?

23
Jason

HTML5 è enorme , ma anche fantastico .

A mio avviso, si tratta principalmente di interoperabilità . La specifica va e specifica anche i casi Edge per provare e assicurarsi che tutti i browser leggano il markup allo stesso modo .

In secondo luogo, HTML5 ha video e audio, che fanno esattamente ciò che dice il nome. Se si desidera includere video o audio, HTML5 dovrebbe ridurre le esigenze del plug-in.

Al terzo posto, HTML5 include molta accessibilità e aiuto semantico. Ad esempio, elementi come <section> e <article> aiutano le macchine a capire quale dovrebbe essere il contenuto. Nuovi tipi di input come <input type=email> possono anche essere utili per gli stessi motivi, anche se i nuovi tipi di input includono interfacce utente personalizzate che li rendono utili anche per i lettori umani "comuni".

Si noti che le nuove funzionalità di moduli sono molto più che nuovi tipi di input. Include anche il supporto per il testo segnaposto e molti altri attributi.

HTML5 include <canvas>, che consente di disegnare forme 2D (e, con WebGL, 3D) come grafici o persino renderizzare giochi.

Il vecchio comportamento è ora standardizzato, come l'antico contentEditable di Internet Explorer.

Il DOCTYPE è finalmente decente! Ora puoi effettivamente memorizzarlo! <!DOCTYPE html>

Anche specificare la codifica è più semplice, con <meta charset=utf-8>.

Se si desidera inviare dati al client e associarli ad elementi, ora è possibile farlo con attributi personalizzati. Ad esempio, <div data-status=open>Open</div> è ora finalmente consentito. Si noti che i nomi degli attributi personalizzati devono essere preceduti da data-.

Ora puoi includere SVG e MathML nei documenti HTML. In precedenza, era possibile farlo solo con documenti XHTML.

Tra le molteplici nuove funzioni e campi definiti da HTML5, uno dei più impressionanti è classList, che consente di manipolare più facilmente l'attributo di classe. Invece di dover ottenereAttribute/setAttribute e usare hack complessi per capire quali classi ha un elemento e rimuovere una classe specifica da quell'elemento, classList rende queste situazioni difficili molto semplici.

Esistono anche diverse specifiche correlate, come Web Workers, Web Socket e IndexedDB, che non fanno realmente parte di HTML5 ma tutti ne parlano come se lo fossero. Sono molto utili per sfruttare i computer multi-core, comunicare con i server e archiviare i dati localmente.

Per quanto riguarda CSS3, include il supporto per animazioni , transizioni , bordi arrotondati e modello a scatola flessibile .

Un'altra novità di CSS3 sono i nuovi selettori, che semplificano la corrispondenza di elementi specifici di una pagina (come solo le righe pari o dispari in una tabella).

Opacità, nuove unità, Selezione e Ruby fanno anche parte di CSS3.

Penso che praticamente copra tutte le parti importanti.

33
luiscubal

Esistono elementi di layout di base come bordo-raggio, ombre (casella/testo), supporto rgba e così via; Questo è ciò per cui CSS3 è maggiormente noto. Più interessanti sono il tag canvas, il tag video, l'archiviazione locale, i websocket e così via che creeranno esperienze utente molto più ricche in HTML/JS/CSS. Queste funzionalità potrebbero essere un'ottima alternativa a Flash sul Web senza la necessità di plug-in aggiuntivi.

4
D4V360

Trovo i nuovi elementi HTML piuttosto interessanti ... alcuni di essi sono promettenti sostituzioni semantiche per div generici. I nuovi promettenti elementi includono article, section, aside, figure, nav, header e footer, tra gli altri . Mi piace molto l'idea di elementi semantici che sostituiscono contenitori insignificanti.

Oh sì, un elemento correlato: il doctype molto semplificato - finalmente qualcosa che posso scrivere dalla memoria!

4
Grant Palin

( Questo è la mia risposta a una domanda simile su webapps.stackexchange.com )

I thread Canvas e Web Worker Thread sono gli aspetti più interessanti di HTML5 per me. Ho scritto alcune app Web che utilizzano queste funzionalità:

GioAUTHor [sic] fa ampio uso della tela per permetterti di tracciare percorsi su una mappa e quindi trovare il percorso più breve dall'inizio alla fine (tramite l'algoritmo di Dijkstra in JavaScript).

Demo discussione JavaScript fa un uso limitato della tela ma mostra l'uso di Discussioni lavoratore, completo di codice demo. Utilizza inoltre il controllo del cursore HTML5 input type = "range" .


Il supporto del browser HTML5 è vario quanto i browser stessi. C'è Nice site (in HTML5, natch) su disponibilità HTML5 che mostra chi è pronto per cosa.

4
Alan

Per quanto riguarda CSS3, dai un'occhiata a http://css3please.com/ per vedere cosa puoi fare.

Più tardi il tuo browser, più probabilità sarai in grado di vedere gli effetti.

2
Sniffer

Questo non offre un'opinione sull'importanza, ma è un utile delta tra HTML 4 e 5.

Il mio 2 ¢ sui principali miglioramenti:

  • <section> e il nuovo algoritmo di delineamento dell'intestazione (ho detto che era solo mio 2 ¢)
  • nuovi elementi del modulo, ad es. <input type=email>
  • data-* attributi
  • archiviazione lato client
  • nativo <audio> e <video>
1
Paul D. Waite

I tag audio e video consentono di presentare file multimediali senza la necessità di un plug-in come Flash o Silverlight e, soprattutto, funzionano con i browser iPhone e iPad. Vi sono alcuni problemi che devono essere elaborati per quanto riguarda i codec e la gestione dei diritti digitali.

1
Steve Tranby

Jeremy Kieth ha appena pubblicato un ottimo libro sull'argomento, "HTML5 per i web designer". potresti voler dare un'occhiata.

È il primo libro di A Book Apart. Lo consiglio vivamente a designer di livello intermedio o avanzato. A ++

http://books.alistapart.com/

NOTE: potrebbe essere necessario attendere per ottenere una copia cartacea

1
Kevin

Perché nessuno ha ancora messo questo:

HTML5 è ottimo per ciò che tutti hanno elencato, ma include anche geolocalizzazione standard, web worker, web socket, canvas e localStorage. Tutti questi strumenti fanno parte delle specifiche HTML5, che usano molto JavaScript dietro le quinte per realizzarlo.

0
Ilan Biala