Runde Ecken mit CSS (Cross-Browser)

Runde Ecken… sie sind hübsch, machen eine Website harmonischer und dynamischer. CSS3 sei Dank, ist das, was man früher nur mit Bildern, teilweise mit verschachtelten Div-Monstern erreichen konnte, keine Frickelarbeit mehr.

Bis CSS3 von allen Browsern flächendeckend unterstützt werden, ist leider doch noch ein bisschen Voodo notwendig. Allerdings müssen wir nicht mehr mit obskuren DIV-Konstrukten und Bildern arbeiten, sondern erreichen in den meisten modernen Browsern mit reinem CSS ziemlich gute Ergebnisse. Chrome, Safari und Firefox machen überhaupt keine Probleme und zeigen uns runde Ecken an, wenn wir das möchten.

Der CSS-Befehl in CSS3 lautet schlichtweg

. Oben genannte Browser setzen diesen Befehl aktuell jedoch noch nicht so um, sie haben alle eigene Befehle, die allerdings das gleiche Ergebnis produzieren.

Folgender Codeblock produziert das gewünschte Ergebnis:

border-radius: 10px; schreiben wir ganz zum Schluss um ggf. vorherige Deklarationen damit zu überschreiben, sollte ein Browser den W3C CSS Standard dann doch unterstützen.

Im Internet Explorer und auch im Opera funktioniert das Ganze leider nicht (Opera 10.50beta interpretiert scheinbar das CSS3 border-radius). Das wäre ja auch zu einfach gewesen. :)

Internet Explorer

Im Internet-Explorer müssen wir uns ein wenig Java-Script bedienen und dreckiges CSS produzieren. Doch was will man machen, wenn der Kunde auf gerundeten Ecken besteht? Und das auch noch in allen möglichen Browsern?
Ich persönlich bin Fan davon, dort die abgerundeten Ecken einfach sein zu lassen, und stattdessen einigermaßen validen Code zu schreiben, aber manchmal hat man das einfach nicht zu entscheiden. :(

http://code.google.com/p/curved-corner/ bietet uns ein bisschen JavaScript, dass runde Ecken im Internet-Explorer zeichnet. Die Lösung ist relativ dreckig und spielt nicht gut mit dem dynamischen Nachladen von Elementen zusammen.

Alle Elemente die Runde Ecken bekommen sollen, müssen folgenden Code im CSS haben:

Hierbei ist zu beachten, dass die runden Ecken nur dann gezeichnet werden, wenn die Elemente zusätzlich ein die “position”-Eigenschaft im CSS gesetzt bekommen, auch wenn das eigentlich gar nicht nötig wäre.

Auch können nicht unterschiedliche Werte für die einzelnen Ecken angewendet werden. Möchtet ihr also nur unten runde Ecken, ist das im IE nicht möglich. Auch die Verwendung mit RGBA-Elementen, also Transparenzen ist nicht möglich.

Opera 10.10 braucht wieder einen anderen Hack, und der oben genannte IE-Hack ist auch eher dreckig und mies, statt vernünftig und valide.

Ich empfehle daher, auf reines CSS ohne JavaScript zu setzen und denjenigen, deren Browser keine abgerundeten Ecken per CSS3 rendern kann, einfach die normalen Ecken anzeigen zu lassen.

Neues Layout

Seit gestern ist das neue Layout quasi fertig. Nun werden lediglich kleinste Veränderungen folgen um die Usability und Funktionalität ein klein wenig zu erhöhen. Das aktuelle Template basiert auf einem der Beispiele des YAML:3 Frameworks, welches für die Erstellung dieses Templates eingesetzt wurde.

Weiterhin setzt dieses Template stringent auf die Nutzung der Schriftart Cicle von http://www.tipomatika.co.nr für Überschriften. Die Lizenz sieht das distributieren der Schriftart mittels @font-face nicht ausdrücklich vor, jedoch habe ich von Joan per E-Mail die Erlaubnis dazu erhalten.

Das komplette Paket der Fonts werde ich ggf. demnächst hier zum Download anbieten, oder zumindest verlinken. Mit fertigem CSS für alle Browser und den entsprechenden Font-Dateien.

Ich hoffe, ihr findet euch hier gut zurecht und die Seite ansprechend, klar und aufgeräumt. In Zukunft wird es auch wieder ein wenig mehr Content geben. :)