Advertisement
  1. Code
  2. HTML & CSS

HTML 5 und CSS 3: Die Techniken, die Sie bald verwenden werden

Scroll to top
Read Time: 16 min

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In diesem Tutorial erstellen wir eine Blog-Seite mit Techniken der nächsten Generation aus HTML 5 und CSS 3. Das Tutorial soll zeigen, wie wir Websites erstellen, wenn die Spezifikationen fertiggestellt sind und die Browser-Anbieter sie implementiert haben. Wenn Sie bereits mit HTML und CSS vertraut sind, sollte es einfach sein, diese zu befolgen.

Bevor wir beginnen, sollten Sie eine unserer HTML5-Vorlagen oder CSS-Designs für Ihr nächstes Projekt verwenden, wenn Sie eine schnelle und professionelle Lösung benötigen. Sie können auch einen der erfahrenen Entwickler von Envato Studio ausprobieren, der Ihnen bei einer Vielzahl von benutzerdefinierten HTML5- und CSS-Projekten helfen kann.

experienced developers on Envato Studioexperienced developers on Envato Studioexperienced developers on Envato Studio

Ansonsten ist es Zeit, sich mit diesen Techniken zu beschäftigen.


1. HTML 5

HTML 5 ist die nächste Hauptversion von HTML. Es werden eine Reihe neuer Elemente eingeführt, die unsere Seiten semantischer machen. Dies erleichtert Suchmaschinen und Bildschirmlesern das Navigieren auf unseren Seiten erheblich und verbesset das Web-Erlebnis für alle. Darüber hinaus enthält HTML 5 ausgefallene APIs zum Zeichnen von Grafiken auf dem Bildschirm, zum Offline-Speichern von Daten, zum Ziehen und Ablegen und vieles mehr. Beginnen wir mit dem Markieren der Blog-Seite.


2. Grundstruktur

Bevor wir mit dem Markieren der Seite beginnen, sollten wir die Gesamtstruktur klarstellen:

Diagram of basic structureDiagram of basic structureDiagram of basic structure

In HTML 5 gibt es spezielle Tags zum Markieren von Kopf-, Navigations-, Seiten- und Fußzeilen. Schauen Sie sich zuerst das Markup an und ich werde es anschließend erklären:

Es sieht immer noch wie HTML-Markup aus, aber es gibt ein paar Dinge zu beachten:

  • In HTML 5 gibt es nur einen Doctype. Es wird am Anfang der Seite durch <!doctype html> deklariert. Es teilt dem Browser einfach mit, dass es sich um ein HTML-Dokument handelt.
  • Der neue Tag-Header wird um einführende Elemente wie den Seitentitel oder ein Logo gewickelt. Es kann auch ein Inhaltsverzeichnis oder ein Suchformular enthalten. Jeder Header enthält normalerweise ein Überschriften-Tag von <h1> bis <h6>. In diesem Fall wird der Header verwendet, um die gesamte Seite einzuführen, aber wir werden ihn verwenden, um etwas später einen Abschnitt der Seite einzuführen.
  • Das nav-Tag wird verwendet, um Navigationselemente zu enthalten, z. B. die Hauptnavigation auf einer Site oder eine speziellere Navigation wie die nächsten/vorherigen Links.
  • Das section-Tag wird verwendet, um einen Abschnitt im Dokument zu kennzeichnen. Es kann alle Arten von Markups enthalten und mehrere Abschnitte können ineinander verschachtelt sein.
  • aside wird verwendet, um Inhalte zu umbrechen, die sich auf den Hauptinhalt der Seite beziehen und noch für sich stehen und sinnvoll sein können. In diesem Fall verwenden wir es für die Seitenleiste.
  • Das footer-Tag sollte zusätzliche Informationen zum Hauptinhalt enthalten, z.B. Informationen darüber, wer es geschrieben hat, Copyright-Informationen, Links zu verwandten Dokumenten usw.

Anstatt divs zu verwenden, um verschiedene Abschnitte der Seite zu enthalten, verwenden wir jetzt geeignete semantische Tags. Sie erleichtern es Suchmaschinen und Bildschirmlesern erheblich, herauszufinden, was auf einer Seite steht.


3. Markieren Sie die Navigation

Die Navigation ist genau wie in HTML 4 oder XHTML mit einer ungeordneten Liste markiert. Der Schlüssel ist, dass diese Liste innerhalb der Nav-Tags platziert wird.


4. Markieren Sie die Einführung

Wir haben bereits einen neuen Abschnitt im Dokument mithilfe des section-Tags definiert. Jetzt brauchen wir nur noch Inhalte.

Wir fügen dem Abschnitts-Tag eine ID hinzu, damit wir sie später beim Stylen identifizieren können. Wir verwenden das Header-Tag, um das einführende h2-Element zu umschließen. Neben der Beschreibung eines gesamten Dokuments sollte das header-Tag auch zur Beschreibung einzelner Abschnitte verwendet werden.


5. Markieren des Hauptinhaltsbereichs

Unser Hauptinhaltsbereich besteht aus drei Abschnitten: dem Blog-Beitrag, den Kommentaren und dem Kommentarformular. Mit unserem Wissen über die neuen Struktur-Tags in HTML 5 sollte es einfach sein, sie zu markieren.

Markieren Sie den Blog-Beitrag

Gehen Sie das Markup durch und ich werde die neuen Elemente anschließend erklären.

Wir beginnen einen neuen Abschnitt und verpacken den gesamten Blog-Beitrag in ein article-Tag. Das Artikel-Tag wird verwendet, um einen unabhängigen Eintrag in einem Blog, einer Diskussion, einer Enzyklopädie usw. zu kennzeichnen. Es ist ideal, um es hier zu verwenden. Da wir die Details eines einzelnen Beitrags anzeigen, haben wir nur einen Artikel, aber auf der Startseite des Blogs würden wir jeden Beitrag in ein article-Tag einschließen.

Das Header-Element wird verwendet, um den Header und die Metadaten zum Blog-Beitrag anzuzeigen. Wir teilen dem Benutzer mit, wann der Beitrag geschrieben wurde, wer ihn geschrieben hat und wie viele Kommentare er enthält. Beachten Sie, dass der Zeitstempel in ein a-Tag eingeschlossen ist. Dieses Tag ist auch neu in HTML 5 und wird verwendet, um einen bestimmten Ort in der Zeit zu markieren. Der Inhalt des datetime-Attributs sollte sein:

Diagram describing use of the datetime HTML attributeDiagram describing use of the datetime HTML attributeDiagram describing use of the datetime HTML attribute
  1. Das Jahr, gefolgt von einem Zahlenstrich (ein Minuszeichen für Nicht-Typografie-Nerds)
  2. Der Monat, gefolgt von einem Zahlenstrich
  3. Das Datum
  4. Der Großbuchstabe T, um anzuzeigen, dass wir die Ortszeit angeben werden
  5. Die Ortszeit im Format hh: mm: ss
  6. Die Zeitzone relativ zu GMT. Ich bin in Dänemark, 1 Stunde nach GMT, also schreibe ich +01. Wenn Sie in Colorado wären, wären Sie 7 Stunden hinter GMT und würden -07 schreiben.

Kommentare markieren

Das Markieren der Kommentare ist ziemlich einfach. Es werden keine neuen Tags oder Attribute verwendet.

Markieren Sie das Kommentarformular

In HTML 5 wurden mehrere Verbesserungen an Formularen eingeführt. Sie müssen die erforderlichen Felder, E-Mails usw. länger clientseitig überprüfen. Der Browser übernimmt dies für Sie.

Es gibt zwei neue Arten von Eingaben: E-Mail und URL. E-Mail gibt an, dass der Benutzer eine gültige E-Mail eingeben soll, und URL, dass der Benutzer eine gültige Website-Adresse eingeben soll. Wenn Sie das erforderliche Attribut schreiben, kann der Benutzer kein leeres Feld senden. "Erforderlich" ist ein boolesches Attribut, das in HTML 5 neu ist. Es bedeutet lediglich, dass das Attribut ohne Wert deklariert werden soll.

Markieren der Seitenleiste und der Fußzeile

Das Markup der Seitenleiste und der Fußzeile ist äußerst einfach. Einige Abschnitte mit Inhalten in den entsprechenden Seiten- und Fußzeilen-Tags.

Sie können das endgültige, nicht gestaltete Markup hier anzeigen. Nun zum Styling.


6. Styling mit CSS 3

CSS 3 baut auf den Prinzipien über Stile, Selektoren und die Kaskade auf, die wir aus früheren Versionen von CSS so gut kennen. Es fügt viele neue Funktionen hinzu, einschließlich neuer Selektoren, Pseudoklassen und Eigenschaften. Mit diesen neuen Funktionen wird es viel einfacher, Ihr Layout einzurichten. Lass uns eintauchen.

Grundeinstellung

Zunächst definieren wir einige Grundregeln für Typografie, Hintergrundfarbe der Seite usw. All dies erkennen Sie an CSS 2.1

Zuerst setzen wir Rand- und Füllstile mit einer einfachen Regel zurück. In einer Produktionsumgebung würde ich einen vollständigeren CSS-Reset wie Eric Meyers (für CSS 2.1) verwenden, aber für den Umfang des Tutorials reicht dies aus.

Anschließend weisen wir den Browser an, alle neuen HTML 5-Elemente als Block zu rendern. Die Browser können problemlos Elemente erkennen, die sie nicht erkennen (aus diesem Grund ist HTML 5 etwas abwärtskompatibel), aber sie wissen nicht, wie diese Elemente standardmäßig gerendert werden sollen. Wir müssen ihnen dies mitteilen, bis der Standard allgemein implementiert ist.

Beachten Sie auch, wie ich die Schriftgröße in Pixel anstelle von ems oder% gewählt habe. Dies dient dazu, den progressiven Charakter des Tutorials beizubehalten. Wenn die Hauptbrowser eines Tages die Implementierung von HTML 5 und CSS 3 vollständig abgeschlossen haben, haben wir alle Zugriff auf das Zoomen von Seiten, anstatt nur die Größe von Text zu ändern. Dadurch entfällt die Notwendigkeit, Größen in relativen Einheiten zu definieren, da der Browser die Seite trotzdem skaliert.

Sehen Sie, wie die Seite mit dem grundlegenden Styling aussieht. Jetzt können wir den Rest der Seite gestalten. Für den Header sind keine zusätzlichen Stile erforderlich, daher gehen wir direkt zur Navigation.


7. Gestaltung der Navigation

Es ist wichtig zu beachten, dass die Breite des Körpers als 940px definiert und zentriert wurde. Unsere Navigationsleiste muss sich über die gesamte Breite des Fensters erstrecken, daher müssen wir einige zusätzliche Stile anwenden:

Wir positionieren das nav-Element absolut, richten es links vom Fenster aus und lassen es die gesamte Breite überspannen. Wir zentrieren die verschachtelte Liste, um sie innerhalb der Grenzen des Layouts anzuzeigen:

Jetzt definieren wir einige zusätzliche Stile, damit die Navigationselemente schöner aussehen und sie an dem Raster ausrichten, auf dem das Layout basiert. Ich habe auch einen Stil zum Hervorheben der Seite, auf der sich der Benutzer befindet, und einen benutzerdefinierten Stil für den Abonnement-Link hinzugefügt.


8. Styling der Einführung

Das Markup für die Einführung ist ziemlich einfach: Ein Abschnitt mit einer Überschrift und einem Textabschnitt. Wir werden jedoch einige neue CSS 3-Tricks verwenden, damit es ansprechender aussieht.

Wir verwenden zwei neue Eigenschaften. Die erste ist die Hintergrundgröße, mit der Sie das Hintergrundbild skalieren können. In unserem Fall skalieren wir es auf beiden Achsen auf 100%. Wenn das Feld erweitert wird, während wir mehr Inhalt hinzufügen, wird auch der Verlaufshintergrund skaliert. Dies war in CSS 2.1 ohne nicht-semantisches Markup und verschiedene Browserprobleme nicht möglich.

Die zweite neue Eigenschaft ist der Randradius, der abgerundete Ecken auf das Element anwendet. Der Radius unserer abgerundeten Ecken beträgt in jeder Ecke 22 Pixel. Sie können für jede Ecke unterschiedliche Werte angeben oder nur einzelne Ecken abrunden.

Leider ist keine der Eigenschaften vollständig in den Hauptbrowsern implementiert. Durch die Verwendung herstellerspezifischer Attribute können wir jedoch Unterstützung erhalten. Die Hintergrundgröße wird von neueren Versionen von Safari, Opera und Konqueror unterstützt. Der Randradius wird von neueren Versionen von Safari und Firefox unterstützt.

Da wir eine Hintergrundfarbe definiert haben, gibt es in Browsern, die keine Hintergrundgröße unterstützen, wie z. B. Firefox, keine größeren Probleme. Jetzt müssen wir nur noch die Überschrift und den Text formatieren.

Das Blumenbild kann einfach hinzugefügt werden, indem #intro ein zweites Hintergrundbild gegeben wird, das von CSS 3 unterstützt wird.

Wir geben den beiden Hintergrundbildern explizite Abmessungen, um sicherzustellen, dass sie sich nicht überlappen, und wir sind festgelegt. Beachten Sie die Kurzschreibweise der background-size.

Leider unterstützt dies noch kein Browser zuverlässig, daher müssen wir dies auf die altmodische Weise tun: indem wir ein Inline-Bild einfügen und es mit CSS positionieren. Sehen Sie sich das letzte Beispiel an, um zu sehen, wie es gemacht wurde.


9. Gestalten des Inhaltsbereichs und der Seitenleiste

Der Inhaltsbereich und die Seitenleiste werden nebeneinander ausgerichtet. Traditionell würden Sie dies mit Floats tun, aber in CSS 3 werden wir Tabellen verwenden!

"Was?! Tische?" Sie könnten fragen und verwirrt aussehen. Sie haben wahrscheinlich vor Jahren gelernt, dass die Verwendung von Tabellen für das Weblayout ein großes Nein-Nein ist und es immer noch ist. Sie sollten niemals das Tabellenelement verwenden, um ein Layout zu markieren. In CSS 3 können wir jedoch festlegen, dass sich Elemente wie Tabellen verhalten, ohne dass sie jemals im Markup angezeigt werden! Zunächst benötigen wir einige Divs, um die Abschnitte etwas logischer zu gruppieren.

Semantisch macht alles noch Sinn, aber jetzt können wir es stylen. Wir möchten, dass sich das #content div wie eine Tabelle verhält, mit #mainContent und beiseite als Tabellenzellen. Mit CSS 3 ist dies sehr einfach:

Das ist alles! Keine schwebenden Hintergrundbilder mit falschen Spalten mehr, keine Ränder mehr löschen oder reduzieren. Wir haben dafür gesorgt, dass sich die Elemente wie eine Tabelle verhalten, und dies erleichtert uns das Layout erheblich.


10. Styling des Blogposts

Das Styling des Post-Headers ist ziemlich trivial, daher gehe ich zum lustigen Teil über: dem mehrspaltigen Layout.

Mehrere Spalten

Mehrere Textspalten waren bisher nicht möglich, ohne den Text manuell zu teilen, aber mit CSS 3 ist dies ein Kinderspiel, obwohl wir ein Div um die mehreren Absätze hinzufügen müssen, damit dies mit aktuellen Browsern funktioniert.

Jetzt können wir zwei einfache Eigenschaften hinzufügen und es einen Tag nennen.

Wir wollen 2 Spalten und eine Lücke von 22px zwischen den Spalten. Das zusätzliche div wird benötigt, da es derzeit keine unterstützte Möglichkeit gibt, ein Element über mehrere Spalten zu erstrecken. In Zukunft können Sie jedoch die Eigenschaft column-span angeben, und wir könnten einfach schreiben:

Natürlich werden die Eigenschaften Spaltenanzahl und Spaltenlücke nur von einigen Browsern, Safari und Firefox, unterstützt. Wir müssen vorerst die spezifischen Eigenschaften von den Herstellern verwenden.

Box Schatten

Wenn Sie sich das Bild im Blog-Beitrag genau ansehen, sehen Sie einen Schlagschatten. Wir können dies mit CSS 3 und der box-shadow-Eigenschaft generieren.

Illustration describing how the browsers render the box-shadow CSS propertyIllustration describing how the browsers render the box-shadow CSS propertyIllustration describing how the browsers render the box-shadow CSS property

Das erste "3px" teilt dem Browser mit, wo der Schatten horizontal anhalten soll. Das zweite "3px" gibt an, wo der Schatten vertikal anhalten soll. Das letzte "7px" ist, wie unscharf der Rand sein sollte. Wenn Sie es auf 0 setzen, ist es vollständig solide. Zu guter Letzt definieren wir die Grundfarbe des Schattens. Diese Farbe ist natürlich verblasst, je nachdem, wie stark Sie den Schatten verwischen.

Es ist keine Überraschung, dass diese Eigenschaft noch nicht in allen Browsern implementiert ist. Tatsächlich funktioniert es nur in Safari, und Sie müssen die herstellerspezifische Eigenschaft verwenden.


11. Zebrastreifen der Kommentare

Beim Zebrastreifen oder Hervorheben jedes zweiten Elements in einer Reihe wurden traditionell alle Elemente per Javascript ausgewählt, dann durchlaufen und alle ungeraden Elemente hervorgehoben. CSS 3 führt die Pseudoklasse "nth-child" ein, was es lächerlich einfach macht, dies ohne Javascript zu tun. Wir werden es verwenden, um die Kommentare mit Zebrastreifen zu versehen.

Der seltsame Wert "2n+1" ist eigentlich ziemlich einfach, wenn Sie verstehen, wofür er steht:

  • 2n wählt jeden zweiten Punkt aus. Wenn Sie 3n schreiben, wird jedes dritte Element, 4n jedes vierte Element usw. ausgewählt.
  • Die +1 weist den Browser an, bei Element 1 zu beginnen. Wenn Sie mit der Programmierung vertraut sind, wissen Sie wahrscheinlich, dass alle Arrays bei 0 beginnen, und dies gilt auch hier. Dies bedeutet, dass Element 1 tatsächlich das zweite Element in der Reihe ist.

Alternativ können Sie einfach schreiben:

Da der Standard die beiden am häufigsten verwendeten Werte als Kurzschrift, ungerade und gerade enthält. Der Rest des Kommentarstils sollte mit Ihrem neuen Wissen einfach zu verstehen sein.

Gestalten des Kommentarformulars, der Fußzeile und der Seitenleiste

Bei der Gestaltung des Kommentarformulars, der Fußzeile und der Seitenleiste werden einige CSS 3-Techniken wiederverwendet. Im Kommentarformular und in der Fußzeile habe ich dieselbe Art von Tabellenlayouttechnik verwendet, die auch im Hauptlayout verwendet wurde. In der Seitenleiste wird der Randradius verwendet, um den verschiedenen Abschnitten abgerundete Ecken hinzuzufügen.


12. Das endgültige Design

Sehen Sie das endgültige Design mit allen angewendeten Stilen.

Kompatibilität

Die Seite wird in Safari 4 und neueren Webkit-basierten Browsern korrekt gerendert, da es die einzige Rendering-Engine ist, die alle von uns verwendeten CSS 3-Techniken unterstützt. Firefox 3 hat einige Probleme beim Anwenden abgerundeter Ecken auf unser Blumenbild und unterstützt keine background-size, aber ansonsten funktioniert das Layout. Ich habe mich entschieden, Internet Explorer zu ignorieren, da es ein wenig Hacking erfordert, damit HTML 5 funktioniert. Sie können auch weitere Regeln definieren und alles in den gängigen Browsern zum Laufen bringen. All dies liegt jedoch außerhalb des Bereichs des Lernprogramms.

Schlussfolgerung

Wenn HTML 5 und CSS 3 eines Tages in allen Browsern implementiert sind, ist es viel einfacher, Websites zu erstellen. Wir werden endlich in der Lage sein, Floats für das Layout zu verwenden (für die sie nie vorgesehen waren), und wir werden erheblich weniger Zeit damit verbringen, Javascript zu schreiben, um unsere Hintergrundbilder zu skalieren oder unsere Tabellen mit Zebrastreifen zu versehen. Hoffentlich werden wir all diese zusätzliche Zeit nutzen, um einige lange vernachlässigte Bereiche des Webdesigns zu untersuchen, wie die Front-End-Optimierung und die richtige Informationsarchitektur.

Schauen Sie sich unsere HTML5-Vorlagen oder CSS-Designs an - wenn Sie eine professionelle, vorgefertigte Lösung für Ihr nächstes Webprojekt benötigen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.