Bessere Formulare

Zu Beginn soll das Bild leicht transparent und außerdem etwas nach rechts gedreht sein. Beim Hovern soll es gerade ausgerichtet und vergrößert werden und zusätzlich opak sein. Dieser Übergang soll nicht plötzlich erfolgen, sondern animiert sein.Zuerst definieren Sie per CSS den Anfangszustand. Die Drehung lässt sich mit CSSTransforms implementieren: transform: rotate(30deg) dreht ein Element um 30 Grad. Außerdem wird an dieser Stelle auch festgelegt, wie der Übergang ablaufen soll.

Die Art des Übergangs (Transition) lässt sich über drei Parameter spezifizieren: transitionproperty bestimmt, welche Eigenschaften bei der Transition involviert sind. transitionduration legt die Dauer fest und transitiontiming die Art, in der die Zwischenstufen berechnet werden. Sie können diese drei aber auch über transition zusammenfassen wie im Beispiel. Alle Eigenschaften müssen mit den herstellerspezifischen Präfixen und zusätzlich in normaler Form notiert werden.Für den Hover-Zustand wird der Endzustand definiert: transform: rotate(0deg) scale(1.4) sorgt dafür, dass das Foto gerade und etwas größer angezeigt wird. Außerdem ist opacity auf 1 gesetzt, womit das Foto vollständig opak ist.

Verwenden lässt sich dieser schöne Effekt etwa zur Präsentation von Fotos, die auf einem Tisch ausgeschüttet unordentlich übereinander und nebeneinander liegen. Beim Hovern rückt dann das jeweilige Foto in den Vordergrund und ist vollständig zu sehen. Eine weitere Neuerung im Firefox 4 ist die Unterstützung von calc() zur Berechnung von Werten in Form von -moz-calc(). Außerdem werden manche CSS3-Eigenschaften jetzt auch ohne Präfix unterstützt, etwa border-radius oder background-size.

Bessere Formulare

Neu in Firefox 4 ist die teilweise Unterstützung der in HTML5 definierten Erweiterungen für Formulare: Das Attribut autofocus weisen Sie einem Formularelement zu, damit es automatisch den Fokus erhält. Praktisch ist ebenfalls das Attribut placeholder, mit dem Sie einen Text definieren können, der in einem Formularfeld angezeigt wird und verschwindet, wenn der Benutzer in das Formularfeld klickt. Unterstützt werden außerdem neue Typen von Input-Elementen wie tel für Telefonnummern, url zur Eingabe von URLs oder email für E-Mail-Adressen.Der folgende Code deklariert ein Formularfeld als E-Mail-Feld, setzt den Fokus automatisch und gibt einen Platzhaltertext an:

Wenn eine ungültige E-Mail- Adresse eingegeben wird, können Sie diese gesondert über den Selektor :invalid formatieren. Den Platzhaltertext sprechen Sie übrigens mit dem Selektor input:-moz-placeholder an.Die neuen input-Typen lassen sich schon problemlos einsetzen, da Browser, die diese nicht kennen, automatisch von type="text" ausgehen. Sie haben zudem den Vorteil, dass Nutzern von iPhones dann direkt die passende Tastatur eingeblendet wird.

Handlungsbedarf

Was müssen Webentwickler bei ihren Seiten beachten, um von den Neuerungen in den Browsern zu profitieren? Beim Einsatz von CSS3-Eigenschaften sollten Sie prinzipiell nicht nur die Variante mit den herstellerspezifischen Präfixen verwenden, sondern auch die offizielle Eigenschaft.Wie wichtig das ist, zeigt sich jetzt an zwei Stellen: Zum einen unterstützt der Internet Explorer 9 eine ausgewählte CSS3-Eigenschaft ohne Präfix und zum anderen führt auch Firefox nun die Unterstützung der Variante ohne Präfix ein, etwa bei Eigenschaften wie background-size oder border-radius.Oft haben Webentwickler aufwändige Techniken eingesetzt, um die fehlende CSS3- und HTML5-Unterstützung früherer IE zu kompensieren. In diesen Fällen sollten Sie bei der Aktualisierung der Website darauf achten, dass sich diese Nachbesserungen nur an den IE8 und kleiner richten. Haben Sie etwa für den IE das excanvas.js-Skript verwendet, sollten Sie kontrollieren, dass dieses Skript nur für Internet Explorer kleiner als Version 9 eingebunden wird, um von der nativen canvas-Unterstützung im IE9 zu profitieren.

Opera/Safari/Chrome & Co.

Firefox und Internet Explorer sind die meist genutzten Browser, aber Safari, Chrome oder Opera müssen sich, was ihre Features anbelangt, natürlich keineswegs verstecken. Zieht man die Seite html5test.com als Basis für die HTML5-Unterstützung heran, so kommt etwa Internet Explorer 9 (7. Preview) auf 35 Prozent, Opera 10.6 hingegen auf 53 Prozent (Opera 11 Alpha auf knapp 60 Prozent), Firefox 4 auf 68 Prozent und Chrome 7 auf 77 Prozent.Auch CSS3-technisch sind Opera, Safari oder Chrome dem Internet Explorer voraus, etwa in der Unterstützung für CSS Transitions. Zum Vergleich der Browser wird oft der Acid3-Test (www.acidtests.org ) herangezogen, der sich auf interaktive Webseiten konzentriert, und dementsprechend DOM Level 2 und ECMAScript testet.Überprüft werden außerdem die SVG-Unterstützung und ausgewählte CSS3-Features. Hier punktet Chrome mit 100 Prozent, wie auch Safari oder Opera, Firefox kommt auf 97 Prozent, der Internet Explorer auf nur 95 Prozent - was aber gegenüber den 20 Prozent des Internet Explorer 8 eine gewaltige Steigerung darstellt.

IE9 im Überblick

Der IE9 unterstützt alle CSS3-Selektoren sowie das Hintergrund- und Rahmenmodul, das heißt abgerundete Ecken oder mehrfache Hintergrundbilder. Transparenzen sind jetzt ganz ohne Filter mit opacity und rgba() realisierbar. Mediaqueries sind ebenso integriert wie das WOFF-Format für herunterladbare Schriften und seit der sechsten Preview auch CSS3-Transforms.

Aus der HTML5-Spezifikation werden das canvas-Element und die Selection-API unterstützt. Die Integration von Video und Audio über die entsprechenden Elemente ist nunmehr auch im IE9 möglich. Nicht Teil von HTML5, aber trotzdem ganz wichtig ist SVG, das nun im IE9 ohne Plugin funktioniert. Hinsichtlich JavaScript passt sich der IE9 den anderen Browsern an, beispielsweise in der Behandlung von Leerzeichen, und es werden Teile aus ECMA-Script5 implementiert.Ebenfalls verbessert sind die Entwicklerwerkzeuge, die jetzt auch den Netzwerk-Traffic anzeigen. Eine echtes Novum stellen die angehefteten Seiten dar, über die der Nutzer Webseiten in die Taskleiste ziehen kann; diese lassen sich dann öffnen, ohne dass der Webbrowser gestartet werden muss.Die heutigen Webseiten verlangen den Browsern immer mehr ab. Deswegen ist ein wichtiger Punkt beim Internet Explorer 9 die Performancesteigerung - zum einen durch die neue JavaScript-Engine Chakra und durch die Hardwarebeschleunigung. Großer Wermutstropfen: Den IE9 gibt es erst ab Windows Vista.

Firefox 4 im Überblick

CSS-technisch sind CSS3 Transitions das spannendste neue Feature. Ebenfalls interessant ist die Möglichkeit, Werte in CSS über -moz-calc() zu berechnen. Standardmäßig sind Textfelder im FF4 in der Größe durch den Benutzer veränderbar, die Angabe resize: none schaltet das ab. Schließlich gibt es noch den neuen Selektor -moz-any, um Selektoren zu gruppieren.

Bei HTML5 gibt es einige Neuerungen: Der HTML5-Parser beispielsweise ist jetzt fester Bestandteil vom Firefox, ebenso ist Inline- SVG und Inline-Math möglich, die in Vorversionen nur optional waren. Auch bei den HTML5-Videos hat sich etwas getan: Das Format WebM-Video wird unterstützt, das VP8 für Video benutzt, zudem Vorbis für Audio, in einem auf Matroska basiertem Container.Ergänzt ist außerdem das buffered- Attribut für Videos. Teilweise werden nun die in HTML5 eingeführten intelligenteren Formulare implementiert. Neu hinzugekommen sind die Implementation der HTML5 History API für AJAX-Anwendungen, das FormData-Objekt und eine teilweise Unterstützung von EcmaScript5.Der Firefox kann schon länger mit SVG umgehen, seit FF4 besteht allerdings die Möglichkeit, diese zu animieren (ist aber erst teilweise implementiert). Höchst interessante Neuerungen sind die Multitouch-Unterstützung unter Windows, die neue Webkonsole und der Webinspektor. In puncto Geschwindigkeit gibt es Verbesserungen etwa durch die Hardware-Beschleunigung.