runde Ecken ohne Grafiken vs Semantik

[Sebastian]

Einen wunderschönen, guten Morgen :)

Ich bin gerade auf dieses Tutorial gestossen welches beschreibt wie man runde Ecken ohne Grafiken erzeugen kann.

Mit CSS3 geht das dann (hoffentlich) irgendwann mit der Eigenschaft border-radius, darauf will ich jetzt aber noch nicht setzen.

Ist es Vertretbar zu Layoutzwecken, wie im verlinkten Beispiel, zusätzliche, ansonsten unnötige, Elemente zu verwenden? Selbst wenn ich Grafiken dafür verwenden würde, müsste ich ja zusätzliche Elemente einfügen.

Wie werden runde Ecken am besten umgesetzt? Ich bin mir nicht sicher für welche Variante ich mich entscheiden soll. Bis auf die ganzen leeren Elemente aus dem verlinkten Beispiel gefällt mir die Lösung ganz gut.

Sobald CSS3 ausreichend unterstützt wird, kann man den Code bei allen Varianten einfach anpassen.

Vielen Dank für eure Vorschläge!

Sebastian

[Encoder]

Also ich finds grausam. Nur damit man keine Grafiken braucht, stattdessen etliche andere Elemente einfügen, ich weiß ja nicht...
Meine runden Boxen mach ich mit Grafik, da hab ich dann ohne großes Gefummel in der Hand was ich mache. Und ich kann auch mal größere Ecken gestalten.
Vertretbar oder nicht hängt im Prinzip von dir selbst ab, was du schön findest und was nicht. Ein Browser sollte keine großen Probleme damit haben.

[Sebastian]

Meine runden Boxen mach ich mit Grafik, da hab ich dann ohne großes Gefummel in der Hand was ich mache. Und ich kann auch mal größere Ecken gestalten.

Wie erstellst du deine Grafiken wenn du vorher nicht weißt wie breit dein Element, das die Ecken verpasst bekommen soll, wird? Oder anders gefragt - benutzt du 4 Elemente (1 für jede Ecke) oder 2 (oben + unten)?

Sebastian

[Encoder]

benutzt du 4 Elemente (1 für jede Ecke) oder 2 (oben + unten)?

Je nachdem ob die Breite fest oder frei ist.

[Felix Riesterer]

Lieber Sebastian,

Ist es Vertretbar zu Layoutzwecken [...]

meiner Meinung nach kommt das ganz allein auf Dich an. Bist Du in Sachen Semantik ein "Hardliner", dann kommt für Dich kein unnützer Ballast an sinnfreien Elementen in Frage. Du zeichnest rein semantisch orientiert Deine Inhalte aus - und fertig. Bei der Gestaltung setzt Du ganz auf CSS3 und nimmst eben in Kauf, dass manche Besucher eben keine runden Ecken zu sehen bekommen.

Geht es Dir in allererster Linie um das Aussehen, dann pfeifst Du auf eine schlüssige Semantik und benutzt leere Elemente, um Deine Hintergrundgrafiken einsetzen zu können, die Dir das identische Aussehen in allen Browsern versprechen. In diesem Fall ist Dir sogar egal, ob das Dokument validiert (das Tutorial benutzt <b>-Elemente, die in stricten Doctypes nicht gültig sind).

Vielleicht findest Du Deine Position dazu aber irgendwo zwischen diesen beiden Positionen...?

Liebe Grüße,

Felix Riesterer.

[Sebastian]

Vielleicht findest Du Deine Position dazu aber irgendwo zwischen diesen beiden Positionen...?

Genau das ist ja das Dilemma.
Vom semantischen Standpunkt aus möchte ich auf unnötige Elemente verzichten.
Die brauch ich aber auch bei einer Lösung mit Grafiken. (ich bin auch nicht so fit was Grafikprogramme angeht - meine runden Ecken sehen immer pixelig aus ;))

Vom Standpunkt des Layouters aus möchte ich aber, dass die Ecken überall so aussehen wie ich es will und dann natürlich noch überall gleich.
CSS3 fällt, aufgrund mangelnder Unterstützung, dabei erstmal aus.

Die Frage ist also - unnötige Elemente (lecker div-Süppchen überall wo "gerundet" wird) oder unnötige Elemente + Request und Traffic für die Grafik(en)? Blöd wird es auch spätestens dann, wenn die runden Ecken nicht einfarbig sind, dann müsste ich wohl eh auf Grafiken setzen.

Ich kann mich nicht entscheiden.

Sebastian

[Steel]

Moin!

Ich kann mich nicht entscheiden.

Nimm die Grafiken, bevor deine Hirnhälften sich noch gegenseitig umbringen.

[Sebastian]

Guten Morgen Steel!

Ich kann mich nicht entscheiden.

Nimm die Grafiken, bevor deine Hirnhälften sich noch gegenseitig umbringen.

Danke :)

Sebastian

[molily]

das Tutorial benutzt <b>-Elemente, die in stricten Doctypes nicht gültig sind).

Das ist falsch, b ist Teil von Strict.

Mathias

[Hopsel]

Hi Sebastian!

Ich setze auf -moz-border-radius, -webkit-border-radius, -khtml-border-radius und -o-border-radius in Verbindung mit Curvycorners, das es auch also Plugin für jQuery gibt.

Eingesetzt habe ich es z. B. auf http://keilberg-bauservice.de/.

MfG H☼psel

[Gunnar Bittersmann]

@@Sebastian:

nuqneH

Ich bin gerade auf dieses Tutorial gestossen welches beschreibt wie man runde Ecken ohne Grafiken erzeugen kann.

Grausige Frickelei.

Mit CSS3 geht das dann (hoffentlich) irgendwann mit der Eigenschaft border-radius

Nicht irgendwann, sondern schon längst. Alle gängigen Browser außer IE können da bereits. (Test)

darauf will ich jetzt aber noch nicht setzen.

Warum nicht?

Für IE-Nutzer verzichtet man entweder auf den Effekt oder man erstellt eine Grafik (eine reicht, denn sie kann per Rotate-Filter gedreht werden) und bindet diese als Hintergrundbild von per JavaScript (als CSS-Expression notiert) generierter Elemente ein. (Test)

Qapla'

[Sebastian]

Nicht irgendwann, sondern schon längst. Alle gängigen Browser außer IE können da bereits. (Test)

Oh, da war ich wohl nicht auf dem neuesten Stand.
Nur warum muss ich für jeden Browser eine eigene Eigenschaft festlegen?

Für IE-Nutzer verzichtet man entweder auf den Effekt oder man erstellt eine Grafik (eine reicht, denn sie kann per Rotate-Filter gedreht werden) und bindet diese als Hintergrundbild von per JavaScript (als CSS-Expression notiert) generierter Elemente ein. (Test)

Dann wohl eher kein Effekt. JavaScript nur um ein paar runde Ecken zu erzeugen scheint mir nicht sehr sinnvoll.

Danke für die Berichtigung was das CSS3 angeht! Das werd ich wohl nehmen, auch wenn mir diese propritären CSS-Eigenschaften gar nicht gefallen.

Sebastian

[Gunnar Bittersmann]

@@Sebastian:

nuqneH

Nur warum muss ich für jeden Browser eine eigene Eigenschaft festlegen? […] Das werd ich wohl nehmen, auch wenn mir diese propritären CSS-Eigenschaften gar nicht gefallen.

http://www.alistapart.com/articles/prefix-or-posthack/

Qapla'

[Steel]

Mahlzeit Jungz!

Nur warum muss ich für jeden Browser eine eigene Eigenschaft festlegen? […] Das werd ich wohl nehmen, auch wenn mir diese propritären CSS-Eigenschaften gar nicht gefallen.

http://www.alistapart.com/articles/prefix-or-posthack/

Ja. Netter Artikel, der erklaert, warum ich keine propriaeteren Eigenschaften und Prefixes benutze: Ganz schoen viel Wind um nichts. Wenn Ein Browser es richtig kann, kann er es richtig. Was soll das Gedoens vorher?

Das finde ich beim Authoren des Artikels interessant. Er erklaert dass Browser neue Eigenschaften erstmal unterschiedlich und oft falsch implementieren und legt deshalb nahe fuer jeden Browser seine eigene kleine (falsche) Implementierung anzusprechen, statt sie einfach nicht zu benutzen.

Betrinken kann ich mich billig, wenn ich das nun mit Champanger tun will, aber mir keinen leisten kann, kauf ich kein Gingerale und kipp Fusel rein, damits wenigstens so aussieht, als haett ich mich mal edel abgeschossen. Ich habe dann einfach solange Champagner aufm Einkaufszettel bis das Geld mal reicht oder eben nicht.

Es ist total einfach: Entweder ein Browser kann border-radius oder er kanns nicht. Ja, nein. Schwarz, Weiss. Alles dazwischen ist Spielerei.

[Sebastian]

Es ist total einfach: Entweder ein Browser kann border-radius oder er kanns nicht. Ja, nein. Schwarz, Weiss. Alles dazwischen ist Spielerei.

Es spricht doch nichts dagegen es in der Form zu notieren:

/* CSS3 */  
border-radius:10px;  
/* Gecko-basierte Browser */  
-moz-border-radius:10px;  
/* Webkit-basierte Browser */  
-webkit-border-radius:10px;  
/* Konqueror */  
-khtml-border-radius:10px;

CSS ignoriert unbekannte oder falsche Angaben, also dürfte man damit erstmal einen Schritt weiter sein. Die propritären Angaben kann man entfernen wenn die Browser CSS3 ausreichend unterstützen.

Sicher ist das keine perfekte Lösung, aber man muss sich ebend auch manchmal mit solchen zufrieden geben.

Sebastian

[Gunnar Bittersmann]

@@Sebastian:

nuqneH

Es spricht doch nichts dagegen es in der Form zu notieren [Kommentare gelöscht]:
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;

Doch. Die Eigenschaft ohne Präfix sollte als letztes stehen, damit diese (sofern der Browser sie versteht) eine proprietäre überschreibt.

-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;

Qapla'

[Steel]

CSS ignoriert unbekannte oder falsche Angaben, also dürfte man damit erstmal einen Schritt weiter sein. Die propritären Angaben kann man entfernen wenn die Browser CSS3 ausreichend unterstützen.

Sicher ist das keine perfekte Lösung, aber man muss sich ebend auch manchmal mit solchen zufrieden geben.

Wenn man das unbedingt will, ja. Wie gesagt: Spielereien. Wenn man spielen moechte, gibts diese Variante. Ich wuerde dabei aber border-radius:10px; ans Ende nehmen.

[suit]

Nicht irgendwann, sondern schon längst. Alle gängigen Browser außer IE können da bereits. (Test)

Auch der IE kann das schon (zumindest per Verhaltensrichtlinien :p) - und zwar mit VML:

Nur border-radius
ein bisschen mehr CSS3.

[Sebastian]

Nur border-radius
ein bisschen mehr CSS3.

Klar, und schon fang ich wieder an mich um Extra-Würste für den IE zu kümmern.

Sebastian

[suit]

Nur border-radius
ein bisschen mehr CSS3.

Klar, und schon fang ich wieder an mich um Extra-Würste für den IE zu kümmern.

Genauso wie du dich um Extrawürst für die anderen Browser kümmerst

Ob du jetzt

behavior: url('i3_css3.htc'); oder -moz-border-radius: 5px; notierst ist egal

Im Gegenteil, die Variante mit behavior ist sogar einfacher, da du keine Redundanzen hast.

foo {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  behavior: url('i3_css3.htc');
}

Die 5px Redundanz zur eigentlichen border-radius-Eigenschaft darfst du nicht vergessen - dem IE-Verhaltensfile ist das aber egal, er liest ohnehin die Original-Eigenschaft.

[Beat]

Mit CSS3 geht das dann (hoffentlich) irgendwann mit der Eigenschaft border-radius, darauf will ich jetzt aber noch nicht setzen.

Wieso nicht? Welche totkranken Browser liegen dir denn am Herzen?
Du willst deren User doch nicht erschrecken mit runden Ecken...

mfg Beat