Direkte Frage von Jay Hughes
@chriscoyier Brauchen wir -moz und -webkit Präfixe noch bei populären Dingen wie border radius und box shadow? Gibt es einen Post darüber?
— Jay Hughes (@graphicsjay) 28. November 2012
Ich hatte keinen spezifischen Post dazu, also machen wir das mal!
Kurze Antwort
Speziell für box-shadow und border-radius, wahrscheinlich nicht.
Sie brauchen sie nur, wenn
- Es eine seltene Situation ist, in der das Fallback mit rechteckigen Ecken oder ohne Schatten die Erfahrung beeinträchtigt.
- Und Ihre Website einen erheblichen Traffic von Firefox 3.6-, Safari 4-, iOS 3.2- oder Android 2.3-Nutzern hat
Ausführliche Antwort
Lassen Sie uns etwas tiefer eintauchen. Erstens können Sie genau sehen, welche Browser welche Funktionen unterstützen, unter Can I use….
Zweitens sollten Sie Entscheidungen über Funktionsunterstützung nur basierend auf Statistiken Ihrer eigenen Website und nichts anderem treffen.
border-radius
Firefox 3.6- benötigt -moz-. Ab Version 4 ist die ungeprägte Version in Ordnung. Auf dieser Website sind das 0,3% der etwa 30% Firefox-Nutzer.
Safari 4- benötigt -webkit-. Das ist auf dieser Website noch geringer. 0,1% der etwa 10% Safari-Nutzer.
iOS 3.x benötigt ebenfalls -webkit-, was ein iPhone 3GS oder iPad 1 bedeutet, die nie aktualisiert wurden, was die kleinste Zahl bisher ist.
Nochmal, es sind Ihre Website-Statistiken, die zählen, aber ich schätze, die meisten Websites liegen mit all dem zusammen deutlich unter 1%.
Ganz zu schweigen davon, dass ein nicht-renderndes border-radius das Paradebeispiel für „wen interessiert's“-Fallbacks ist.
box-shadow
Box-shadow ist ähnlich, aber etwas strikter. Genau gleich für Firefox und iOS. Safari benötigt -webkit- in 5.0-, wurde aber nur drei Monate später in 5.1 (das mit OS X 10.7 ausgeliefert wurde) behoben.
Der signifikanteste Unterschied ist, dass Android 2.3 -webkit- benötigt. Can I Use listete es für 4.0 als notwendig, aber ich habe eine Korrektur eingereicht und sie haben es innerhalb von Stunden behoben, also gut zu wissen! Selbst auf dieser Website sehe ich 0,5%, was weit höher ist als bei diesen anderen Browsern. Wenn Ihre Website speziell mobil ausgerichtet ist, wette ich, dass diese Zahl viel höher ist.
Es ist wahrscheinlich, dass das Fallback ohne Box-Schatten keine große Sache ist, aber ich habe eine Situation gesehen, in der es wichtig war, also nun ja.
Selbst wenn Sie die Präfixe hinzufügen müssen, können Sie SASS verwenden, um ein Mixin zu erstellen, sodass Sie nur eine Zeile anstelle von 4 für jeden Browser schreiben müssen, wann immer Sie es brauchen :)
Das könnte ein Problem sein, wenn Sie einen großen Codeblock für eine komplizierte Website haben. Wenn Sie viele Präfixe verwenden, könnten Sie diese potenziell um 75 % reduzieren, indem Sie nur die grundlegende Version verwenden, wenn nicht sogar mehr. Egal ob SASS oder nicht, je nach Code könnten Sie die Dateigröße erheblich reduzieren, indem Sie einfach die Standardversion verwenden und keine Vendor-Präfixe.
Ich denke, das eigentliche Problem hier ist, wenn Sie es für Dinge verwenden, die für die Zugänglichkeit oder wichtige Designaspekte relevant sind. Wie Chris sagte, ist border-radius bei einem Container – kein großes Problem, wenn man ihn verliert. Border-radius bei einem runden Button als Teil eines runden Website-Motivs in seinem Design… ein viel größeres Problem.
Ich benutze diese Präfixe schon seit Mitte letzten Jahres nicht mehr!
Ich habe mich in letzter Zeit gefragt, insbesondere weil Compass
-moz-und-webkit-in Ihr Stylesheet einfügt, aber Bourbon beides nicht.Danke für diesen Artikel.
Ich würde sagen, dass die Verwendung von browserbezogenen Präfixen von Anfang an eine schlechte Idee war. Ich kann zustimmen, dass ein -experimental- oder -beta-Präfix dem Coder mitteilt, dass das Endergebnis variieren kann, aber alles von Browser zu Browser umzuschreiben ist seltsam und unnötig.
Ich erinnere mich an eine Sache, bei der es einen großen Unterschied in der Implementierung gab. Farbverläufe wurden in ihrer frühen Phase browserübergreifend unterschiedlich definiert, daher hatten unterschiedliche Präfixe meiner Meinung nach Sinn. Obwohl die Implementierung in jedem Browser jetzt gleich sein sollte, da wir aus diesem Fehler gelernt haben. Es sollte einfach der Spezifikation folgen und das war's.
Daher sollte ein -experimental-Präfix ausreichen. Nur um darauf hinzuweisen, dass sich die Spezifikation in Zukunft ändern könnte. (Nicht die Implementierung!)
Ich bin ein großer Fan von prefix-free. Ermöglicht es Ihnen, ohne Präfixe zu codieren und kümmert sich um einige dieser älteren Browser mit Randfällen. So erhalten Sie ein gewisses Maß an Fallback und kleinere CSS-Dateien.
Seit mehr als einem Jahr verwende ich persönlich keine Vendor-Präfixe mehr für
box-shadowundborder-radius.Und tatsächlich denke ich diese Woche darüber nach, auch die Vendor-Präfixe für
linear-gradientzu streichen.Die Mixins von SASS sind natürlich eine riesige Hilfe, und ein paar zusätzliche Zeilen CSS-Code in meiner Datei haben einen mikroskopischen Performance-Impact, sodass es sich nicht lohnt, sich darum zu kümmern.
Bei css3please.com listen sie
background-clipzusammen mitborder-radiusauf, um zu verhindern, dass „Hintergrundfarbe außerhalb des Rahmens ausläuft“. Beziehen Sie das mit ein?Laut caniuse.com und Chris' Logik scheint es, als müssten wir
background-clipnormalerweise auch nicht präfixieren. Klingt das richtig?Entschuldigung. Hier ist der korrigierte Link für
background-clipauf caniuse.com.Ich würde sagen, es hängt weniger von den Browserstatistiken der Betrachter ab als davon, ob es Ihnen etwas ausmacht, dass abgerundete Ecken und Schatten auf Ihren Websites für einige Benutzer nicht angezeigt werden.
Wenn Ihr Design ohne sie auskommt, dann verwenden Sie keine Präfixe.
Ich verwende heutzutage fast nur noch Präfixe für Hintergrundverläufe und Übergänge. Alles andere überlasse ich dem Standard.
Ich präfixiere immer, nur um sicherzugehen, dass es in allen, wenn nicht den meisten Versionen eines Browsers funktioniert. Ich denke, das W3C sollte etwas tun, um Vendor-Präfixe abzuschaffen, sie sind einfach ärgerlich.
Wenn ich eine Präfixierung brauche, benutze ich einfach dieses Sass-Mixin
Präfixe sind gut für neue Features ... aber sobald sie stabil sind, können sie weggelassen werden. Es hängt davon ab, wie wachsam man bei alten Browsern sein möchte. Wir können ziemlich sicher davon ausgehen, dass jeder heutzutage den neuesten Chrome, Firefox, Safari und mindestens IE8 hat.
Nicht wirklich. Es gibt immer noch viele mobile Geräte, die ältere Betriebssystemversionen ausführen (wie Android 2.3.x usw.) mit ihrem Standard-Webbrowser, der nie aktualisiert wird.
Ich benutze -prefix-free, das alles abdeckt, und ich muss mich auch nicht darum kümmern. Ich kann es sehr empfehlen!
Ich sehe keinen Grund für ein Präfix, sondern eher für eine Marketingstrategie eines Herstellers. Es sollte vollständig entfernt und vom W3C verboten werden. Der Code wird zu lang.
Der Grund für das Präfix ist einfach: Es ermöglicht Browsern, zukunftsweisende Funktionen zu veröffentlichen, die noch kein Standard sind. Ich denke, Präfixe sind in Ordnung und sollten für neue Funktionen verwendet werden. Man muss nur alle paar Jahre etwas aufräumen, um sie loszuwerden. Ohne Präfixe könnten Sie nur einen Browser unterstützen. Nicht viele, bis es einen klaren Standard gab.
@chovy, das Problem ist, dass es Standards und Zeitpläne für die Implementierung dieser Standards gibt und diese wirklich von den Browserherstellern befolgt werden sollten, damit der gesamte Prozess optimiert werden kann.
Man sollte bedenken, dass
box-shadowauf Mobilgeräten Leistungseinbußen haben kann.Es kann die Benutzererfahrung verbessern, wenn
box-shadownur auf der Desktop-Version einer Website verwendet wird, daher sind Vendor-Präfixe weitgehend unnötig.Wie sieht es mit linearen Farbverläufen aus? Brauchen wir jetzt wirklich Präfixe?
Ja, das würde ich gerne wissen. Ich habe so viele Zeilen, die ich gerne streichen würde. Ich wünschte nur, IE9 bräuchte nicht diesen hässlichen Filter…
Das ist ein guter Artikel. Ich habe gerade die Präfixe entfernt und auch CSS PIE für ein Projekt, an dem ich gerade arbeite, entfernt. Es ist zu 100 % für Desktops und wir haben 90 % unserer Benutzer in IE9.
„Zweitens sollten Sie Entscheidungen über Funktionsunterstützung nur basierend auf Statistiken Ihrer eigenen Website und nichts anderem treffen.“
Ich stimme dem zu etwa 90% zu, und das gilt sicherlich für etwas so Triviales wie border-radius oder box-shadow. Aber es ist zu einfach, sich die Statistiken anzusehen und zu denken, man müsse sich nur um diese Browser kümmern. Aber was Sie aus diesen Statistiken nicht gewinnen, sind die Besucher, die Sie haben könnten, aber derzeit nicht haben, weil Ihre Website für sie nicht ausreichend funktioniert.
Ich denke, das gilt besonders für mobile Geräte. Zum Beispiel habe ich ein paar wirklich alte Websites, die absolut schrecklich und kaum nutzbar auf Mobilgeräten sind. Es ist kein Wunder, dass diese sehr wenige mobile Besucher haben. Wenn ich mein Urteil nur auf meinen Besucherstatistiken basieren würde, würde ich zu dem Schluss kommen, dass ich mich nicht um die Unterstützung kleiner Bildschirme kümmern müsste, da nur ein winziger Prozentsatz meiner Besucher in diese Kategorie fällt. Das wäre ein Fehler.
Also, ja, basieren Sie sich auf Statistiken, aber nur mit Bedacht und dem Bewusstsein, dass Statistiken nicht das ganze Bild sind.
Ich verwende den -webkit- border-radius-Präfix, da er für frühere Versionen von Android und iOS erforderlich ist, aber nicht den Firefox-Präfix, da die Nutzer von Firefox 3.6 weniger als 0,001% unseres Webverkehrs ausmachen.
CS3please.com ist ein guter Leitfaden dafür, ob Sie Präfixe einschließen sollten oder nicht
http://css3please.com/
Wenn Sie tatsächlich für einen Kunden/ein Unternehmen arbeiten. Ich würde empfehlen, die präfixierten Versionen zusammen mit den nicht-präfixierten zu verwenden, um die Inkompatibilität zu verringern, da einige Unternehmen bei der Aktualisierung ihrer Umgebungen etwas faul sind.
Ich benutze sie weiterhin, bis die zuvor genannten Browserversionen zu Dinosauriern werden. Obwohl die „Größe“ der CSS-Datei ein Problem „sein könnte“, ist sie eher ein Nicht-Thema im Vergleich zur „Größe“, die man spart, indem man tatsächlich CSS3 für das Styling verwendet anstelle von PNG-Dateien, die in einem komplexen Design ziemlich aufgebläht werden können. So oder so, ich freue mich auf ein präfixfreies Web! (oder zumindest für die Elemente, die nicht mehr „experimentell“ sind).
prefizr.com automatisiert dies für Sie. Und für alle Sublime-Benutzer gibt es ein praktisches Plugin, das darauf basiert.
Ich benutze dieses http://leaverou.github.com/prefixfree/
Ich habe Präfixe aus meinen CSS-Dateien in Projekten ohne Mobilgeräte weggelassen. In anderen Fällen verwende ich nur
-webkit, um (zu versuchen) alle mobilen Webkit-basierten Browser zu erreichen.