Runde Ecken für Google Chrome 4

Dieter — Tue, 26 Jan 2010 21:16:40 +0000

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.

Kommentare

27. Januar 2010, Webstandard-Blog schreibt: Aus diesem Grund verwende ich für diese Eigenschaft noch den jeweiligen Präfix. Vielleicht wird dies noch in späteren Versionen gefixt.
27. Januar 2010, Dieter schreibt: 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.

Webseiten-Infos.de » Motorola Milestone

Runde Ecken für Google Chrome 4

Kommentare

Ähnliche Beiträge