Browser

Kontrollierter Rückfall von CSS3-Eigenschaften in Steinzeit-Browsern (1)

23. April 2010
von

Jon Raasch

Die aktuellen Versionen von Firefox, Safari und Chrome unterstützen CSS3 bereits. Opera zog mit Version 10.5 kürzlich nach und selbst Microsoft werkelt derzeit am  CSS3-fähigen Update IE9, so dass CSS3 sehr bald von allen modernen Browsern unterstützt werden wird. Die Betonung liegt auf: “werden wird”. Denn wird wohl eine Weile dauern, bis die Anwender auf die aktuellen Browser-Versionen umsteigen. Manche tun es nie, und so dürfen Sie sich als fürsorglicher Webdesigner oder Web-Entwickler noch eine Weile mit den Tücken der alten Browser-Modelle herumschlagen.

Für manche Web-Worker heißt Browser-übergreifendes Webdesign, dass Websites auf allen Browsern exakt gleich aussehen. Wenn aber Designer und Entwickler fortfahren, Websites auf nicht mehr adäquate Browser wie IE6 zu reduzieren, dann hindern sie moderne Browser daran ihr eigentliches Potential zu entfalten. Beim würdevollen Rückfall – neudeutsch “graceful degradation” geht es nicht darum, Internetseiten in alten Browsern schlecht aussehen zu lassen. Es geht vielmehr darum, Websites so zu gestalten, dass sie in modernen Browsern gut aussehen.

Vorgestellte Rückfallmethoden in diesem Teil des Beitrags:
Hintergrund-Farbverläufe
RGBa-Transparenz
Abgerundete Ecken
Schatten für Boxen und Texte

Entscheiden Sie, was möglich ist

Glücklicherweise fallen die meisten der CSS3-Eigenschaften von selbst sehr fein und würdevoll auf vorhergehende Browserversionen zurück:

  • Abgerundete Ecken werden eckig
  • Verläufe werden zu flächigen Farben
  • Sanfte Übergänge werden zu harten Wechseln
Die weniger wichtigen Elemente im Webdesign dürfen ohne weiteres auf “natürlich” Art zurückfallen, während die Kernelemente dies nicht dürfen. Die Entscheidung, welche CSS3-Feature verzichtbar sind, ist ein Prozess in drei Schritten:
  1. Entscheiden Sie, welche visuellen Elemente essentiell sind. Sehen Texte auch ohne Schlagschatten gut aus? Können “runde Ecken” eckig sein?
  2. Wenn bestimmte Gestaltungselemente wegfallen werden, entscheiden Sie, in welchem Browser der Rückfall akzeptabel ist. Treffen Sie diese Entscheidung auf Basis der Nutzungsdaten Ihrer Website: Mit welchen Browsern wird sie in der Regel am häufigsten aufgerufen? Falls Sie solche Auswertungen nicht vornehmen, informieren Sie sich an anderer Stelle über Browser-Nutzungsanalysen, zum Beispiel hier.
  3. Last but not least, achten Sie auf interaktive Elemente. Werden CSS3-Eigenschaften eingesetzt, um grundlegende Schnittstellen-Elemente wie klickbare Schaltflächen oder Roll-over-Effekte eingesetzt, die zeigen, welche Seite oder welcher Menüpunkt gerade aktiv ist?

Unterstützen Sie das, was wichtig ist

Jede Seite hat bestimmte Elemente, die tragend für das Design sind. Immerhin können die meisten Gestaltungsmöglichkeiten von CSS3 recht einfach mit allen gängigen Browsern umgesetzt werden. Obwohl Sie immer auf Bilder zurückgreifen können, lassen sich die meisten CSS3-Stile auch ohne den Einsatz von Grafiken realisieren.

Hintergrund-Farbverläufe

Background gradients in WebKit

Hintergrund-Farbverläufe sind im Internet Explorer über den IE-Farbverlauf-Filter umsetzbar (Tutorial). Außerdem gibt es die Möglichkeit, Farbverläufe per PHP “on the fly” zu erzeugen (Link).

Zuerst erstellen wir nun eine Schaltfläche mit einem hinterlegten CSS3-Farbverlauf, der in Firefox, Chrome und Safarie funktioniert:

.button {
    background-color: #ED9C47; /* fallback flat color */
    background-image: -webkit-gradient(linear, left top, left bottom,
    from(#EFB67B), to(#DB7306) ); /* for Chrome + Safari */
    background-image: -moz-linear-gradient(  top,
    #EFB67B, #DB7306 ); /* for Firefox */
}

Danach dehnen wir das auch auf den IE aus. Wir wollen den nächsten Code-Schnippsel ausschließlich im IE aufrufen – in diesem Fall über einen Conditional Comment. Browser-Weiche.

/* call this in IE only */

.button {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EFB67B', endColorstr='#DB7306');
}

Auch wenn er sonst sehr nützlich ist, der Farbverlauf-Filter des IE hat ein paar echte Nachteile: Er unterstützt weder Stop-Werte noch winklige oder radiale Verläufe. Dafür müssen Sie nach wie vor Grafiken verwenden. Außerdem lässt sich diese Methode nur auf Hintergründe anwenden, nicht auf Rahmen, Text oder anderes.

Abgesehen vom IE, sind Hintergrund-Farbverläufe in Opera über das HTML5-Element Canvas realisierbar. Laut Entwurf bietet Canvas eine frei verfügbare Zeichenfläche. Darauf können Sie wie auf einer Leinwand mit JavaScript “malen” oder Farbverläufe und Formen nutzen.

RGBa-Transparenz

RGBa transparency vs. opacity

Die geordnete Rückfallmethode für RGBA-Farbwerte besteht darin, einfach RGB- oder Hexadezimalwerte zu verwenden. Im Klartext: Die Transparenz des Alpha-Kanals von RGBa entfällt damit.

.button {
    background-color: rgb( 50, 200, 150 ); /* fallback color */
    background-color: rgba( 50, 200, 150, .8); /* RGBa color */
}

Allerdings gibt es alle möglichen Tricks, mit denen Sie Alpha-Transparenz simulieren können. An allererster Stelle – und am offensichtlichsten – geht das mit der CSS-Eigenschaft opacity. Allerdings, hat opacity diverse Nachteile, vor allem den, dass Kindelemente diese Eigenschaft erben.

Lassen Sie uns zum Beispiel den IE über die Deckkraft fit für RGBa machen:

.button {
    background-color: rgb( 50, 200, 150);
    filter: alpha(opacity = 80);
}

Dies gibt Ihrer Schaltfläche die geeignete Deckkraft von 80 Prozent, welche wiederum auf alle Nachfolge-Elemente, wie etwa die Beschriftung der Schaltfläche, vererbt werden. Das ist nicht schön.

Glücklicherweise lässt es sich bewerkstelligen, Transparenz per IE zu unterstützen, indem Sie denselben IE-Filter nutzen, den wir vorhin für den Hintergrund-Farbverlauf verwendet haben:

/* call this in IE only */
.button {
       background: transparent;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8032c896', endColorstr='#8032c896');
       zoom: 1;
}

Der Trick: Der Farbverlauf-Filter des IE akzeptiert Farbwerte mit Alpha-Kanal. Daher setzen wir einfach die Farbwerte für Anfang und Ende des Farbverlaufs auf die gewünschte RGBa-Farbe. Allerdings ist das Format der Farbangabe etwas seltsam: Es beginnt mit “80″ für 80 Prozent Deckkraft, gefolgt vom Hexadezimalwert 32c896 für rgb( 50, 200, 150).

Als Letztes stellen wir sicher, den Hintergrund auf transparent zu setzen, andernfalls würde die Hintergrundfarbe unter der Fläche mit Alpha-Transparenz zu sehen sein.

Abgerundete Ecken

CSS rounded corners will soon be available in all modern browsers

Abgerundete Ecken erreichen wir im IE durch einen simplen .htc Hack.

Runden wir zuerst die Ecken in Firefox, Chrome, Safari und Opera ab:

.button {
    -webkit-border-radius: 10px; /* for Chrome + Safari */
    -moz-border-radius: 10px; /* for Firefox */
    -khtml-border-radius: 10px; /* for Konqueror */
    border-radius: 10px; /* for Opera 10.5, IE9 and future-proofing */
}

Als Nächstes bauen wir den .htc Hack für den Internet Explorer ein.

Laden Sie zuerst die .htc-Datei auf Ihren Server und binden Sie diesen Schnippsel für den IE in Ihr Stylesheet ein:

/* call this in IE only */
.button {
    behavior: url(/your-path-to/border-radius.htc);
}

So praktischer dieser Hack auch ist – es gibt einen großen Schwachpunkt: Mit diesem Hack können Sie lediglich alle Ecken gleichmäßig runden. Wenn Sie nur eine oder die erste und die letzte Ecke runden wollen, geht das nicht. Auch hier sind Sie mit einer Hintergrundgrafik besser bedient. Vor allem für Elemente, deren Abmessungen variieren.

Hinweis: Schlussendlich ist zu beachten, dass dieser .htc-Hack mit JavaScript läuft, was hinsichtlich der Performance im Vergleich zu reiner CSS-Unterstützung von Nachteil ist.

Box-Schatten und Text-Schatten

Firefox vs. IE shadow implementations

Die CSS3-Eigenschaft box-shadow wird im Internet Explorer durch den Dropshadow-Filter unterstützt.

Wir beginnen mit einem Box-Schatten für Firefox, Chrome, Safari und Opera:

.button {
    -webkit-box-shadow: 5px 5px 5px #777; /* for Chrome + Safari */
    -moz-box-shadow: 5px 5px 5px #777; /* for Firefox */
    box-shadow: 5px 5px 5px #777; /* for Opera 10.5, IE9 and future-proofing */
}

Und hier kommt die Erweiterung speziell für den IE.

/* call this in IE only */
.button {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#777777', Direction=135, Strength=5);
}

In diesem Filter arbeitet Color zusammen mit den Einstellungen der Farbwerte für den Box-Schatten, aber Direction und Strength weichen davon ab.

Direction muss in Grad von den Offset-Punkten berechnet werden. In diesem Beispiel haben wir “135″ für 135° gerechnet von der Zwölf-Uhr-Position eingetragen. Damit fällt der Schatten nach rechts unten. Dummerweise ist dieser Winkel nicht sehr präzise und biegt sich zur 45°-Marke. Daher wird 150 zu 135° und 170 zu 180°.

Strength ist die Richtungsangabe des Schattens in Pixel mit dem gleichen Wert für Unschärfe. In unserem Beispiel fällt der Schatten 5px nach rechts unten mit einer Unschärfe von 5px.

Nachteil: Die Unterschiede in den Einstellungen von Direction and Strength sind der große Nachteil des IE-Dropshadow-Filters: Der Schatten bleibt mit dem Element verbunden und kann daher nicht fortgeschritteneren Offset- oder Unschärfe-Werten eingesetzt werden.

Derselbe Schatten-Filter lässt sich für Textschatten verwenden, indem Sie einfach für den Hintergrund des Elements Transparenz vorgeben. Allerdings sieht das durch den Mangel an passenden Offset-Werten etwas zu hart aus.

Eine wesentlich raffinierter Technik für Textschatten bieten Die Glow- und Blur-Filter des Internet Explorer, wenngleich auch diese Filter nicht an die entsprechenden CSS3-Eingeschaften heranreichen.

Das lesen Sie in Teil 2 dieses Beitrags:

Transitions – Übergänge mit verschiedenen Effekten und Animationen

(mm),

Ein Kommentar zu „Kontrollierter Rückfall von CSS3-Eigenschaften in Steinzeit-Browsern (1)
  1. Frank am 24. April 2010 um 10:04

    Ich trauere den Zeiten schon in gewisser Weise nach, als noch die Hinweise “Optimiert für…” auf vielen Websites zu finden waren. Die letzte Lebensader die den berüchtigten Browser Nr. 6 noch am Leben hält, sind meiner Meinung nach die Koryphäen der “Muss unbedingt damit funktionieren” – Mentalität. Man sollte den Kunden davon überzeugen, dass das Vorwärtsdenken in Sachen Browser (manche Kunden verlangen nach einer Erklärung, was das ist!) jetzt und morgen mehr Kohle einbringen wird, als das Zurückstecken für die alten Gurkenbrowser.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!