Das ganz normale Chaos, täglich frisch auf den Tisch. Direkt aus der hintersten Provinz in die Metropolen von Groß-Blogistan.


  1. Runde Sache
  1. Runde Sache

    Wed, 30 Jul 2008 08:28:33 +0200

    Gestern hat man mich mal um Rat gefragt, wie den runde Ecken hinzubekommen sind. Abgesehen davon, dass ich es bemerkenswert finde, dass ich als reiner Hobbyist um Rat gefragt werde, zeigt es doch, dass meine Internetseiten wohl doch gelesen werden.

    Zwei Arten

    Grundsätzlich gibt es zwei ganz verschiedene Arten von solchen abgerundeten Ecken und zwei ganz grundsätzlich verschiedene Herangehensweisen. Da gibt es zum einen die klassische Variante mit Bildern solcher Ecken, die über geschickte Verschachtelung von divs und deren Hintergrundbilder diesen div so ausssehen lassen, als hätte er abgerundete Ecken. Das ist nicht die Variante, die ich benutze.

    Und dann gibt es Eckenabrundungen, die ausschliesslich auf CSS beruhen, und zwar auf der CSS Eigenschaft border-radius. Da diese Eigenschaft von den verschiedenen Browsern noch nicht vollständig unterstützt wird, hat jede Browserfamilie eine Art abgespeckter Version davon implementiert. Um die einfachste Version dieser abgerundeten Ecken in den meisten Browsern zu nutzen, ist daher eine Kopie dieser CSS Eigenschaft in die proprietären Eigenschaften -moz-border-radius, -khtml-border-radius und -webkit-border-radius notwendig. Diese einfachste Variante dieser abgerundeten Ecken sieht einfach einen einzelnen Wert vor: Den Wert für den Kreisradius. Ellyptische Abrundungen mit zwei Werten werden meines Wissens nach noch nicht unterstützt. Wird aber wohl auch extrem selten benötigt.

    Warum dies?

    Der Grund, warum ich ausschließlich diese Methode verwende, und niemals die klassische, ist nicht nur der, dass es deutlich einfacher ist. Der wesentliche Grund ist eher formaler Art: Inhalt und dessen Bedeutung kommt ins HTML, das Aussehen nur und ausschließlich ins CSS. Bilder, die einen Teil der Seite so aussehen lassen, als wären die Ecken abgerundet, haben im HTML Nichts zu suchen. Ebensowenig div-Verschachtelungen, die nur dem Zweck dienen, solche Bilder (z.B. per CSS) einzubinden. So lange man sich mit dem HTML befasst, hat allein schon der Gedanke an eckige oder abgerundete Ecken nicht vorzukommen, er ist völlig irrelevant. Erst, wenn es um die Gestaltung per CSS geht, kommt dieser Gedanke vor.

    Dabei ist die Vorgehensweise dann recht trivial. Man weist einfach einem Objekt, das schon vorhanden ist, die CSS Eigenschaft zu, und schon reicht es. Keine Verrenkungen mit Abständen, Paddings und sonstigen Kunstgriffen. Einfach nur die Ecken abrunden, sonst gar Nichts.

    Wenn es bei einer Eckenabrundung dazu kommen sollte, dass das Layout im IE (oder eben in einem anderen Browser) total zerschossen wird, dann liegt die Vermutung nahe, dass man einen eher grundsätzlichen Denkfehler gemacht hat. Eine Abrundung der Ecken hat zwar im IE keine Auswirkung, aber abgesehen davon, dass dieser die Eckenabrundung schlicht überliest und igenoriert, darf das keinen Unterschied machen! Ansonsten hat man sich sehr wahrscheinlich durch viel zu komplizierte "Kunstgriffe" selbst ins Knie geschossen.

    Noch zwei Tipps

    Zum Schluss noch zwei Hinweise. Ich habe mit verschiedenen Border-Radien experimentiert, und dabei generell die Erfahrung gemacht, dass ein Radius in einer ungeraden Pixelzahl bessre aussieht, als mit ieiner geraden Pixelzahl. Insbesondere bei kleinen Radien. Und gerade kleinere Radien sehen besser aus als diese groben Monsterradien. Am angenehmsten wirken Radien von 5px oder 7px. Bei großen Objekten auch mal 11px.

    Hintergrundbilder werden übrigens nicht mit abgerundet! Hat man einem Container abgerundete Ecken zugewiesen, einen Border sowie ein Hintergrundbild, dann wird dieser Rand (Border) auch abgerundet dargestellt, das Hintergrundbild aber bleibt eckig und überlagert den abgerundeten Boder. Unschön. Allerdings weiss ich nicht, ob das an einer unvollständigen Implementation in den Browsern liegt, oder ob der Standard das so vorsieht.