CSS und die runden Ecken
In meinen letzten beiden Projekten (eins davon ist endlich online, der Relaunch des berühmt-berüchtigten Getreidemühlen Online-Shop: http://www.getreidemuehlen.de) habe ich mich mit dem Screendesign selbst in die Bredouille gebracht, Contentboxen mit runden Ecken zu versehen, mal mit Schatten, mal mit Rahmen.
Mit CSS3 eigentlich kein Problem, denn dort gibt es praktische Anweisungen für border-radius und box-shadow. Fast alle aktuellen Browser können damit auch was anfangen, außer – wen wundert’s – Internet Explorer 8. Daher ist es ein leider nach wie vor aktuelles Thema.
Es gibt diverse Methoden, die sich mit JavaScript behelfen und sehr gut funktionieren, z. B. Curvy Corners. Allerdings, auch ohne Purist zu sein: für ein paar schicke Rundungen mit ‘ner JS Library um die Ecke zu kommen, um die nötigen Elemente ins DOM zu pfropfen? Irgendwie sorgt die Vorstellung bei mir für Unbehagen – es mag Old School sein, aber für mich ist JavaScript immer noch in erster Linie für Action zuständig, nicht fürs Aussehen. Dann doch lieber gleich die Elementsuppe manuell löffeln, und hierfür haben sich über die Jahre diverse Techniken gefunden: Spiffy Corners, Transparent custom corners and borders von 456 Berea St., und die exzellenten, variabelsten Even More Rounded Corners von Schillmania, die auch mit CSS3 eine Daseinsberechtigung haben, denn wie das Beispiel im Link zeigt, ist damit auch noch mehr drin als nur runde Ecken.
Doch es gibt auch einen anderen Ansatz: warum dem Internet Explorer nicht einfach eine Nachhilfestunde via .htc File geben? Hat sich damals mit IE6 und den PNGs schließlich auch bewährt. Und siehe da, es gibt zwei sehr gute Ansätze: zum Einen die Curved Corner Lösung von htmlremix, zum Anderen die ultimative ie-css3.htc von fetchak, die dem IE nicht nur runde Ecken, sondern sogar auch ein bißchen Schatten beibringt! Ohne Frage die bequemste und sauberste Lösung, allerdings mit einem Haken: sind die Inhalte in den so gestylten Boxen sehr komplex und verschachtelt, treten mitunter Fehldarstellungen auf, die durch kreativen, großzügigen Umgang mit position: relative Anweisungen gelöst werden können – was aber, gerade wenn’s komplex wird, nicht immer möglich oder ratsam ist. Das heißt: diese Lösung ist nur bei relativ simplem Content zu empfehlen.
Die beste aller Lösungen fand aber bei besagtem Getreidemühlen Shop Anwendung: Internet Explorer und alle alten Browser wurden einfach ignoriert. Da sie border-radius nicht verstehen, machen sie die Ecken eben eckig, und mal ehrlich: die etwas weniger hübsche Optik tut dem Sinn und Zweck dieser (und jeder anderen) Seite keinen Abbruch, zumal der IE-Nutzer ja nicht weiss, was er verpasst. Und die gute Nachricht zum Schluss: IE9 wird ziemlich sicher runde Ecken unterstützen …
Es gibt noch keine Kommentare.