• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Runde Ecken bei variabler Größe

Kann CSS3 flächendeckend in allen modernen Browsern Grafiken als Ränder einbinden?
Wie gesagt, es geht mir nicht um speziell runde Ecken.

Websites mit schönen Rändern in verschiedenster Form gibt es viele. Aber die meisten arbeiten mit fixer Breite und/oder fixer Höhe, passen sich weder den Viewport noch der Schriftgröße an. Ich hatte nur nach einer Lösung gesucht, das mit variabler Höhe und Breite zu realisieren.

Es müssen nicht runde Ecken oder Schatten sein, es könnte ja alles sein, z.B. der Rand um ein Foto oder ein Vorhang oder wasuauchimmer.
 
Werbung:
Hallo Efchen,

definiere doch bitte "moderne" Browser.
Testen könnte man es ja mal mit Hilfe dieser Seite:

CSS3 Previews - CSS3 . Info

dort sind schon verschieden CSS3-"funktionen" aufgelistet und sollt es nicht funktionieren, wird es auch nicht angezeigt. Wenn man moderne Browser nimmt, muss man Opera 10.x z.B. dazuzählen. Allerdings hat der momentan nur knapp 2% Anteil an den Browsern die genutzt werden. Da hat der IE7 mehr, und der ist nicht modern. ;) Ist schwer so ein Thema zu behandeln.

Anbei noch border-image:
Border-image: using images for your border - CSS3 . Info (geht anscheinend auch im IE8)


Grüßli
Loon3y
 
Alles was in den gängigen Browsern nur mit Präfix (-moz-, -webkit- usw) funktioniert kann nur ein Hack für bestimmte Browser sein.
Ein css welches alternativlos nur auf solche Eigenschaften baut ist in meinen Augen kaum praxistauglich.
 
Zuletzt bearbeitet:
Werbung:
Man sollte nicht immer für die Browser arbeiten, sondern mit den Browsern. Wenn ein Browser etwas nicht kann, dann wird das eben nicht dargestellt.

Ich finde diesen Standpunkt *generell* wenig benutzerfreundlich, auch wenn ich dir in Hinblick auf rein dekorative Elemente (um die geht es ja) nicht unbedingt widerspreche. Die Schwierigkeit ist, wo du die Grenze ziehst beziehungsweise welcher Anteil der Nutzer die bestmöglich aussehende Seite zu Gesicht bekommen soll. Mit derselben Argumentation könntest du im Prinzip Techniken einsetzen, die noch gar kein Browser anzeigen kann. (Nimm sowas wie Farbverläufe oder CSS-Transitions oder SVG-Grafiken als Beispiel.) Das andere "Extrem" ist es, für alle diejenigen Browser zu entwickeln, die noch verbreitet sind. Aber es kommt natürlich schon auf den konkreten Fall an. Ich möchte behaupten, oft stellt sich die Frage überhaupt nicht, weil es entweder Grafiken sein müssen oder weil Grafiken viel zu kompliziert wären, um einen zu minimalen Effekt zu erzielen.

Es besteht aber auch kein Grund, ein Design grundlos für jeden fünften Besucher (oder welcher Anteil auch immer) zu verschlechtern.

Zumal es in meinen Augen absolut nicht perfomant ist, wenn man für eine Box 8 Grafiken (waren das soviel?) einbaut und 4x <div> öffnet...

Mir gefällt das auch nicht besonders. Die Frage, ob etwas geschickt oder performant ist, stellt sich jedoch eigentlich nicht, wenn es keine Alternativen gibt, die bei einer ausreichenden Anzahl von Besuchern funktionieren. (Und für's Protokoll: Es gibt Schlimmeres hinsichtlich der Performance.)

neuroleptika schrieb:
Alles was in den gängigen Browsern nur mit Präfix (-moz-, -webkit- usw) funktioniert kann nur ein Hack für bestimmte Browser sein.

Das wäre also wieder Arbeiten für die Browser. Da schließt sich der Kreis. :)

Loon3y schrieb:
Ist schwer so ein Thema zu behandeln.

Ich weiß nicht. Das Thema gibt es ja nicht erst seit gestern (und nicht nur im CSS-Bereich). Und selbst wenn es keine Pauschalantwort gibt, sollte man Nutzer (schon gar nicht einen signifikanten Anteil) nicht für die Wahl ihres Browsers bestrafen.
 
Ich finde diesen Standpunkt *generell* wenig benutzerfreundlich, auch wenn ich dir in Hinblick auf rein dekorative Elemente (um die geht es ja) nicht unbedingt widerspreche.
Ich denke, bei der Aussage ging es auch um dekorative Elemente. Da sehe ich das nämlich genauso. Wenn ich runde Ecken per CSS mache, und ein Browser kann das nicht, dann sind die Ecken halt eckig. Das brucht der Benutzerfreundlichkeit keinen ab.
 
Ich finde diesen Standpunkt *generell* wenig benutzerfreundlich, auch wenn ich dir in Hinblick auf rein dekorative Elemente (um die geht es ja) nicht unbedingt widerspreche.

halt halt halt! Nenne mir ein Beispiel das nicht benutzerunfreundlich wäre, wenn man die Arbeitstechnik so umstellt wie ich es gesagt habe (in punkto CSS).

Runde Ecken werden zu eckigen Ecken (hehe..) -> benutzerunfreundlich
transparenz wird zu nicht tansparenz -> benutzerunfreundlich (sofern die Schrift dann lesbar ist..)
Boxshadow wird zu kein Schatten -> benutzerunfreundlich
SVG wird zu Alternativbild -> benutzerunfreundlich
Irgendwelche "DOM-manipulationen" oder JS-features werden zu reinen HTML -> benutzerunfreundlich.

Es wird eigentlich, oder sollte - sofern man es richtig macht -, nie benutzerunfreundlich werden, wenn man die "Alternative" dann darstellt. Es ist dann eben nur nicht so schön in manchen Browsern.

Aber welcher User heutzutage benutzt 2 Browser um Seiten zu vergleichen? Ich behaupte mal so gut wie keiner. Und selbst wenn das jemand tun würde, würde er dann den Browser nutzen, wo er nicht alles so schön und abgerundet dargestellt bekommt? Nein. So, und wirklich nur so, bekommt man Browser wie IE6, IE7 und andere Altlasten weg.

Es besteht aber auch kein Grund, ein Design grundlos für jeden fünften Besucher (oder welcher Anteil auch immer) zu verschlechtern.

Wieso nicht? Ich verschlechtere es ja nicht. Ich stelle sozusagen das minimal-Design zur Verfügung. Wer ein 20 Jahre altes Auto fährt, der lebt auch mit hohen Spritkosten und eventuell keiner grünen Plakette für Stadtteile, aufgrund der hohen Abgaswerte. Also wieso sollte dann ein User mit einem veralteten Browser nicht auch nur das minimum (was natürlich dennoch benutzerfreundlich ist) zu Gesicht bekommen? So grenze ich keinen aus, aber ich Arbeite mit den Browsern und nichit für die Browser.

Mir gefällt das auch nicht besonders. Die Frage, ob etwas geschickt oder performant ist, stellt sich jedoch eigentlich nicht, wenn es keine Alternativen gibt, die bei einer ausreichenden Anzahl von Besuchern funktionieren. (Und für's Protokoll: Es gibt Schlimmeres hinsichtlich der Performance.)

Was ist perfomanter:
8 Grafiken und 2KB HTML mehr laden (aufgrund der vielen <div>)
oder
0 Grafiken, 1 Zeile CSS und 0KB mehr HTML zu laden?

Rechne das doch mal hoch wieviele Schattengrafiken, abgerundete-Eckengrafiken und und und du lädst, nur damit es in allen Browsern geht. Kleinvieh macht auch misst.



Grüßli und endschuldigung für die angefechtete Diskussion
Loon3y :)
 
Werbung:
Efchen schrieb:
Wenn ich runde Ecken per CSS mache, und ein Browser kann das nicht, dann sind die Ecken halt eckig. Das brucht der Benutzerfreundlichkeit keinen ab.

Loon3y schrieb:
halt halt halt! Nenne mir ein Beispiel das nicht benutzerunfreundlich wäre, wenn man die Arbeitstechnik so umstellt wie ich es gesagt habe (in punkto CSS).

Runde Ecken werden zu eckigen Ecken (hehe..) -> benutzerunfreundlich
transparenz wird zu nicht tansparenz -> benutzerunfreundlich (sofern die Schrift dann lesbar ist..)
Boxshadow wird zu kein Schatten -> benutzerunfreundlich
SVG wird zu Alternativbild -> benutzerunfreundlich
Irgendwelche "DOM-manipulationen" oder JS-features werden zu reinen HTML -> benutzerunfreundlich.

So weit sind wir da eigentlich gar nicht auseinander. Ich glaube nur, der Zeitpunkt, sowas eiskalt umzusetzen, ist noch nicht gekommen und wird auch nie kommen, da es immer Technologien geben wird, die noch nicht zur überwältigenden Mehrheit der Nutzer "durchgesickert" sind.

Daher mal die Frage: Wieso designen wir überhaupt Internetseiten und schicken nicht nur ungestyltes HTML (also die reinen Informationen) raus? Wieso setzen wir JavaScript-Enhancements ein? Und warum *wollen* wir überhaupt abgerundete Ecken oder auch größere Verzierungen? All das sollte niemals unfunktional sein. Frei nach "Form follows function" behaupte ich, dass auch eher kleine Design- und Bedienungsaspekte die Usability beeinflussen. (In diesem Zusammenhang eine nette Anekdote zu runden Ecken.) Jede unnötige Regression verschlechtert potentiell das Benutzererlebnis. (Um es noch mal zu betonen: Das ist keine Aussage, die ich speziell auf runde Ecken beziehe -- aber im Zweifel durchaus auch. Siehe mein letzter Post.)

Loon3y schrieb:
Es wird eigentlich, oder sollte - sofern man es richtig macht -, nie benutzerunfreundlich werden, wenn man die "Alternative" dann darstellt. Es ist dann eben nur nicht so schön in manchen Browsern.

Wir reden hier aber nicht von 0.5 % der Nutzer, die mit dem Netscape 3 unterwegs sind. Ich weiß, ihr definiert "Nutzerfreundlichkeit" etwas überspitzt gesagt als "kann jeder Nutzer problemlos verwenden, weil alle Funktionen gut sichtbar vorhanden sind und gegen keine Grundprinzipien verstoßen wurde", was ja auch richtig ist. Ich würde aber noch einen qualitativen Aspekt hinzufügen: "Jedem Nutzer sollte zudem nach Möglichkeit die am besten aussehende und am besten funktionierende Version einer Seite dargeboten werden." Das heißt natürlich nicht, dass man wer weiß welche Verrenkungen anstellen sollte. Weiter ausgeführt habe ich das im letzten Post.

Wer ein 20 Jahre altes Auto fährt, der lebt auch mit hohen Spritkosten und eventuell keiner grünen Plakette für Stadtteile, aufgrund der hohen Abgaswerte. Also wieso sollte dann ein User mit einem veralteten Browser nicht auch nur das minimum (was natürlich dennoch benutzerfreundlich ist) zu Gesicht bekommen? So grenze ich keinen aus, aber ich Arbeite mit den Browsern und nichit für die Browser.

So arg benutzerfreundlich klingt das in meinen Ohren nicht. :) Auch auf die Gefahr hin, mich zu wiederholen: Wir reden hier nicht von einem verschwindend geringen Nutzeranteil. Du solltest vielleicht *für den Besucher* (bzw. letztlich für den Kunden) arbeiten.

Deine Unterscheidung in "für" und "mit" dem Browser ist irgendwie nicht ganz trennscharf. Wie neuroleptika sagte: vendor-spezifische CSS-Regeln sind im Grunde Hacks. Syntaktisch und semantisch (weil bedeutungslos) einwandfreie Div-Elemente sind keine Hacks. Du könntest genau umdrehen, welche Technik "für" und welche "mit" den Browsern arbeitet.

Was ist perfomanter:
8 Grafiken und 2KB HTML mehr laden (aufgrund der vielen <div>)
oder
0 Grafiken, 1 Zeile CSS und 0KB mehr HTML zu laden?

Rechne das doch mal hoch wieviele Schattengrafiken, abgerundete-Eckengrafiken und und und du lädst, nur damit es in allen Browsern geht. Kleinvieh macht auch misst.

Dass sich die Frage nicht stellt, weil der Effekt nunmal flächendeckend nicht anders zu erzielen ist, habe ich bereits gesagt. Abgesehen davon sind 2 kb Code und 8 Grafiken, die gecached werden, nichts, worüber man sich den Kopf zerbrechen müsste. Die Zeit ist besser in SQL-Statements und serverseitiges Caching investiert.

Um es noch mal in einem Satz zu sagen: Ich halte es für falsch, einem großen Nutzeranteil unnötigerweise eine "minimalere" Seite zu präsentieren.

Das ist eine allgemeine Aussage, die ich deiner allgemeinen Aussage "dann wird es eben nicht angezeigt" entgegensetze. Im konkreten Fall ist das sicher abzuwägen.

So, und wirklich nur so, bekommt man Browser wie IE6, IE7 und andere Altlasten weg.

Das ist "optimiert für 1024x768 32-Bit" in Version 2.0. Ich bin nicht wirklich dagegen, aber man sollte sich vergegenwärtigen, dass das eine Bevormundung des Benutzers ist. Zumindest dann, wenn es anders zu lösen ist.
 
Zuletzt bearbeitet:
Wenn ich runde Ecken per CSS mache, und ein Browser kann das nicht, dann sind die Ecken halt eckig. Das brucht der Benutzerfreundlichkeit keinen ab.
Es sind aber die meißten Browser. Nur durch die propietären präfixe (-moz- und -webkit-) funktionieren die Beispiele in den neusten ff und Safari.

Nur die Screenshots funktionieren im aktuellen IE und Opera.
... here are screenshots of the two examples.
Im IE8, Opera10.10 und ff2.0 sieht es nicht schön aus.

Edit:
Jetzt antwortet bitte nicht mit "im Chrom und Iron sieht es auch gut aus".
 
Zuletzt bearbeitet:
Hmm das artet ein bisschen aus. ich denke wir sollte auf andere Weise das Gespräch fortführen. (OT?)

Ich glaube das Grundproblem ist immernoch, dass viele denken, das(s) Benutzer mit mehr als einen Browser ankommen.
Ein User der keine runden Ecken in seinen Browser sieht, der wird sich erst "benachteiligt" fühlen, wenn er mit einem anderen Browser (welcher das kann) ankommt und den Unterschied sieht. Aber wer macht das? Wer öffnet wirklich eine Seite mit 2 Browsern und schaut die Unterschiede an? Und wer würde dann den "nicht-funktionierenden" Browser weiterhin verwenden?

Zumal man auch sagen muss, dass keine runden Ecken nicht immer schlechter aussehen wie Runde.

Sicherlich hast du absolut recht, dass man Zeit in SQL und anderen Techniken stecken sollte um dort die performance rauszuholen. Aber wenn dem so wäre, dann könnte jeder sich ein CSS-Framework ala yaml runterladen, was überschüttet von <div>'s ist, und sich da die Zeit sparen. Dafür funktioniert es in allen Browsern. Aber ist das der Sinn? Das ganze kann man weiterführen indem man noch YQL / Mootools / jquery - Mopeds einbindet und ein Zend-PHP-Framekwork verwendet.

Um von den Ecken-Thema abzuschweifen, soll es wirklich in jedem Browser gleich aussehen? Wenn du dir eine neue Wohnung kaufst und dort ist bereits ein Fernseher von der Firma M vorhanden, aber du bekommst im laufe der Zeit einen Fernseher von der Firma X und merkst, dass diesser viel besser ist, beschwerst du dich dann auch bei den Fernsehsendern, wieso sie es nicht hinbekommen, dass das Bild überall gleich aussieht? Beschwerst du dich dann auch über Nutzerfreundlichkeit? :)

@ neuroleptika
aber im Chrome...hehe... ;)

Gruß
Loon3y
 
Werbung:
So weit sind wir da eigentlich gar nicht auseinander. Ich glaube nur, der Zeitpunkt, sowas eiskalt umzusetzen, ist noch nicht gekommen und wird auch nie kommen
Och, bei mir ist die Zeit schon vor Jahren da gewesen. Der eine Browser kann was, der andere nicht. Warum soll ich das nicht den Nutzern bieten, deren Browser es kann. Bei z.B. runden Ecken hab ich da schon seit Jahren keine Skrupel.
Klar, es sind proprietäre Eigenschaften und damit nicht valide, aber sie greifen dem nächsten Standard vor und sind kein Extra, was zu unterstützen sich nicht lohnt. Und sie mindern die Nutzbarkeit um nichts.
 
Warum suchst du dann eigentlich nach einer HTML-Lösung für z.B. abgerundete Ecken, wenn es dafür schon die proprietären Eigenschaften einiger Browser gibt und du diese, wie du sagst, auch schon nutzt?
 
ICH SUCHE KEINE RUNDEN ECKEN!!!!!!!!!!

Sorry :-)
Aber irgendwo erwähnte ich bereits, dass es mir um Rahmen jeglicher Art aus Images geht und ich nur "runde Ecken" ins Topic geschrieben habe, weil ich das jetzt als Oberbegriff genommen habe - ein Fehler, wie sich herausstellt ;-)
 
Werbung:
Ob jetzt runde Ecken oder Rahmen jeglicher Art aus Images ist ja auch relativ egal, hab jetzt auch nicht jeden Beitrag mit voller Aufmerksamkeit gelesen, denn dafür gibt es ja (noch proprietär)
Code:
border-image
, also erübrigt sich die Disskussion doch eigentlich schon, oder?

Die Verwendung von Images als Rahmen kann man ja so handhaben, wie die runden Ecken. Browser die es unterstützen zeigen es an, die anderen eben nicht.
 
Wobei das bei aufwändigen Rahmen, z.B. einem alten Pergament mit ausgefransten Ecken schon ein deutlich größerer Unterschied ist, als wenn es nur darum geht, ob die Ecken einer Box leicht abgerundet sich oder nicht.
 
Wobei ich da auch eher _Thor_ Recht geben muss. Natürlich ist das Design eines bebilderten Rahmens weitaus komplizierter, aufwendiger und wahrscheinlich auch hübscher, als einfach nur ein Rahmen mit abgerundeten Ecken, aber letztendlich ist und bleibt es ein Designelement, welches zwingend nicht notwendig ist. Es tut der Benutzbarkeit hier also keinen Abbruch, wenn es nicht vorhanden ist.
Das ist aber nur meine Meinung ;-)
 
Werbung:
Zurück
Oben