Was ist neu in HTML5 / CSS3?

Antworten:

33

HTML5 ist riesig , aber auch großartig .

Meiner Meinung nach geht es hauptsächlich um Interoperabilität . Die Spezifikation geht und spezifiziert gerade Kantenfälle, um sicherzustellen, dass alle Browser das Markup auf die gleiche 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. Elemente wie <section>und <article>helfen Maschinen beispielsweise dabei, herauszufinden, welcher Inhalt sein soll. Neue Eingabetypen wie <input type=email>können auch aus den gleichen Gründen 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 Funktionen zum <canvas>Zeichnen von 2D-Formen (und mit WebGL auch 3D-Formen) wie Diagramme oder sogar zum Rendern von Spielen.

Altes Verhalten ist jetzt standardisiert, so wie das alte Verhalten von Internet Explorer contentEditable.

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

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

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 <div data-status=open>Open</div>ist jetzt endlich erlaubt. Beachten Sie, dass benutzerdefinierten Attributnamen ein Präfix vorangestellt werden muss data-.

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 ob sie es wären. 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 flexible Box-Modell .

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

Undurchsichtigkeit, neue Einheiten, Laufschrift und Rubin sind ebenfalls Teil von CSS3.

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

Luiscubal
quelle
1
Hervorragende Abnutzung.
George Edison
Gute Arbeit, um alle wichtigen Punkte zu erreichen.
Grant Palin
1
Erwähnenswert ist, dass HTML5 derzeit nur ein Arbeitsentwurf ist und noch nicht vollständig fertiggestellt wurde.
Django Reinhardt
1
@ Django Reinhardt Wie WHATWG sagt, sind nicht alle HTML5-Funktionen auf dem gleichen Stand. Einige sind bereits weit verbreitet, andere werden etwas länger dauern. Bei der Entwicklung von Websites ist die Implementierung von entscheidender Bedeutung, und der Spezifikationsstatus ist kein gutes Maß dafür. Vielleicht möchten Sie auch die WHATWG-FAQ lesen.
Luiscubal
1
Wurden Anführungszeichen für gültige XHTML-Attribute entfernt?
Lotus Notes
18

Um den Überblick über Funktionen und Spezifikationen zu behalten, können Sie überprüfen, wann ich sie verwenden kann . Es enthält HTML5- und CSS3-Funktionen sowie SVG, PNG, CSS2.1 und CSS2. Außerdem wird der Status der Genehmigung aufgezeichnet (Empfehlung, vorgeschlagene Empfehlung, Kandidatenempfehlung, Arbeitsentwurf, IETF-Standard). FindMeByIP verwaltet Matrizen der unterstützten CSS3-Funktionen nur über den Browser.

Einige Änderungen und Vereinfachungen der Syntax fanden in den Schrauben und Muttern statt:

  • Vereinfachte Doctype-Zeichenfolge: <!DOCTYPE html>
  • Vereinfachtes languageAttribut für <html>Tag: <html lang="en">
    (kann weiterhin enthalten xmlnsund xml:langwenn Sie XML-Konformität wünschen)
  • Eigenes <meta>Tag für charset:<meta charset="utf-8" />
  • scriptAkzeptiert kein typeAttribut mehr , erfordert charsetRemote-Skripte:
    <script src="/media/js/jquery.js" charset="utf-8"></script>(Inline-Skripte benötigen überhaupt keine zusätzlichen Attribute)

HTML5 bietet die Möglichkeit, dass Ihr Markup viel semantischer und insgesamt viel einfacher zu lesen / schreiben ist und kleinere Dateien aufweist. Anstatt zu haben <div id="nav">, hast du einfach <nav>. Es scheint nicht viel zu sein, aber es summiert sich.

Viele Elemente aus XHTML1 und HTML4 sind veraltet. Die folgenden Elemente sind nicht in HTML5 unterstützt: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>und <xmp>.

Einige neue Elemente in HTML5 sollen nur mehr semantisches Markup hinzufügen und bieten lediglich eine sinnvollere Alternative zu HTML5 <div>. Diese neuen Elemente enthalten: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, und <figcaption>.

HTML5-Formulare wurden erheblich verbessert.

Neue Eingabetypen

Neue Attribute:

Neue Elemente

Wir könnten den ganzen Tag in Formen gehen, aber hier sind einige Ressourcen, um all diese neuen Dinge besser zu erklären.

CSS3 bringt das Wunderbare von Media Queries . Medienabfragen sind so, so, so großartig. Nicht verfügbar in IE8 und darunter, wird aber von IE9 unterstützt.

CSS3 hat inkrementelle Zähler . Sie können diese verwenden, um Elemente ohne geordnete Liste mithilfe des :beforePseudo-Selektors und des contentStils automatisch zu nummerieren, wenn eine geordnete Liste oder Nummerierung semantisch falsch wäre. (Beispiel: Nummerieren der Schritte zum Ausfüllen von Formularfeldern.)

Wenn Sie ein Fan von CSS-Resets sind, gibt es einen HTML5-CSS-Reset von HTML5 Doctor. Ich habe drei Ergänzungen zu diesem Reset für meine persönlichen Seiten vorgenommen:

  • text-rendering: optimizeLegibility; zu den Stilen in der Definition für hinzugefügt <body>
  • labelenthalten in der Definition mit inputund selectda es benötigtvertical-align: middle;
  • Stile für insund :focusvon Eric Meyer CSS Reset wieder hinzugefügt in

Ein konkurrierender Reset namens reset5 ist verfügbar, ich habe ihn jedoch noch nicht persönlich evaluiert. Es basiert auf den beiden den Eric Meyer und HTML5 Doktor setzt.

Das HTML5-Sicherheits-Cheatsheet zeichnet Fehler in HTML5-Funktionen auf, die in verschiedenen Browsern implementiert sind, und enthält auch Fehler in vorhandenen Funktionen, die sich ebenfalls gut nachverfolgen lassen .

Durch die Verwendung von HTML5-Elementen wird Ihr Code jedoch nicht automatisch semantisch. Die WHATWG hat einen Artikel namens <section> geschrieben, der nicht nur ein "semantisches <div>" ist und erklärt, dass es sich nicht nur um ein Containerelement handelt.

In HTML 5 gibt es einen Algorithmus zum Erstellen einer Gliederungsansicht von Dokumenten. Dies kann beispielsweise von AT verwendet werden, um einem Benutzer das Navigieren durch ein Dokument zu erleichtern. Und <section> und Freunde sind ein wichtiger Teil dieses Algorithmus. Jedes Mal, wenn Sie einen <Abschnitt> verschachteln, erhöhen Sie die Gliederungstiefe um 1 (falls Sie sich fragen, welche Vorteile dieses Modell gegenüber dem herkömmlichen <h1> - <h6> -Modell bietet, ziehen Sie einen webbasierten Feedreader in Betracht, der dies wünscht Integrieren Sie die Dokumentstruktur des syndizierten Inhalts in die der umgebenden Site. In HTML 4 bedeutet dies, dass der gesamte Inhalt analysiert und alle Überschriften neu nummeriert werden. In HTML5 werden die Überschriften kostenlos in der richtigen Tiefe angezeigt.

...

Wenn Sie einfach alle <div> s auf Ihren Seiten in <Abschnitte> konvertieren, ist es ziemlich unwahrscheinlich, dass Ihre Seite den erwarteten Umriss aufweist. Abgesehen davon, dass es sich um einen semantischen Fauxpas handelt, verwirrt dies die Leute, die sich bei der Navigation auf Überschriften verlassen.

Wie alles andere auf dieser Welt gibt es ein Framework für HTML5-Webanwendungen namens SproutCore , das von einem ehemaligen Apple-Ingenieur namens Charles Jolley erstellt wurde.

Zusätzlich zu html5rocks.com können Sie mit html5doctor.com und html5gallery.com Schritt halten .

Bryson
quelle
+1 Schöne Antwort! Denken Sie, Sie könnten irgendwo einen Abschluss in einem Ihrer Codeabschnitte verpassen.
JasonBirch
+1 Danke für die Links zu den Browserkompatibilitätstabellen! FindMeByIP war besonders ordentlich. Zusätzlich zu SproutCore wurde ExtJS gerade als Sencha relaunched und sie scheinen ihr Gewicht hinter HTML 5 zu werfen.
Sharpie
4

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 großartige Alternative für Flash im Web zu sein, ohne dass zusätzliche Plug-ins erforderlich sind.

D4V360
quelle
4

Ich finde die neuen HTML-Elemente ziemlich interessant ... einige von ihnen sind vielversprechende semantische Ersetzungen für generische divs. Die vielversprechenden neuen Elemente umfassen article, section, aside, figure, nav, header, und footer, unter anderem. Ich mag die Idee, dass semantische Elemente bedeutungslose Container ersetzen.

Oh ja, ein verwandter Punkt: das stark vereinfachte doctype- endlich etwas, das ich aus dem Gedächtnis tippen kann!

Grant Palin
quelle
4

( Dies ist meine Antwort auf eine ähnliche Frage auf webapps.stackexchange.com )

Die Canvas- und Web Worker-Threads sind für mich die aufregendsten Aspekte von HTML5. 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).

Die JavaScript-Thread-Demo nutzt die Zeichenfläche nur eingeschränkt, zeigt jedoch die Verwendung von Worker-Threads mit vollständigem 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 die HTML5-Bereitschaft , die zeigt, wer für was bereit ist.

Alan
quelle
Ich hatte diese HTML5-Readiness-Site schon einmal gesehen, konnte mich aber nicht erinnern, wo - danke für den Link! Wirklich ordentlich, der doppelte Zweck, dem die Site dient.
Grant Palin
2

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.

Schnüffler
quelle
1

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.

Steve Tranby
quelle
1

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/

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

Kevin
quelle
1

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

Meine 2 ¢ zu den wichtigsten Verbesserungen:

  • <section>und der neue Header-Outlining-Algorithmus (ich habe gesagt, es war nur meine 2 ¢)
  • neue Formularelemente, z <input type=email>
  • data-* Attribute
  • clientseitiger Speicher
  • native <audio>und<video>
Paul D. Waite
quelle
0

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.

Ilan Biala
quelle