Das ist neu in IE 9 und Firefox 4

1. Das ist neu in IE 9 und Firefox 4
2. Bessere Formulare

© magnus.de

Mit dem Internet Explorer 9 gibt es zum ersten Mal einen Browser von Microsoft, der sich die Unterstützung für CSS3- und HTML5-Features auf die Fahnen geschrieben hat: Was es damit auf sich hat und mit welchen Neuerungen außerdem der Firefox 4 aufzuwarten hat, erfahren Sie im Artikel zusammen mit praktischen Tipps.

CSS3 im IE9

In Sachen CSS3 bietet der Internet Explorer 9 endlich mehr als seine Vorgänger. So werden jetzt alle CSS3-Selektoren komplett unterstützt, einschließlich vieler praktischer Pseudoklassen: Über tr:nth-child(even) können Sie etwa jede gerade Tabellenzeile ansprechen, :target erlaubt eine Formatierung der angesprungenen Stelle bei der Verwendung von Sprungmarken und mit :enabled wählen Sie aktivierbare Formularfelder aus.Ebenfalls interpretiert wird :indeterminate zur Formatierung von Formularelementen, deren aktueller Zustand nicht ausgelesen werden kann, oder das Pseudoelement ::selection, mit dem Sie die Formatierung von durch den Benutzer ausgewähltem Text bestimmen. Die letzten beiden Selektoren sind allerdings zurzeit nicht Teil der CSS3-Spezifikation, sie waren dort nur vorübergehend vorgesehen.In CSS3 legen Sie über opacity den Grad der Transparenz eines Elements fest. Werte sind zwischen 0 und 1 möglich, wobei 0 durchsichtig und 1 opak bedeutet. In früheren Versionen des Internet Explorer ließ sich ein ähnlicher Effekt durch proprietäre Filtertechniken realisieren, im IE9 können Sie wie bei anderen aktuellen Browser direkt die CSS3-Eigenschaft opacity nutzen.Bei opacity wird die Transparenz an die Kindelemente vererbt. Das ist problematisch, wenn Sie einen nichttransparenten Text auf einen halbtransparenten Hintergrund setzen möchten.Hier springt rgba() in die Bresche. Bei dieser in CSS3 definierten Art der Farbangabe geben Sie neben dem Rot-, Grün- und Blauton auch noch einen Wert für den Alphakanal an: background-color: rgba(255, 0, 0, 0.5) bestimmt etwa ein halbtransparentes Rot als Hintergrundfarbe. Dies ließ sich in älteren IE ebenfalls nur über Filter realisieren - der IE9 versteht rgba() endlich nativ. Neben rgba() können Sie übrigens auch die intuitivere Farbangabe mit hsla() nutzen.Ein von Webentwicklern lang ersehntes Feature ist border-radius zur Gestaltung von abgerundeten Ecken. Für browserübergreifende abgerundete Ecken schreiben Sie folgenden Code:

.abgerundet {
border: 2px solid blue;
-moz-border-radius: 10px;
border-radius: 10px;
}

Dabei kann der IE9 die Angabe borderradius ebenso interpretieren wie Firefox 4. Nur für ältere Firefox-Browser ist noch die Angabe -moz-border-radius notwendig.

Hintergründig

Für Hintergrundbilder sieht CSS3 viele neue Optionen vor, die der IE9 jetzt auch unterstützt. Mit am aufregendsten sind sicher die mehrfachen Hintergrundbilder pro Element. Hierfür geben Sie hinter background-image einfach eine Liste von Hintergrundbildern an.Genauso verfahren Sie auch bei den Eigenschaften zur Anzeige des Hintergrundbilds wie background-repeat, background-attachment oder backgroundposition. Am Beispiel von CSS3.info sehen Sie, wie mehrfache Hintergrundbilder über die Kurzschreibweise background eingebunden werden:

background: url(body-top.gif) top
left no-repeat,
url(banner_fresco.jpg) top 11px
no-repeat,
url(body-bottom.gif) bottom left
no-repeat,
url(body-middle.gif) left repeat-y;

Die gewünschten Bilder werden samt Position und Art der Wiederholung einfach hintereinander geschrieben, jeweils durch Komma getrennt. Dieses CSS3-Feature funktioniert ebenfalls im aktuellen Firefox, Safari, Chrome oder Opera.Haben wir nicht schon immer davon geträumt, Hintergrundbilder zu realisieren, die sich über den gesamten Bildschirm erstrecken, unabhängig davon, wie groß der Bildschirm ist? Möglich wird das nun durch die neu unterstützte CSS3-Eigenschaft background-size. Damit andere aktuelle Browser die Eigenschaft interpretieren, müssen Sie sie mit den jeweiligen Präfixen schreiben: -moz- für Firefox < Version 4, -o- für Opera und -webkit- für Safari und Chrome.Durch folgenden Code wird ein Hintergrundbild bildschirmfüllend angezeigt:

body, html { height: 100%; }
body {
background-image: url(bild.jpg);
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}

Standardmäßig werden Hintergrundbilder hinter dem gesamten Element angezeigt, also beispielsweise auch hinter dem Rahmen. Ob das immer so sein soll, steuern Sie über die CSS3-Eigenschaft backgroundclip. Dabei sind drei Werte möglich: border-box (Hintergrundbild auch hinter Rahmen - das ist die Defaulteinstellung), padding-box (nur im Inhaltsbereich und im padding-Bereich), content-box (nur Inhaltsbereich).Damit lässt sich beispielsweise eine Box mit opaker Hintergrundfarbe und einem transparenten Rahmen erstellen, wie es css-tricks.com/transparent-borders-withbackground-clip/ zeigt.

© Internet Magazin

Dieselben Werte wie background-clip erwartet background-origin, über das Sie festlegen, wo background-position zu rechnen beginnt. Beide Eigenschaften - backgroundclip und background-origin - brauchen die herstellerspezifischen Präfixe für die anderen Browser. Außerdem interpretiert der IE 9 Mediaqueries, über die Sie angepasste Layouts erstellen können, indem Sie je nach Eigenschaften des Ausgabegeräts unterschiedliche Formate festlegen.Mit herunterladbaren Schriften kann der Internet Explorer schon lange umgehen, neu ist jedoch, dass er das WOFF-Format versteht. Aus Gründen der Abwärtskompatibilität unterstützt der IE 9 aber weiterhin das Embedded OpenType-Format (EOT).Schließlich gibt es noch eine Neuerung bei der Angabe der Werte in CSS: Sie können über calc() die gewünschten Werte berechnen lassen. Das ist nützlich, wenn Sie unterschiedliche Einheiten kombinieren wollen, also beispielsweise eine Breite von 50% - 20em brauchen.

HTML5 & Co.

Endlich holt der Internet Explorer 9 auch bei HTML5 auf: Er erlaubt das Einbinden von Filmen und Sounddateien mit dem video- und audio-Element. Der Internet Explorer interpretiert H.264-Video und MP4-Container sowie Audio für alle Profile in AAC oder MP3.Zeichnen können Sie in HTML5 über Java- Script mithilfe des canvas-Elements. Diese Bitmapgrafiken können animiert und für Spiele oder interaktive Benutzeroberflächen verwendet werden - und funktionieren jetzt auch im IE9.HTML5 definiert mehrere neue Elemente zur Strukturierung von Dokumenten, etwa nav für die Navigationsleiste oder section für einzelne Bereiche der Webseite. Um diese über CSS zu gestalten, mussten Sie diese für den IE bis einschließlich Version 8 erst über document.createElement() erstellen - ein Schritt, der im IE9 entfällt.Neu im Internet Explorer 9 ist die Unterstützung von SVG. SVG ermöglicht skalierbare Vektorgrafiken, die über eine XML-basierte Sprache erstellt werden. Es wird beispielsweise bei Google Maps zum Zeichnen der Overlays und weiterer verwendet, wobei für den Internet Explorer auf VML zurückgegriffen wurde. Für den Internet Explorer 9 sind solche Sonderwege jetzt nicht mehr notwendig.

Firefox 4 - Transitions und mehr

Auf den ersten Blick wirken die Neuerungen im Firefox 4 vielleicht weniger spektakulär als die im Internet Explorer 9. Das liegt aber daran, dass viele Features, die der Internet Explorer nun endlich implementiert, im Firefox schon lange gang und gäbe sind: opacity seit Firefox 0.9, border-radius seit Version 1.0, canvas seit Firefox 1.5, mehrfache Hintergrundbilder seit Version 3.6 ...Spannend und faszinierend sind allerdings die Kombinationsmöglichkeiten, die sich durch die gute Unterstützung für HTML5- Video, SVG, Canvas und CSS3 ergeben.Eindrucksvoll führt dies Paul Rouget auf hacks.mozilla.org vor: Er demonstriert die Multitouch-Unterstützung anhand eines Videos, das durch Bildschirmberührung zugeschnitten und verschoben wird, oder er zeigt, wie sich SVG-Filter auf Videos anwenden lassen, die über CSS3-Transitions animiert werden.Apropos CSS3-Transitions: Dieses brandneue Feature des Firefox 4 lohnt eine genaue Betrachtung. CSS-Transitions werden übrigens ebenfalls von Opera und Webkitbasierten Browsern wie Safari oder Chrome unterstützt. Über Transitions definieren Sie Übergänge zwischen Eigenschaften. Dadurch lassen sich Effekte umsetzen, für die Sie sonst Flash oder JavaScript bemühen müssten. Eine Transition findet beipielsweise statt, wenn eine Eigenschaft beim Hovern über ein Element geändert wird.Ein kleines Beispiel soll demonstrieren, wie Sie Transition heute einsetzen - es funktioniert im Firefox 4, aber auch im aktuellen Opera oder Safari/Chrome.Ein div-Container enthält das Bild, das animiert werden soll:

<div id="animiert"><img src="steine.
jpg" width="300" height="230" alt=
"Steine"></div>