Pixelfans

Runde Ecken für Webkit, Gecko und Opera

geschrieben von Pawel

Runde Ecken scheiden die Geister. Während die einen sie für überflüssig halten, halten andere sie im Webdesign für nützlich. Wir gehören zu letzteren. Durch die runden Ecken können Inhalte optisch besser gruppert werden, was auch gut an unseren Infoboxen sichtbar wird.

Nun gibt es viele erprobte Lösungen, die aber entweder das Markup aufblähen, zusätzliches Javascript benötigen oder mit Bildern arbeiten.

Peter Kröner hat eine Möglichkeit gefunden, die auf all das verzichten kann und sogar mit dem Internet Explorer funktioniert. Die Demo funktioniert zwar, dafür gibt man aber die Möglichkeit auf, die Elemente nach Inhalt zu benennen.

Wenn man mit ein bisschen Meckern des CSS-Validators leben kann, gibt es keinen Grund bei Browsern auf der Basis von Webkit und Gecko nicht zur Eigenschaft border-radius zu greifen. Die beiden Browserengines benötigen nur ihr jeweiliges Prefix (-webkit bzw. -moz)und schon gibt es im Firefox, Safari, Chrome us. runde Ecken.

Ein bisschen Vorsicht ist geboten, da sich die Syntax etwas unterscheidet. Webkit folgt der W3C-Empfehlung, Firefox weicht etwas davon ab. Die Unterschiede stellt CSS3.info gut dar.

Gerrit van Aaken wünscht sich auch runde Ecken für den IE8 und Opera. Opera selbst hat eine Möglichkeit vorgestellt, die es nutzt, dass nur der norwegische Browser bisher SVG als Hintergrundbild anzeigen kann. Die SVG-Grafik enthält dabei die gewünschte Farbe, Rand und (wie auf pixelfans) Transparenz. Bedauerlicherweise zeigt diese Beispiel aber auch die Vergänglichkeit von CSS-Hacks.

Als Opera 9.5 aktuell war (z.Zt. gibt es gerade die 10 alpha) hat kein weiterer Browser

div:nth-child(1n)

unterstützt. Durch diesen Hack konnte für Opera (und auch für den Konqueror) die Hintergrundfarbe verändert und der Rand entfernt werden. Mittlerweile interpretieren aber auch die Webkitbrowser diese CSS3-Anweisung.

Glücklicherweise hat sich Dirk Ginader Gedanken über CSS-Hacks gemacht (und diese auch mitgeteilt). Opera benötigt

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 ... {
...
 }
}

und schon kann wider in Analogie zum o.g. Beispiel gearbeitet werden. Wir haben auf pixelfans noch

html:not(:nth-child(1))... { ... }

verwendet, um für den Konqueror Farbe und Rand wieder zu setzen. Jetzt fehlt wirklich nur noch der Internet Explorer.

Kategorie: CSS , SVG | Kommentare (0) | Permalink