Wir stellen ein!

Schicke CSS3 Buttons - Cross-Browser-Optimierung für Desktop-Browser

Paul-Christian

Schicke CSS3 Buttons - Cross-Browser-Optimierung für Desktop-Browser

04. Oktober 2010 von Paul-Christian 0

Nachdem es im ersten Teil des Tutorials "Schicke Buttons mit CSS3" um die Erstellung von- Achtung, Trommelwirbel- schicken Buttons mit modernen CSS-Techniken ging, handelt dieser zweite Teil von der Kompatiblitätsoptimierung der Buttons für Desktop-Browser.

Zur Demo |  Download

Als Ausgangsbasis für diesen Beitrag dienen Markup und Styles aus dem ersten Teil des Tutorials (Download). Das Ziel ist, die bisher nur auf iOS-Geräten sowie in aktuellen Chrome- und Safari-Versionen funktionierenden Buttons auch auf anderen Desktop-Browsern zum Laufen zu bringen- bis hinunter zum IE6, der leider immer noch recht verbreitet ist und sein Aussterben beharrlich herauszögert.

Hier ein Überblick, für welche Browser(versionen) wir optimieren werden:

  • Firefox (ab 3.0)
  • Chrome (ab 4.0)
  • Safari (ab 4.0)
  • Opera (ab 9.64)
  • Internet Explorer (ab Version 6)

Firefox

Firefox ist, wenn man den Statistiken glauben darf, der inzwischen am weitesten verbreitete Browser in Deutschland. In Benutzung sind vor allem die Versionen ab 3.0, was durchaus einige Probleme mit sich bringt: Eine begrenzte Unterstützung für viele CSS3-Eigenschaften kam erst in Version 3.6 hinzu, so dass die Versionen 3.0 und 3.5 gesondert betrachtet werden müssen.

Firefox ab Version 3.0

Da die CSS3-Unterstützung in den Firefox-Versionen 3.0 und 3.5 noch kaum vorhanden ist und er natürlich auch keine -webkit-Eigenschaften verstehen kann (siehe Screenshot links, dies zeigt den Button im Ausgangszustand im Firefox 3.0), müssen wir zuerst die Eigeschaft border-radius auch für diesen Browser ermöglichen. Dies geht sehr einfach mit Hilfe des -moz-Präfixes:

.button {
	-moz-border-radius: .5em;
	border-radius: .5em;
}

Sehr wichtig ist dabei zu beachten, dass zuerst die Präfix-Eigenschaft geschrieben wird und erst danach die offizielle CSS3-Eigenschaft1. Dadurch wird gewährleistet, dass die "fertigen" Eigenschaften, die ja in Zukunft benutzt werden, nicht von den Arbeitsentwurfs-Eigenschaften überschrieben werden (dies kann allerdings auch Probleme mit sich bringen, siehe die Fußnote).

Nun müssen sämtliche -webkit-Anweisungen auf -moz umgeschrieben werden. In der Regel ist dies kein großes Problem, da die Syntax im großen und ganzen gleich ist und meistens einfach nur das Präfix ausgetauscht werden muss. Beim background-gradient ist dies zwar nicht ganz der Fall, doch die Änderungen sind nicht so gravierend (außerdem nimmt sie uns der in Teil 1 vorgestellte Gradient Generator beim Erstellen des Verlaufs ab).

.button.orange {
	background: #f6aa2f; /* Fallback für Browser, die keine Background-Gradients darstellen können */
	background: -moz-linear-gradient(
		center top,
		rgb(252,236,214) 0%,
		rgb(247,184,81) 50%,
		rgb(246,171,49) 51%,
		rgb(249,154,1) 100%
	);
}

Aber, oh Schreck, obwohl wir damit die Gecko-Syntax erfüllen, verweigern Firefox 3.0 und 3.5 ihren Dienst. Das liegt daran, dass die background-gradient-Eigenschaft erst mit Version 3.6 unterstützt wird. Daher benötigen wir für diese beiden Browser eine Fallback-Hintergrundfarbe.

Das führt ein weiteres Problem vor Augen: background-size wird (mit Präfix) erst ab Firefox 3.6 unterstützt- was machen wir nun mit dem viel zu großen Icon? Ganz einfach: Wir skalieren es in einem Bildbearbeitungsprogramm unserer Wahl und binden die kleinere Version ein. Leider würde aber ein iPhone 4 mit seinem hochauflösenden Retina-Display die Icons nun unscharf anzeigen, was weder im Sinne des Webentwicklers noch des Nutzers sein kann. Doch dafür gibt es eine einfache Lösung: media queries.

.button.fahrplan strong { background: url(icon_fahrplan_klein.png) no-repeat left center; }

/* Spricht nur das iPhone 4 an (Stand: 30.09.2010) */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {

	.button.big strong { background-size: 25px 30px; }

	.button.fahrplan strong { background: url(icon_fahrplan.png) no-repeat left center; }

}

Der Code innerhalb des Media Queries wird nur von Webkit-Browsern auf Endgeräten mit einem Mindestverhältnis von 2:1 von Gerätepixeln zu virtuellen Pixeln interpretiert (das trifft momentan nur auf das iPhone 4 zu).

Auf dem Screenshot links ist der aktuelle Stand der Buttons im Firefox 3.0 zu erkennen. Gut ersichtlich fehlen immer noch der Text-Schatten, der Schein nach innen und der Schlagschatten des Buttons. Da die Eigenschaften text-shadow und box-shadow aber erst innerhalb der folgenden Firefox-Versionen implementiert wurden (obwohl text-shadow bereits in CSS2 eingeführt wurde...), ist dies gleichzeitig der finale Look der Buttons im Firefox 3.0.

In Firefox 3.5 hingegen werden beide Eigenschaften unterstützt, box-shadow allerdings nur mit dem entsprechenden Präfix:

.button.orange {
	-webkit-box-shadow: inset 1px 1px 5px #fef6ea, 3px 3px 5px #aaa;
	-moz-box-shadow: inset 1px 1px 5px #fef6ea, 3px 3px 5px #aaa;
	box-shadow: inset 1px 1px 5px #fef6ea, 3px 3px 5px #aaa;
}

Der finale Stand der Buttons im Firefox 3.5 ist daher links zu sehen.

Der Hintergrund-Verlauf wurde, wie weiter oben erwähnt, erst in Firefox 3.6 implementiert. Daher sehen die Buttons erst ab dieser Version genauso aus wie in der iOS-Version des ersten Teils des Tutorials. In Firefox 4 (Stand: Beta-Version 4.0b6) ändert sich dies nicht, sämtliche in Firefox 3.6 unterstützten Eigenschaften wurden beibehalten und nicht geändert.

Opera

Opera ist einer der weniger genutzten Browser, dabei muss er sich keinesfalls hinter Firefox, Chrome oder Safari verstecken. Wir haben für diesen Browser ab Version 9.64 (siehe Screenshot links) optimiert, wobei uns einige Fallback-Lösungen für die älteren Firefox-Versionen zu Gute kamen; so ist zum Beispiel die Anzeige von background-gradients selbst in Version 10.62 (siehe Screenshot rechts) noch nicht möglich, wodurch die background-color erneut zum Einsatz kommt. Auch die background-size-Eigenschaft ist in Version 9.64 noch nicht implementiert, daher ist es gut dass wir bereits die herunterskalierte Version des Icons eingebunden haben.

Chrome und Safari

Safari und Chrome, beide auf der Webkit-Engine basierend, sollten bei der Darstellung der Buttons keinerlei Probleme bereiten. Im Fall von Chrome bewahrheitet sich dies auch, selbst die Version 4 stellt die Buttons nach Einsetzen des -webkit-Präfixes bei box-shadow fehlerfrei und mit allen Features dar. Beim Safari ist das ein wenig anders: Safari 4 benötigt bei der border-radius-Eigenschaft noch das -webkit-Präfix, die box-shadow-Eigenschaft ignoriert er vollkommen. Selbst mit Präfix ist kein Schatten zu sehen. Das liegt daran, dass der Schatten nach innen erst in Safari 5 unterstützt wird und die Eigenschaft wegen des unbekannten Wertes inline ignoriert wird. Hier machen wir kurzen Prozess mit Safari 4-Nutzern: Sie bekommen den Schatten nicht zu sehen (vgl. Screenshotrechts).

.button { -webkit-border-radius: .5em; }

.button.orange { -moz-box-shadow: inset 1px 1px 5px #fef6ea, 3px 3px 5px #aaa; }

Version 5 hingegen unterstützt sämtliche Angaben, so dass Benutzer der aktuellen Safari-Version die Buttons in voller Pracht erleben.

Internet Explorer

Kommen wir nun zum Sorgenkind eines jeden Webentwicklers: Dem Internet Explorer. Dieser ist hinlänglich bekannt dafür, in Sachen Websitedarstellung gnadenlos hinterherzuhinken. Die aktuelle Version 8 verhält sich zwar beinahe schon wie ein anständiger Browser und interpretiert CSS 2.1-Eigenschaften richtig, bietet aber noch sogut wie keinen CSS3-Support. Dafür allerdings gibt es im Internet Explorer proprietäre filter-Eigenschaften, die, gewusst wie, so manche CSS3-Angaben wenn nicht ersetzen, so doch nah an sie herankommen.

Zuerst aber die grundlegenden Dinge. Die Internet Explorer-Versionen unter 8 haben die CSS-Eigenschaft inline-block nur teilweise implementiert, daher muss das Verhalten mittels eines Tricks gefaked werden: Elemente, bei denen hasLayout ausgelöst wurde und deren Display-Eigenschaftswert auf inline gesetzt wurde, verhalten sich wie inline-block-Elemente.

.button, .button strong {
	zoom: 1; /* triggert hasLayout im Internet Explorer 7 und 6 */
	*display: inline;	
}

hasLayout hat noch einen weiteren Nutzen für uns, der unten vorgestellt wird.

Ein weiterer Bug, der oft vergessen wird, besteht darin dass die Internet Explorer-Versionen 6 und 7 beim Hovern eines Anker-Elements zwar den Cursor ändern, dieses Verhalten aber nicht beibehalten wenn sich innerhalb des Ankers ein weiteres Element befindet- wie in unserem Fall das strong-Element. Beheben lässt sich dieser Bug durch folgendes Code-Snippet:

.button strong { *cursor: pointer; }

Auf dem Screenshot links ist zu sehen, wie die Buttons einmal im Internet Explorer 6 und einmal im Internet Explorer 8 aussehen (der Internet Explorer 7 stellt die Buttons wie der Internet Explorer 8 dar). Kein Verlauf, keine Schatten... Es sieht nicht gut aus. Zum Glück gibt es allerdings für einige dieser Eigenschaften filter-Äquivalente- die allerdings nur bei Elementen angewendet werden können, die über Layout verfügen (s. oben, das ist der zweite Nutzen von hasLayout). Den Verlauf kann man zumindest teilweise nachbauen, und zwar mit

.button.orange { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcecd6', endColorstr='#f99a01'); /* erzeugt im IE einen Background-Gradient */ }

Diese Anweisung erzeugt in allen von uns unterstützten Versionen des Internet Explorers einen einfachen Verlauf von oben nach unten. Der Original-Verlauf umfasst zwar eigentlich vier Farben, aber das funktioniert mit der filter-Eigenschaft leider nicht.

Ebenfalls per Filter erzeugt werden kann der dunklere Schatten nach rechts und unten mit dem Shadow-filter. Glücklicherweise können die Filter-Eigenschaften nämlich miteinander kombiniert werden, was dann so aussieht:

.button.orange {
	filter:
		progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcecd6', endColorstr='#f99a01'),
		progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#aaaaaa,direction=135)
	;
}

Leider ist es mittels des Shadow-filters nicht möglich, einen Schein nach innen anzulegen. Der Internet Explorer muss also darauf verzichten.

Ein weiteres Problem ist die mangelhafte Unterstützung von alphatransparten Png-Dateien im Internet Explorer 6. Zwar ist es möglich, mit dem AlphaImageLoader-filter den Hintergrund des Pngs transparent zu tricksen, aber dadurch wäre eine Positionierung, wie sie bei uns erfolgt, nicht mehr möglich. Daher fällt diese Methode aus. Wir machen es uns einfacher: Für den Internet Explorer 6 wandeln wir das Hintergrundbild des strong-Elements in ein Gif-Bild um, dass problemlos dargestellt werden kann, und binden es anschließend per Hack ein (bei einer echten Website greifen wir dann selbstverständlich auf Conditional Comments zurück):

* html .button.fahrplan strong { background: url(icon_fahrplan_klein_ie6.gif) no-repeat left center; }

Nun sehen in den Internet Explorer-Versionen 6 bis 8 die Buttons so aus wie auf dem rechten Screenshot. Und obwohl es noch Verbesserungspotential gibt, wird es dabei bleiben. Abgerundete Ecken sind in den Internet Explorer-Versionen 6 bis 8 nur mit sehr aufwändigen Methoden möglich, die dem diesen Tutorial zu Grunde liegenden Prinzipien von Progressive Enhancement widersprechen und zu aufgeblähten Quelltext/ unnötigen JavaScript-Einbindungen/ mehreren benötigten Grafiken führen. Und das Einbinden von Textschatten deckt einen Bug im Internet Explorer auf, der sich bis Version 9 durchzieht: Falls nämlich versucht wird, mit Hilfe des oben genannten Shadow-filters für das strong-Element den Textschatten zu erzeugen, passiert das, was auf dem linken Screenshot zu sehen ist: Eine hässliche, pixelige schwarze Kontur legt sich um Icon und Text. Es scheint da also immer noch massive Probleme in Bezug auf alphatransparente Png-Bilder in Verbindung mit alphatransparenten Hintergründen/ Schatten zu geben.

Das Icon auszutauschen gegen das für den Internet Explorer 6 angelegte Gif ist übrigens auch keine gute Idee (obwohl die Idee natürlich erst einmal gut ist, sie scheitert nur an der Umsetzung): Die pixelige Umrandung bleibt bestehen, nur ist sie etwas weniger dunkel.

Ein kleiner Ausblick auf den Internet Explorer 9

Vom Internet Explorer 9 ist erst vor kurzem eine Betaversion erschienen, die einen sehr großen Schritt in Richtung richtiger Browser macht. Sie bietet vor allem eine erweiterte Unterstützung für CSS3- und Html5-Eigenschaften und -Elemente und ist auch in punkto Geschwindigkeit recht vorn mit dabei. Schauen wir uns doch einmal die Buttons in dieser Betaversion des Internet Explorer 9 an (Screenshot links).

Der Verlauf funktioniert, der Schatten funktioniert, die runden Eck- die runden Ecken funktionieren! Der Internet Explorer 9 beherrscht tatsächlich die border-radius-Eigenschaft! Aber was machen dann diese merkwürdigen überstehenden Ecken an den Kanten? Die kommen daher, dass die beiden verwendeten filter-Eigenschaften diese CSS3-Anweisung gepflegt ignorieren. Wenn wir sie rausnehmen, sieht der Button im Internet Explorer 9 aus wie auf dem Screenshot rechts. Sofort fällt auf, dass die box-shadow-Eigenschaft inklusive inset unterstützt wird. Eigentlich könnten wir also mit der Darstellung der Buttons im Internet Explorer 9 zufrieden sein- da gibt es allerdings ein Problem: Benutzen wir die filter-Eigenschaften, kann dies im Internet Explorer 9 zu Problemen führen, es sei denn diese Eigenschaft ist in der Vollversion bereits gefixt. Benutzen wir sie nicht, sehen die Buttons vor allem im Internet Explorer 6 bis 8 eher... unschön aus. Als einzige befriedigende Lösung erschien für uns der Einsatz von Conditional Comments: Während der Internet Explorer 9 das normale CSS serviert bekommt, werden den darunter liegenden Versionen die filter-Eigenschaften serviert. Dadurch erhalten die nicht CSS3-verstehenden Versionen des Internet Explorers ein durch filter angepasstes Aussehen, während der Internet Explorer 9 sein Aussehen ausschließlich aus CSS3-Eigenschaften bezieht, die die Zukunft des Webdesigns sind.

Wie wir den Buttons zu guter Letzt (CSS3-basierende) Hover-Zustände beschaffen, wird in Teil 3 des Tutorials erklärt.

Zur Demo |  Download

Quellen

  1. CSS-Tricks: "Ordering CSS3 Properties"

 

Kommentare

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
Mollom CAPTCHA
Geben Sie die Zeichen ein, die in den oben gezeigten Bild zusehen sind. Wenn die Zeichen unlesbar sind, senden Sie das Formular ab und ein neues Bild wird generiert.