Rounded Corners mit CSS und JavaScript

Schon seit dem Beginn im 2000 verwendet tilllate gerundete Ecken als Design-Element. Doch wie kriegt man diese mit elegant hin? Ein Vergleich der Techniken.

Methode 2000: Ich hatte keine grosse Ahnung von HTML und arbeitete noch mit <font>-Tags. *tschudder*. Mein Trick, um die runden Ecken hinzukriegen war trivial:

Die runden Ecken waren im Hintergrundbild drin. Mit Hilfe von unsichtbaren Tabellen wurde der Inhalt dann pixelgenau über dem Hintergrundbild platziert. Unflexibel und unelegant. Jede Aenderung am Design bedurfte ein erneutes Erzeugen des Hintegrundbildes.

Methode 2003

Dieses Verfahren ist jetzt noch auf tilllate zu finden: Ueber halsbrecherische Tabellenkonstrukte baue ich den Rahmen aus 8 verschiedenen Bildern zusammen:

Diese Tabelle erzeugen wir mittels einer Helper-Funktion:

[source:php]
echo tl_getTemplateBox(“the content of the table”,130,43,true,true);
[/source]

Das Ergebnis sind flexible Rahmen (so genannt “liquid”), welche in jedem Browser korrekt angezeigt werden. Aber damit ist schon fertig mit den Vorteilen. Der Code ist schwer, lang, unleserlich, erzeugt 8 teure HTTP-Requests, ist semantisch falsch (Inhalt und Darstellung ist nicht getrennt). Kurz: Ich möchte diese Methode so schnell wie möglich loswerden.

Methode 2007

Für unser neuestes, (noch geheimes) Projekt habe ich nach einer neuen Methode gesucht, welche die genannten Nachteile nicht hat. Die Methode soll folgendes erfüllen:

• flexible Dimensionen
• bisherige Rahmenelemente wiederverwendbar
• PHP-Entwickler muss nicht auf Hacks zurückgreifen
• Erzeugter HTML-Code muss schlank sein
• Inhalt und Darstellung getrennt. Darstellung wird im CSS definiert.

Ich habe Verfahren von hier und von Sitepoint komibiniert, um die genannten Anforderungen zu erfüllen.

Will der PHP-Code einen Inhalt in eine Box mit gerundeten Ecken einfügen, erzeugt er folgenden Code:

[source:html]

[/source]

Ein 10-Zeilen-Javascript wird nun ins window.onload eingehängt. Diese Funktion findet alle DIVs, welche zur Klasse autoround gehört und fügt die notwendigen “Hilfs-DIVs” ein, um die runden Ecken zu erzeugen. Schaut euch mal den “generated HTML-Source” an. Zugegeben, sieht abenteuerlich aus. Aber dieses Konstrukt lässt sich wunderbar per CSS gestalten.

Hier findest Du eine Demo

Ganz glücklich bin ich mit der Methode noch nicht. 8 verschachtelte DIVs finde ich ziemlich wild. Und mit der Javascript-Funktion fügen wir eine neue Komponente ein, welche ausfallen könnte.

Aber von den 43 hier vorgestellten Methoden finde ich es die beste für unsere Bedürfnisse.

Falls ihr bessere Vorschläge habt: Her damit! 🙂