Bookmarks
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Beispiel: Runde Ecken
Umfrage
Hat Ihnen dieses Beispiel geholfen?
Runde Ecken
«Runde Ecken» sind als Layout-Element immer beliebt. Leider benötigen
diese aber einen umfangreicheren Quellcode.
Meistens erfolgt die Gestaltung mittels Tabellen, DIV-Boxen oder, etwas eleganter,
aufwändigen CSS Angaben.
Beispiele:
CSS
Beide Varianten haben den Nachteil, dass der HTML-Quelltext länger und
unübersichtlicher wird.
Zukünftig sollte das schöner gehen. Seit längerer Zeit liegt
CSS3
als «Working Draft» vor, hier gibt's dann 'border-radius'. Nun ist es aber so,
dass der Standard zuerst verabschiedet werden muss und erst danach in die
neuen Browser der Standard implementiert wird. Folglich dauert das noch
ein paar Jahre bis dies verwendet werden kann!
Folglich, es gibt keine wirklich saubere Lösung um runde Ecken zu gestalten!
Zu diesem «Dilemma» gibt es aber einen guten Lösungsansatz (Beispiel 1), hier bleibt der Quellcode kurz und valied! Zudem, wenn CSS3 eines Tages verbreitet ist, kann der Quellcode mit Leichtigkeit an den neuen Standard angepasst werden.
Beispiele der Varianten
Beispiel 1
Runde Ecken mittels JavaScripts Nifty Corner Cubs.
Geht mit: Epiphany 2, Firefox 2, Firefox 1.5, Galeon 2, IE 7, IE 6, IE 5.5, Kazehakase, Konqueror 3.5, K-Meleon 1, Navigator 9, Opera 9, Safari 2, SeaMonkey 1
Geht nicht mit: Dillo, IE 5
Vorteil
Funktioniert mit allen neueren Browsern.
Nachteil
JavaScript muss vorhanden und aktiviert sein, was aber meistens gegeben ist.
Das JavaScript rundet die Ecken erst ab, nachdem die Webseite vollständig geladen ist.
Sollte das nicht funktionieren, so bleiben die Ecken eckig.
Beispiel 2
Runde Ecken mittels CSS3 (border-radius:).
Geht mit: ?
Geht nicht mit: Dillo, Epiphany 2, Firefox 2, Firefox 1.5, Galeon 2, IE 7, IE 6, IE 5.5, IE 5, Kazehakase, Konqueror 3.5, K-Meleon 1, Navigator 9, Opera 9, Safari 2, SeaMonkey 1
Vorteil
Noch keine.
Nachteil
Geht erst in fernerer Zukunft.
Beispiel 3
Runde Ecken mittels proprietärem Mozilla CSS (-moz-border-radius:).
Geht mit: Epiphany 2, Firefox 2, Firefox 1.5, Galeon 2, K-Meleon 1, Kazehakase, Navigator 9, Safari 2, SeaMonkey 1
Geht nicht mit: Dillo, IE 7, IE 6, IE 5.5, IE 5, Konqueror 3.5, Opera 9
Vorteil
Saubere Lösung.
Nachteil
Geht nur mit Browsern aus dem Mozilla Umfeld.
