Valles Blog

Ich bin eben beim google’n auf einen sehr interessanten Artikel von Microsoft gestoßen. Microsoft beschreibt darin, welche verschiedenen Möglichkeiten es gibt, in einer HTML-CSS-Seite sogenannte runde Ecken so gestalten.  Runde Ecken -  wer sich darunter nichts vorstellen kann, für den habe ich hier mal noch schnell ein Bild erstellt.

Der Artikel nochmal kurz und übersetzt zusammengefasst. Microsoft nennt als eine mögliche Methode zur Erstellen von runden Ecken, der Verwendung von 4 verschiedenen DIV-Containern. Diese Container stellen jeweils eine Ecke der Box dar. Folgendes hat bestimmt schon jeder mal gemacht.

Ein erfahrender Entwickler erkennt sofort: Das ist scheiße. Ok, ich habe auch etwas übertrieben gearbeitet; so ist der äußerste DIV-Container eigentlich gar nicht nötig. Dennoch stehen dort mindestens 4 DIV, alle mit einem class-Attribut.

Leider ist es ziemlich schwer, eine wirkliche gute Lösung dafür zu finden. Die Mozilla Produkte haben zwar eine CSS-Eigenschaft -moz-border-radius, aber diese ist eben nicht in Microsoft Produkten anzutreffen. Eine schönere Möglichkeit ist nun die erweiterte Anwendung von CSS. CSS bietet ja auch die Möglichkeit, Elemente nach ihrer Verschachtelung zu formatieren. Das macht sich Microsoft zu nutze, was den Vorteil mit sich bringt, dass es ab sofort nicht mehr nötig ist, 4 Class-Attribute zu definieren, sondern nur noch eins. Obiger Code kann somit also auch so geschrieben werden:

Um meine Meinung besser teilen zu können, habe ich bei dem Code etwas geschummelt. So habe ich im ersten Code die eigentlich richtige (konsequente) Einrückung benutzt und hier mit der Einrückung etwas gespart. Ich bin von dieser Möglichkeit allerdings sehr angetan und werde sie in meiner nächsten Entwicklung wahrscheinlich auch verwenden. Achja, ich schreibe euch noch den CSS-Code dazu, falls Microsoft den Artikel verschieben, löschen oder ändern sollte.