Die Entwicklung W3C-konformer, sprich Browser-übergreifender Standards geht voran. Nachdem nun auch Microsoft auf die Schiene einschwenkt und mit dem just vorgestellten Preview des Internetexplorer 9  sowohl HTML-5-Elemente wie canvas als auch CSS-3-Eigenschaften wie border-radius fehlerfrei unterstützt, ist es Zeit, die neuen Techniken zu lernen. Schließlich lassen sich HTML 5 und CSS 3 nicht nur für klassische Websites, sondern auch für Benutzeroberflächen und Applikationen auf mobilen Geräten, die ohne Internetexplorer auskommen, hervorragend einsetzen.

Es geschehen noch Zeichen und Wunder: Animated Border-Radius im Preview des IE 9

Tutorials, Tipps & Referenzen

• HTML 5 rocks – Google zeigt wie’s geht
• Drop-down-Menü mit HTML 5 & CSS 3
• Modale Fenster, Infoboxen & Sprechblasen
• Animierte Bildergalerien & Image Slider
• Referenzen & Browser-Support

HTML 5 rocks – Google zeigt wie’s geht

Webentwicklung der nächsten Stufe

Googles Antwort auf Apple’s HTML 5 Showcase: Gut strukturiert und interaktiv gestaltet ist diese umfassende Präsentation der neuen Feature von HTML 5, CSS 3 und JS APIs wie Geolocation, Notifications oder SQL-Database. Die Funktionen der JS APIs und CSS-3-Eigenschaften wie Text- oder Box-Shadow, HTML-Elemente zur Gestaltung von Formularfeldern, dem dynamischen Rendern und Skalieren von Bitmap- beziehungsweise Vektorgrafiken sowie die neuen Möglichkeiten zum Einbinden von Video, Audio und vieles andere mehr lassen sich direkt online ausprobieren.

Außerdem interessant: Die neuen semantischen HTML-Tags und Link-Attribute.

Interaktive Präsentation der neuen Feature von CSS3, HTML5 und JS APIs

Optimiert sind die 48 “Folien” dieser Präsentation von Marcel Wichary und Ernesto Delgado für Google Chrome. Nach Installation des kostenlosen Chrome Frame PlugIn lassen sich viele der Effekte auch im IE betrachten – so zum Beispiel die vielfachen Möglichkeiten, die das canvas-Element bietet. Per JavaScript und canvas, deutsch für Leinwand, lassen sich auf einem Hintergrund Grafiken beliebig anordnen und verändern. Diese Technik ist inzwischen in fast allen gängigen Browsern implementiert. Große Überraschung: Die brandneue Preview des IE 9 verfügt ebenfalls über dieses Element und schnitt bei Tests sogar besser ab als die so genannten Webkit-Browser.

Lesetipp: Eine kleine Canvas-Einführung von Peter Kröner

Solche Effekte lassen sich mit canvas realisieren.

Tipp: Die JavaScript-Abfrage, mit der Nutzer des IE (6 bis 8) beim Laden der HTML-5-Präsentation ermittelt und auf das kostenfreie Herunterladen und Installieren des Chrome Frame Plugin hingewiesen werden, ist eine nachahmenswerte Idee, um die neuen “Segnungen” von CSS 3 und HTML 5 auch unter Nutzern der älteren IE-Versionen zu verbreiten. Sofern die so ermittelnden Anwender das Plugin installieren dürfen, können Sie beim Surfen fortan ebenfalls gerundete Ecken sehen oder Lupeneffekte einsetzen, mit denen sich einzelne Bereiche einer Vektorgrafik vergrößern lassen, wie die folgende Abbildung zeigt.

Selektierte Bildbereiche per HTML vergrößern oder verkleinern. Demo*

*) Funktioniert in Google Chrome, IE mit Google Frame PlugIn, Firefox und Opera – nicht in Safari.

Drop-down-Menü mit HTML 5 & CSS 3

Ein ausführliches Tutorial für das unten abgebildete Drop-down-Menü lässt sich laut seinem Verfasser, Dan Wellman, in 25 Minuten nachbauen. Zum Einsatz kommen das HTML-5-<nav>-Tag und CSS-3-Eigenschaften wie border-radius und opacity. Die Hover-Effekte für die zweite Menü-Ebene sind mit jQuery umgesetzt.
Das Ergebnis läuft in allen Webkit-Browsern ohne Probleme. Die Demo funktionierte beim Dr.-Web-Test auch im Internetexplorer (IE), allerdings mit kleinen Einschränkungen – abgerundete Ecken sind wegen der mangelnden CSS3-Unterstützung im IE nicht zu sehen.

Ausklappmenü mit transparenten Auswahllisten und Hover-Effekten ….

Demo / Tutorial

… das dank Fixes auch im IE 7 und 8 weitgehend funktioniert.

Modale Fenster, Infoboxen & Sprechblasen

Drop-in Modals

Anleitungen für zwei schicke Modalfenster, die mittels CSS-3-Effekten und -Eigenschaften aufpoppen beziehungsweise vom oberen Monitorrand ins Bild klappen, finden sich im ZURB-Playground.

Beschreibung und Demo

Infobox mit CC3-3D-Ribbon

Ausschließlich mit CSS 3 ist diese Infobox mit 3D-artiger Bauchbinde für die Überschrift gestaltet. Zum Einbinden der Dreiecke links und rechts, lohnt es sich, die Kommentare zu lesen. Dort wird die Platzierung der Dreiecke per :before und :after anstelle von Z-Index empfohlen, was den Code schlanker macht.

Demo / Tutorial

Info-Bubbles – Sprechblasen mit CSS 2.1 und CSS 3

Schön gelöst durch Progressive Enhancement (siehe auch hier) sind diese komplett in CSS realisierten Sprechblasen von Nicolas Gallagher. Die grundlegende Gestaltung der Blockquotes erfolgt in CSS 2.1 – vor allem durch den Einsatz der Pseudo-Eigenschaften :before und :after, während CSS 3 mit Eigenschaften wie gradient, border-radius und transform für ein etwas kompakteres und ausgefalleneres Erscheinungsbild der Sprechblasen sorgt.

Vorteil dieser Methode: Dank des mehrschichtigen Aufbaus, stellen die Browser das dar, was sie anzeigen können. Die Zitate selbst sind in allen – auch den ältesten Browsern zu sehen. Dank weitgehender Browser-Unterstützung von CSS 2.1 werden die einfachen Sprechblasen in den meisten gängigen Browsern dargestellt. Die einzige Ausnahme bildet Firefox 3.0 (zwei bis drei Prozent Marktanteil), der CSS 2.1 nicht unterstützt. Am Ende dieses Postings finden Sie eine detaillierte Checkliste für Browser-Unterstützung von CCS-3-Selektoren, -Eigenschaften und HTML-5-Elementen.

Animierte Bildergalerien und Image Slider

CSS Polaroid Photo Gallery

Schön gemachte Fotogalerie mit den CSS-3-Eigenschaften box-shadow und transform. Gut geeignet für die Präsentation ausgewählter Fotos oder Arbeitsproben.

Tutorial / Demo

CSS 3 Image Slider

Diese Variante ist auch für umfangreichere Sammlungen und vor allem zum Jonglieren mit der CSS-3-Eigenschaft transition interessant.

Tutorial / Demo

Apple Web Gallery mit CSS 3 2D und 3D transforms

Wie man die Eigenschaft transform noch mit 2D- und 3D-Effekten aufpeppen kann, zeigt diese Demo von aus dem Apple Safari Dev Center. Unerfreuliche Einschränkung: Die Demo erfordert einen Safari-Browser.

Demo

Dokumentationen & Browser-Checklisten

Spezifikationen des W3C, Referenzen

HTML-5-Spezifikation (Entwurf, W3C)

CSS-3-Spezifikation (Entwurf, W3C)

HTML 5 – Was geht heute, was geht nicht? Überblick von Peter Kröner

CSS 3 Opacity: Eine ausführliche Referenz (englisch)

Safari CSS Reference

Web Designer’s Checklist

Einen schnellen Überblick, welche Browser, welche Eigenschaften und Attribute unterstützen bietet die Checkliste von findmebyIP.

Browser-Unterstützung von CSS 3 und HTML 5 als Checkliste bei findemebyIP

Schlussbemerkung

Diese Beispiele zeigen insgesamt, dass es sich schon jetzt lohnt, die neuen Möglichkeiten von HTML 5 und CSS 3 für aktuelle Webprojekte einzusetzen. Vor allem deshalb, weil nun auch Microsoft mit dem Internetexplorer 9, der im August 2010 auf den Markt kommen soll, endlich die neuen Techniken implementiert. Damit auch die vielen Nutzer der älteren IE-Versionen in den Genuss von HTML-5- und CSS-3-Effekten kommen, empfiehlt es sich, diese Nutzer mit modalen Fenstern auf den kostenlosen Download und die Installation des Google Frame Plugin hinzuweisen. Vielleicht spornen solche Methoden die Browser-Hersteller auch dazu an, W3C-konform zu arbeiten, damit Kunden nicht zu anderen Anbietern abwandern, die diese Techniken schon nutzen. Äußerst schade ist in diesem Zusammenhang, dass nun andere große Hersteller wieder eigene Süppchen kochen – wie das Beispiel der Apple Web Gallery zeigt.

Auch wenn es noch ein langer Weg ist, bis HTML 5 und CSS 3 vom W3C engültig verabschiedet und flächendeckend unterstützt werden, empfiehlt es sich, die neuen Techniken einzusetezn. Vor allem dann, wenn durch Progressive Enhancement gewährleistet ist, dass auch Nutzer von älteren Browsern eine möglichst gute User Experience haben.