it-swarm.com.de

Was ist neu in HTML5 / CSS3?

Ich habe diese Seite und diese Seite gesehen, aber das ist eine Menge zu verdauen. Was sind die Hauptmerkmale von HTML5, die es anders/besser machen als normales altes (X) HTML/CSS?

23
Jason

HTML5 ist riesig , aber auch großartig .

Meiner Meinung nach geht es hauptsächlich um Interoperabilität . In der Spezifikation werden auch Edge-Fälle angegeben, um sicherzustellen, dass alle Browser das Markup auf dieselbe Weise lesen .

Zweitens verfügt HTML5 über Video und Audio, die genau das tun, was der Name sagt. Wenn Sie Video oder Audio einbinden möchten, sollte HTML5 Ihre Plug-in-Anforderungen reduzieren.

An dritter Stelle enthält HTML5 eine Menge Barrierefreiheit und semantische Hilfe. Zum Beispiel helfen Elemente wie <section> und <article> Maschinen dabei, herauszufinden, welcher Inhalt sein soll. Neue Eingabetypen wie <input type=email> können aus den gleichen Gründen ebenfalls nützlich sein, obwohl die neuen Eingabetypen benutzerdefinierte Benutzeroberflächen enthalten, die sie auch für "gewöhnliche" menschliche Leser nützlich machen.

Beachten Sie, dass die neuen Formularfunktionen viel mehr sind als nur neue Eingabetypen. Es enthält auch Unterstützung für Platzhaltertext und mehrere andere Attribute.

HTML5 enthält <canvas>, mit dem 2D-Formen (und mit WebGL 3D-Formen) wie Diagramme oder sogar Render-Spiele gezeichnet werden können.

Altes Verhalten ist jetzt standardisiert, z. B. das alte contentEditable von Internet Explorer.

Der DOCTYPE ist endlich anständig! Sie können es jetzt tatsächlich auswendig lernen! <!DOCTYPE html>

Das Angeben der Codierung ist mit <meta charset=utf-8> ebenfalls einfacher.

Wenn Sie Daten an den Client senden und mit Elementen verknüpfen möchten, können Sie dies jetzt mit benutzerdefinierten Attributen tun. Zum Beispiel ist jetzt <div data-status=open>Open</div> endlich erlaubt. Beachten Sie, dass benutzerdefinierten Attributnamen data- vorangestellt werden muss.

Sie können jetzt SVG und MathML in HTML-Dokumente einbinden. Bisher war dies nur mit XHTML-Dokumenten möglich.

Unter den zahlreichen neuen Funktionen und Feldern, die HTML5 definiert, ist die Klassenliste eine der beeindruckendsten, mit der Sie das Klassenattribut einfacher bearbeiten können. Anstatt GetAttribute/SetAttribute und komplexe Hacks verwenden zu müssen, um herauszufinden, welche Klassen ein Element hat, und eine bestimmte Klasse aus diesem Element zu entfernen, macht ClassList diese schwierigen Situationen sehr einfach.

Es gibt auch mehrere verwandte Spezifikationen, wie z. B. Web Worker, Web Sockets und IndexedDB, die nicht wirklich Teil von HTML5 sind, von denen jedoch alle so reden, als wären sie. Sie sind sehr nützlich, um Multi-Core-Computer zu nutzen, mit Servern zu kommunizieren und Daten lokal zu speichern.

CSS3 unterstützt Animationen , Übergänge , abgerundete Ränder und das flexibles Kastenmodell .

Neu in CSS3 sind auch die neuen Selektoren, mit denen bestimmte Elemente auf einer Seite einfacher abgeglichen werden können (z. B. nur die ungeraden oder geraden Zeilen in einer Tabelle).

Deckkraft, neue Einheiten, Laufschrift und Ruby sind ebenfalls Teil von CSS3.

Ich denke, das deckt so ziemlich alle wichtigen Teile ab.

33
luiscubal

Es gibt das Grundlayout wie Rahmenradius, Schatten (Box/Text), RGBA-Unterstützung und so weiter; Dafür ist CSS3 am bekanntesten. Interessanter sind Canvas-Tags, Video-Tags, lokaler Speicher, Websockets usw., die eine viel umfassendere Benutzererfahrung in einfachem HTML/JS/CSS ermöglichen. Diese Funktionen bieten das Potenzial, eine hervorragende Alternative für Flash im Web zu sein, ohne dass zusätzliche Plug-ins erforderlich sind.

4
D4V360

( Dies ist meine Antwort zu einer ähnlichen Frage auf webapps.stackexchange.com )

Die Canvas und Web Worker Threads sind die aufregendsten Aspekte von HTML5 mir. Ich habe einige Web-Apps geschrieben, die diese Funktionen nutzen:

GioAUTHor [sic] nutzt die Zeichenfläche in großem Umfang, um Pfade auf einer Karte zu zeichnen und dann den kürzesten Weg vom Start bis zum Ziel zu finden (über den Dijkstra-Algorithmus in JavaScript).

JavaScript Thread Demo nutzt die Zeichenfläche nur eingeschränkt, zeigt jedoch die Verwendung von Worker-Threads, einschließlich Demo-Code. Es wird auch das Schieberegler-Steuerelement HTML5 input type = "range" verwendet.


Die HTML5-Browser-Unterstützung ist so vielfältig wie die Browser selbst. Es gibt eine nette Seite (in HTML5, natch) über HTML5-Bereitschaft , die zeigt, wer für was bereit ist.

4
Alan

In Bezug auf CSS3 - schauen Sie unter http://css3please.com/ nach, was Sie tun können.

Je später Ihr Browser, desto wahrscheinlicher werden Sie die Auswirkungen sehen können.

2
Sniffer

Dies bietet keine Meinung zur Wichtigkeit, ist jedoch ein nützliches Delta zwischen HTML 4 und 5.

Meine 2 ¢ zu den wichtigsten Verbesserungen:

  • <section> und der neue Header-Gliederungsalgorithmus (ich habe gesagt, es war nur mein 2 ¢)
  • neue Formelemente, z.B. <input type=email>
  • data-* Attribute
  • clientseitiger Speicher
  • native <audio> und <video>
1
Paul D. Waite

Audio- und Video-Tags ermöglichen das Präsentieren von Medien, ohne dass ein Plugin wie Flash oder Silverlight erforderlich ist, und funktionieren vor allem mit den Browsern iPhone und iPad. In Bezug auf Codecs und die Verwaltung digitaler Rechte müssen einige Punkte geklärt werden.

1
Steve Tranby

Jeremy Kieth hat gerade ein wirklich gutes Buch zum Thema "HTML5 für Webdesigner" veröffentlicht. Vielleicht möchten Sie das überprüfen.

Es ist das erste Buch von A Book Apart. Sehr zu empfehlen für fortgeschrittene Designer. A ++

http://books.alistapart.com/

NOTE: Möglicherweise müssen Sie warten, bis Sie eine Hardcopy erhalten

1
Kevin

Weil das noch niemand gesagt hat:

HTML5 eignet sich hervorragend für das, was alle gelistet haben, umfasst jedoch auch Standard-Geolocation, Web-Worker, Web-Socket, Canvas und localStorage. Alle diese Tools sind Teile der HTML5-Spezifikation, die viel JavaScript hinter den Kulissen verwenden, um dies zu ermöglichen.

0
Ilan Biala