26. Januar 2010 von Dieter | 2 Kommentare | drucken
Runde Ecken für Google Chrome 4
Gestern ist die Version 4.0 des Browsers Google Chrome veröffentlicht worden und ich habe sie gleich mal ausprobiert (siehe hierzu meinen Beitrag “Google Chrome 4.0 veröffentlicht“).
Dabei fiel mir auf, dass nun der Browser Google Chrome wie bereits mein Android-Browser auf meinem Motorola Milestone die Karteikarten-Navigation (Tab-Navigation, Registerkarten-Navigation, Reiternavigation, Tabbed Document Interfaces (TDI)) auch unten mit runden Ecken versah.
Ups! Diese nicht gewollte Darstellung tritt beim Browser Safari von Apple, der ebenfalls auf der Webkit-Engine beruht, sowie den Vorgängerversionen des Browsers Google Chrome nicht auf.
Also ging ich auf Fehlersuche.
Schließlich fand ich die Ursache des Darstellungsproblems:
Ich hatte die CSS3-Eigenschaft border-radius für runde Ecken auch ohne Präfix, allerdings dort fälschlicherweise ohne Einschränkung auf die oberen Ecken definiert. Offensichtlich interpretieren Google Chrome 4.0 und der Android-Browser diese CSS3-Eigenschaft auch ohne Präfix -webkit.
Nachdem ich dann runde Ecken mittels border-radius nur für oben festgelegt hatte und für unten mit 0 ausgeschlossen, war die Darstellung der Karteikarten-Navigation wieder wie beabsichtigt.
Der dieses Darstellungsproblem lösende und entsprechend gekürzte CSS-Code dafür sieht wie folgt aus:
1 2 3 4 | #nav_main ul li.current_page_item a { border-radius: 9px 9px 0px 0px; } |
Ich hoffe, dieser Hinweis hilft auch anderen Erstellern von Webseiten, wenn sie bereits die CSS3-Eigenschaft border-radius für runde Ecken einsetzen wollen.
Infos
Webseite veröffentlicht am Dienstag, den 26. Januar 2010, um 22:16 Uhr, zuletzt geändert am Sonntag, den 23. Mai 2010, um 23:58 Uhr.
Kategorie: Webdesign
Schlagworte: Android, Browser, CSS3, Google Chrome, Motorola Milestone, runde Ecken, Webkit
Statistik: 250 Blogbeiträge, 670 Schlagworte, 1,179 Kommentare, 122 Feedleser
1. Webstandard-Blog
Kommentar vom 27. Januar 2010 um 14:34
Aus diesem Grund verwende ich für diese Eigenschaft noch den jeweiligen Präfix. Vielleicht wird dies noch in späteren Versionen gefixt.
2. Dieter
Kommentar vom 27. Januar 2010 um 23:53
Ich verwende ja auch Präfixe:
-webkit (Chrome und Safari) sowie
-moz (insbesondere Firefox).
Die CSS-Eigenschaft border-radius ohne Präfix verwende ich ebenfalls in meiner CSS-Datei um für die Zukunft schon gerüstet zu sein (wenn die Präfixe wegfallen). Allerdings hatte ich halt nicht aufgepasst und dort nicht nur für die beiden oberen Ecken die Rundungen definiert gehabt.
Ob ich für den Konquerer noch zusätzlich das Präfix -khtml brauche, will ich in Kürze mal bei browsershots.org überprüfen.