Abgerundete Ecken mit CSS, das geht. Das wird heute von (fast) jedem Browser
unterstützt. Damit kann man nicht nur moderne Designs hin-zaubern, ohne auf
Bilder zurückgreifen zu müssen, die mit dem Inhalt Nichts zu tun haben. Ob
irgendwelche Ecken rund sind oder eckig, ist keine Frage des Inhalts und nur
bedingt eine Frage der Struktur. Es ist fast ausschließlich eine Frage des
visuellen Designs, der optischen Präsentation. Logischerweise gehören abgerundete
Ecken auch genau dort hin, wo das visuelle Design, die optische Präsentation,
erstellt wird: In das CSS Stylesheet. Mit der CSS3 Option
border-radius
kann man nett anzusehende abgerundete Ecken für jedes Blockelement hinbekommen.
Wenn man diese Techniken nun etwas kreativer anwendet, kann man damit auch andere nette Dinge machen, wie bei Kulando kurz angerissen. Das Ganze geht zurück auf einen Artikel bei Creativityden.
Beispiel
.round
{
border-radius: 5px; /* all corners have a radius of 5px */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px 4px 3px 2px; /* corner values go clockwise so, first value is the top left, second, the top right, third, bottom right and fourth, bottom left */
}
Das Beispiel ist von Creativityden. Warum nun -moz-border-radius und
-webkit-border-radius? Nun, im Detail unterscheiden sich die verschiedenen
Implementationen a)voneinander und b)vom Standard. Und nicht alle Browser haben
wirklich schon border-radius implementiert. Und manch älterer Browser ist
noch in Gebrauch, der vielleicht die proprietäre Variante kann, aber die Standard-Version
nicht. Daher tut man vorläufig gut, wenn man die älteren proprietären Versionen
sozusagen als fallback mit hinzufügt.
Relativ wenig Probleme haben alle Browser damit, alle Ecken gleich abzurunden. Das wird hier in der ersten Zeile so eingestellt. Hier unterscheidet sich die Syntax auch nicht bei den proprietären Versionen. Diese Variante verwende ich so ähnlich hier bei Rorkvell. Da ich allerdings konsequent auf ein flexibles Design setze, werden die Ecken bei mir nicht in Pixeln abgerundet, sondern abhängig von der Schriftgröße. So erreiche ich Abrundungen, die einigermaßen harmonisch zu der dargestellten Schrift passen:
.round
{
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
Gut, der Selektor heisst bei mir anders. Denn was sagt der Klassenname
.round über den Inhalt dieses Containers aus? Nichts. Aber als Demo
für die Technik ist der Name geeignet.
So weit, so schön. Bis auf IE natürlich, der kann das nicht. Der IE6 kann es nicht, der IE7 kann es nicht, der IE8 kann es nicht. Bei Catswhocode gibt's eine Anleitung, wie man das per Javascript auch für den IE hin bekommt. Vielleicht bastle ich das hier gelegentlich mal rein. Kaputtmachen kann ich ja damit eigentlich Nichts. Und wenn im IE Javascript abgeschaltet ist, nun ja, dann sind die Ecken eben wieder so eckig wie jetzt auch schon. Das Javascript hier wäre also ein progressive enhancement, eine Möglichkeit, das Aussehen einer Webseite zu verbessern, ohne damit die Nutzbarkeit für sicherheitsbewusste Surfer zu beeinträchtigen.
Allerdings werde ich solche Spezialitäten immer in diese sogenannten Conditional Comments einbetten.
