Hallo!Gut/Schlecht zu benutzen -moz-border-radius
Ich habe bemerkt, dass einige Websites -moz-border-radius verwenden, um runde Cornors auf Elementen zu bekommen? Ist das eine gute Übung? Gibt es irgendwelche Nachteile?
Ich würde "-webkit-border-radius" hinzufügen, um Safari und Chrome zu umfassen, und "border-radius", um den CSS3-Standard abzudecken.
Das einzige Problem ist, dass IE8 die abgerundeten Ecken nicht unterstützt. Aber es sieht in allen anderen Browsern gut aus.
Mit border-radius (und seinen Browser-spezifischen Freunden -moz-border-radius und -webkit-border-radius) ist die einfachste Strategie, abgerundete Ecken von Elementen zu erhalten. Da diese Methode standardkompatibel ist (und keine hässlichen Hacks wie positionierte Elemente mit Hintergrund benötigt), ist dies der beste Weg. Für die Unterschiede zwischen -moz und -webkit siehe this page at css3.info. This page enthält auch einige weitere Informationen darüber.
Ja, border-radius gilt als gute Praxis. Es ist sicherlich ein Los besser als die Alternativen wie unordentliches JQuery Zeug oder schlimmer, eine Reihe von Ecke Grafiken - alle Alternativen haben große Probleme, von Unausgeglichenheit bis hin zu verwirren Ihre Hintergründe. ist reines CSS und hat keines dieser Probleme.
Der einzige Grund, warum Sie es nicht verwenden würden, ist der Mangel an Unterstützung in Webbrowsern. Allerdings unterstützen alle gängigen Browser außer IE jetzt border-radius. Einige benötigen weiterhin ein Anbieterpräfix wie -moz-, daher müssen Sie es mehrmals angeben, aber die Funktionalität ist in allen Browsern im Wesentlichen gleich.
Der einzige Browser, der es nicht unterstützt, ist IE, bis Version 8 (IE9 wird es unterstützen, ist aber noch nicht veröffentlicht). Die gute Nachricht ist, dass es einen sehr netten kleinen Hack für IE gibt, der Unterstützung für border-radius (und ein paar andere Features) hinzufügt, sogar zu älteren Versionen wie IE6.
Der Hack heißt , und es lohnt sich einen Blick auf, wenn Sie diese Funktion verwenden möchten. Es bedeutet, dass Sie ein modernes CSS3-Feature wie border-radius verwenden können, ohne zu viel über Ihre IE-Benutzer zu betonen.
Philosophisch
Die CSS-Eigenschaft für border-radius ist eine der besten Möglichkeiten, abgerundete Ecken und überall auf einer Website zu erreichen. IMO ist es der beste Weg.
Obwohl border-radius nicht für alle Browser/Versionen unterstützt wird, verwende ich diese Eigenschaft für fast alle Fälle, in denen gerundete Ecken vorteilhaft sind, da abgerundete Ecken ein dekoratives Feature sind und daher nicht unbedingt erforderlich sind Es wird nicht unterstützt und ist in der Regel auch nicht die zusätzliche Bandbreite der Verwendung eines Image-basierten Effekts oder sogar eines Javascript-Hacks wie CSS3Pie wert.
Dies folgt der "progressive-enhancement" Begründung des Webdesigns. Benutzer mit einem modernen Browser, der den border-Radius unterstützt, können sie sehen, andere Benutzer nicht. Aber ein Grenzradius ist in der Regel keine Frage von Zugänglichkeit oder Benutzerfreundlichkeit. Daher ist die Implementierung via CSS der beste Weg, um 95% der Zeit zu gehen.
Praktisch
In der Praxis mit border-radius tatsächlich drei Eigenschaften erfordern in den meisten modernen Browsern unterstützt werden:
div {
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
Die erste, border-radius die tatsächliche Eigenschaft in der CSS3-Spezifikation aufgeführt ist, und eines Tages wird die defacto implementierte Regel sein. Aber bis eine weit reichende Übernahme erreicht ist und die Spezifikation abgeschlossen ist, müssen Sie noch die herstellerspezifischen Präfixe für -moz- (Mozilla Firefox) und -webkit- (Google Chrome und Apple Safari-Browser) hinzufügen.
Ressourcen
http://border-radius.com/ Erzeugt die richtigen Regeln/Stenographie Versionen je nach welchen Werten Sie sich bewerben möchten und welche Ecken Sie abrunden möchten. Sehr praktisch.
http://www.css3.info/preview/rounded-border/ Einige zusätzliche Informationen über Hersteller-Support, wie die Kurz, etc. verwenden
Gute Antwort, +1. Einige JavaScript-Bibliotheken, wie die jQuery UI, weisen ausdrücklich auf dieses Problem hin. (Und behandeln Sie es auf die gleiche Weise.) – JasCav
+1, stellen Sie einfach sicher, dass es immer noch gut aussieht mit geraden Ecken für all Ihre langweiligen
Ich sollte beachten, dass es einige abgerundete Ecken Plugins für jQuery gibt, obwohl die eine, die ich verwendet habe, nur das Blockelement rundet (es schneidet die Grenze ab) ... also bleibe ich bei den CSS Eigenschaften, auch wenn sie nicht funktionieren in IE8 –