Was ist der Grund, Präfixe in neue CSS-Funktionen einzufügen?

Gibt es einen gültigen Grund für die Browser, neue CSS-Funktionen vorangestellt zu haben, anstatt die Webmaster die nicht vorangestellte Version verwenden zu lassen?

Zum Beispiel kann ein Beispielcode für die Hintergrundgradienten aussehen:

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

Was bringt es, Webmaster zu zwingen, denselben Code viermal zu kopieren und einzufügen, um dasselbe Ergebnis zu erzielen?

Hinweis: Einer der häufig genannten Gründe ist, dass vorangestellte Stile nur vorübergehend sein sollen, während entweder der Browser die Spezifikation nicht korrekt implementiert oder die Spezifikation nicht endgültig ist .

IMO, dieser Grund ist ein Unsinn:

• Wenn die Browser-Engine die Spezifikation nicht korrekt implementiert, ist der Browser nicht kompatibel, unabhängig davon, ob er sie nicht in einer nicht vorangestellten Form oder nicht in einer vorangestellten Form implementiert.
• Wenn die Spezifikation nicht endgültig ist, kann es wichtig sein, wann es frühere Implementierungen mit demselben Namen gab. Wenn beispielsweise CSS2 dies getan hätte linear-gradient, CSS3 jedoch um linear-gradientzusätzliche Funktionen erweitert werden sollte, wäre es klug, der neuen Entwurfsimplementierung vorübergehend ein Präfix voranzustellen, indem -css3-<style>zwischen der funktionierenden CSS2- Implementierung und der experimentellen CSS3- Implementierung unterschieden wird. In der Praxis hat CSS2 keine linear-gradientoder andere CSS3-Neuheiten.

Ich würde auch verstehen, wenn verschiedene Browser unterschiedliche Implementierungsformate hätten : Nehmen wir zum Beispiel an, Firefox ist für <weight-of-shadow distance-x distance-y color>Textschatten erforderlich, während Chrome erforderlich ist <distance-x distance-y weight-of-shadow color>. Dies ist jedoch nicht der Fall. Zumindest alle neuen Funktionen von CSS3, die ich bisher verwendet habe, hatten das gleiche Format.

Nach diesem W3C-Hinweis :

Um Konflikte mit zukünftigen CSS-Funktionen zu vermeiden, reserviert die CSS2.1-Spezifikation eine vorangestellte Syntax für proprietäre und experimentelle Erweiterungen von CSS.

Bevor eine Spezifikation die Phase der Kandidatenempfehlung im W3C-Prozess erreicht, werden alle Implementierungen einer CSS-Funktion als experimentell betrachtet. Die CSS-Arbeitsgruppe empfiehlt, dass Implementierungen für solche Funktionen eine vom Hersteller vorangestellte Syntax verwenden, einschließlich derjenigen in W3C-Arbeitsentwürfen. Dies vermeidet Inkompatibilitäten mit zukünftigen Änderungen im Entwurf.

Hier und hier können Sie den Status des CSS verfolgen .

Ich würde auch verstehen, wenn verschiedene Browser unterschiedliche Implementierungsformate hätten ... [b] aber tatsächlich ist dies nicht der Fall; Zumindest alle neuen Funktionen von CSS3, die ich bisher verwendet habe, hatten das gleiche Format.

Dies sagt mir, dass Sie dieses Spiel nicht lange genug gespielt haben.

Das Problem ist, dass Webbrowser niemals neue Funktionen auf die gleiche Weise implementieren. Es ist üblich, dass ein Browser Funktionen implementiert, die nicht standardisiert wurden, und das Ergebnis ist, dass bei verschiedenen Browsern alles unterschiedlich funktioniert.

Darüber hinaus sind neue Funktionen häufig fehlerhaft (wir vermeiden es, den IE beim Namen aufzurufen), und obwohl die Syntax für verschiedene Elemente gleich ist, ist das Ergebnis unterschiedlich.

Dies bereitet Entwicklern, die neue Funktionen verwenden möchten, Kopfschmerzen. Nachdem sie ihr Stylesheet fertig geschrieben haben, stellen sie schnell fest, dass es aus unerklärlichen Gründen in verschiedenen Browsern unterschiedlich gerendert wird.

Bevor Präfixe hinzukamen, mussten sich Entwickler auf erkennbare Unterschiede zwischen Browsern verlassen, häufig indem sie Fehler im CSS-Parser ausnutzten. Dies führte zu Greueln wie diesen:

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

Diese Art von Hacks war das Ergebnis des Versuchs eines Entwicklers, sein Stylesheet für jeden Browser anzupassen, wobei er jede Art von ausgefallenen Methoden verwendete, die er finden konnte.

Durch die Standardisierung von Präfixen können Entwickler Funktionen verwenden, die in verschiedenen Browsern nicht stabil sind. Die Präfixe -moz-und -webkit-machen deutlich, dass der Autor versucht, einen Stil bereitzustellen, der nur in bestimmten Webbrowsern angewendet werden sollte.

Sobald die Funktionen stabil sind und die Browser sich gleich verhalten, können Sie das Präfix entfernen und die Funktion einmal deklarieren.

Ich denke, es ist wichtig zu wissen, dass Präfixe NICHT bedeuten, dass Sie Stile für jeden Browser einmal deklarieren müssen. Präfixe bedeuten, dass jedes Mal, wenn Sie feststellen, dass ein Webbrowser nicht einem Standard entspricht, zusätzliche Stile deklariert werden müssen. Anstelle Ihres obigen Codes sollten Sie beispielsweise beginnen mit:

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Wenn Sie plötzlich feststellen, dass Microsoft einen linearen Verlauf nicht korrekt berechnen kann, können Sie ein Präfix hinzufügen, um das Problem im IE zu beheben:

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Plötzlich sieht Ihre Seite in jedem Browser gleich aus, obwohl einer von ihnen die Dinge anders gemacht hat.

Sie werden feststellen, dass dies in diesem Artikel auf A List Apart auf sehr umfassende Weise behandelt wurde .

Wenn die Browser-Engine die Spezifikation nicht korrekt implementiert, ist der Browser nicht kompatibel, unabhängig davon, ob er sie nicht in einer nicht vorangestellten Form oder nicht in einer vorangestellten Form implementiert.

Der Unterschied besteht darin , dass der Browser nicht Kompatibilität brechen wird , wenn es nicht konform ist. Wenn sich das Verhalten des Browsers von der Spezifikation unterscheidet, wird der alte Code beim Ändern nicht beschädigt, da er unter einem neuen Namen aufgeführt ist.