CSS3 und HTML 5 schon jetzt

reset.css

Autor: Dr. Florence Maurice • 14.1.2011 • ca. 3:30 Min

Inhalt

Außerdem gibt es eine Formatierung für das in HTML 5 neu eingeführte mark-Element, das dazu dient, Textteile zu markieren:...

Außerdem gibt es eine Formatierung für das in HTML 5 neu eingeführte mark-Element, das dazu dient, Textteile zu markieren:

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } general.css

Diese CSS-Datei bietet sinnvolle Vorgaben für die Elemente. Dazu zählt Allgemeines wie beispielsweise Linkformatierungen oder Größen und Abstände für Überschriften. Aber es gibt auch CSS3-spezifische Angaben, wie folgende:

::selection { background: #525252; /* Safari */ } ::-moz-selection { background: #525252; /* Firefox */ color:#fff; }

Über den neu in CSS3 eingeführten Selektor ::selection bestimmen Sie die Formatierung der mit einer Maus markierten Teile. Diesen Selektor müssen Sie für den Firefox mit dem herstellerspezifischen Präfix -mozschreiben.Außerdem werden für das fieldset-Element sowie für ausgewählte Inputfelder runde Ecken mithilfe der entsprechenden CSS3- Eigenschaft definiert:

form fieldset { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px; padding-top:5px; padding-left:5px; border:1px solid #ccc; }

Formularfeld überprüfung ohne Javascript im Opera

Das Beispiel zeigt, wie man bei runden Ecken vorgeht. Man braucht drei verschiedene Definitionen: zwei mit den herstellerspezifischen Präfixen -webkit- für Safari, Chrome und Ähnliche und -moz- für die Gecko-basierten Browser. Am Schluss sollte die allgemeine in CSS3 vorgesehene Form border-radius stehen, die beispielsweise von Opera 10 verstanden wird. Hinter der Eigenschaft geben Sie den Grad des Radius an: ein höherer Wert macht die Ecken runder.

grid.css

Die dritte CSS-Datei erleichtert die Erstellung von Rasterlayouts. Das Raster, auf dem das 52Frameworks aufbaut, besteht aus 16 Spalten und einer Gesamtbreite von 940px, mit 10px an den Rändern. Es basiert auf dem 960 Grid System und 1kb Grid. Diese CSS-Datei bietet keinerlei CSS3 betreffenden Besonderheiten. Sie ist auch nicht notwendig, um das Framework zu verwenden.Dass sie aufgenommen wurde, trägt einfach dem Umstand Rechnung, dass Grid- Frameworks zurzeit so beliebt sind.

css3.css

Spannender ist das Stylesheet css3.css, das in Version 1.0 noch nicht vorhanden ist, sondern erst in der nächsten Version ergänzt wird: Hier finden Sie Klassen, um bestimmte CSS3-Eigenschaften zuzuweisen. Ausgewählt wurden Eigenschaften, die einen schönen optischen Mehrwert in unterstützdenden Browsern bringen, die sie unterstützen, gleichzeitig aber keine Probleme in Browsern bereiten, die diese Eigenschaften noch nicht beherrschen.So gibt es die Klasse rounded_top_right für eine abgerundete rechte obere Ecke. Diese haben Safari und Firefox über unterschiedliche Eigenschaften realisiert. Inzwischen ist aber klar, dass die vom Safari benutzte Variante auch der offiziellen entspricht:

.rounded_top_right { border-top-right-radius:5px; moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border:1px solid #ccc; }

Ebenfalls praktisch ist die Klasse box_shadow, mit der man bei einem Element einen Schatten ergänzen kann:

.box_shadow { -webkit-box-shadow: 2px 2px 3px #ccc; -moz-box-shadow: 2px 2px 3px #ccc; box-shadow: 2px 2px 3px #ccc; }

Im Beispiel hat der Schatten nun einen horizontalen und vertikalen Offset von 2px, die 3px bestimmen den Grad der Unschärfe des Schattens und der letzte Wert die Farbe. Praktisch ist auch die Klasse rotate zum Drehen von Elementen.

.rotate { -webkit-transform: rotate(-15deg); -moz-transform: rotate (-15deg); }

Zusätzlich gibt es die Klasse rounded für runde Ecken oder shadow für Textschatten - insgesamt eine schöne Auswahl an CSS3-Eigenschaften. Diese einzelnen Formatierungen können Sie dann einfach an Ihr Layout anpassen. Browser, die diese neuen Features noch nicht unterstützen, werden die Angaben einfach ignorieren.

Demoseite des 52Frameworks

Die Demoseite zeigt einen Prototypen eines HTML 5-Dokuments und wie man die CSS und Javascript-Dateien einsetzt. Das Dokument ist in bester HTML 5-Manier erstellt, das heißt, es beginnt mit der vereinfachten Dokumenttypangabe:

<!DOCTYPE html>

Diese funktioniert ja schon problemlos in allen Browsern und sorgt dafür, dass sie die Webseite im Standard- und nicht im Quirksmodus darstellen. Google setzt ebenfalls schon diese Dokumenttyp-Angabe ein. Auch die Zeichensatzangabe im head-Bereich ist wie in HTML 5 vorgesehen.

<meta charset=utf-8>

Anhand dieses Ausschnitts sieht man, dass im 52Framework HTML 5 in der HTML-Schreibweise verwendet wird. HTML 5 erlaubt neben dieser HTML-Schreibweise noch eine XHTML-Variante mit den dafür typischen syntaktischen Unterschieden, das heißt, dass leere Elemente geschlossen werden und Attributwerte in Anführungszeichen stehen müssen. Verwendet man in HTML 5 die XHTML-Schreibweise, so muss das Dokument mit dem korrekten MIME-Typ ausgeliefert werden - also mit application/ xhtml+xml oder application/xml.

"Video for everybody" zeigt, wie man das HTML 5-video-Element mit den notwendigen Fallbacklösungen nutzt.

Da der Internet Explorer diesen MIME-Typ nicht unterstützt, ist es sicher eine kluge Entscheidung, wenn man das HTML-5-Framework auf die HTML-Schreibweise zurückgreifen lässt. Dann werden die benötigten Dateien eingebunden. Die in Version 1.1.x ergänzte Javascript-Datei excanvas.js steht innerhalb von konditionalen Kommentaren, damit sie nur vom IE geladen wird und nicht von anderen Browsern.

Weitere Features

Anhand eines kleinen Formulars werden die ebenfalls in HTML 5 neu definierten Formularfeldtypen demonstriert. In HTML 5 gibt es beispielsweise einen speziellen Formularfeldtyp für E-Mail-Adressen:

<input type="email" value= "email@field.com" name="email" id= "email" />

Nächste Seite

1 2 3 4