Ordering CSS3 Properties

Beim Schreiben von CSS3-Eigenschaften ist die moderne Weisheit, die „echte“ Eigenschaft zuletzt und die Vendor-Präfixe zuerst aufzulisten.

.not-a-square {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Warum wird diese Methode der Eigenschaftsreihenfolge so häufig gelehrt? Hier sieht es aus, wenn man es „falsch“ macht:

.not-a-square {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Selbst wenn man es „falsch“ macht, sind die Abrundungen der Ecken nicht immer gleich, egal was passiert? Eine schnelle Untersuchung könnte Sie zu dem Schluss führen, dass dies der Fall ist, und diese Reihenfolge der Eigenschaften ist eher Unsinn.

1. Die ferne Vergangenheit: Keine der Eigenschaften wird unterstützt, die Reihenfolge spielt keine Rolle.
2. Die Vergangenheit: Nur Vendor-Präfixe werden unterstützt, die Reihenfolge spielt keine Rolle.
3. Die Gegenwart: Sowohl Vendor-Präfixe als auch die tatsächliche Eigenschaft werden unterstützt. Wenn das Präfix zuletzt steht, überschreibt es die tatsächliche Eigenschaft, aber beide sind sowieso gleich.
4. Die Zukunft: Nur die tatsächliche Eigenschaft wird unterstützt, die Reihenfolge spielt keine Rolle.

Hier ist eine einfache Tabelle, die dieses Konzept veranschaulicht.

Woah there, Cowboy

Tatsache ist, dass die Reihenfolge von CSS3-Eigenschaften wichtig ist, und das Obige ist grundlegend fehlerhaft. „Die Gegenwart“ ist genau das Problem. Wir befinden uns an einem entscheidenden Punkt in der Browsergeschichte, an dem einige Browser sowohl die mit Vendor-Präfix versehene Version als auch die tatsächliche CSS3-Eigenschaft unterstützen. Derzeit ist es speziell WebKit, das dies tut, und die Art und Weise, wie sie es implementiert haben, ist, dass, wenn Sie das Vendor-Präfix nach der tatsächlichen Eigenschaft auflisten, das Vendor-Präfix überschrieben wird und die gerenderte Eigenschaft ist.

Warum ist das wichtig? Im einfachen border-radius-Beispiel oben sind die Ecken dieses Elements unabhängig von der Reihenfolge 10 Pixel abgerundet. Es gibt keinen Unterschied, wie das Vendor-Präfix und die „echte“ Eigenschaft abgerundete Ecken handhaben, *wenn Sie nur einen Wert festlegen*. **Das Problem ist, dass es *einen* Unterschied zwischen den Implementierungen der Eigenschaften gibt, wenn mehr als ein Wert übergeben wird.**

.not-a-square {
   /* These do totally different things */
   border-radius: 30px 10px; 
   -webkit-border-radius: 30px 10px;
}

Die Spezifikation oder die „echte“ Version rendert die oberen linken und unteren rechten Ecken mit 30 Pixeln und die oberen rechten und unteren linken Ecken mit 10 Pixeln. Das Vendor-Präfix rendert alle vier Ecken mit elliptischen Ecken von 30 Pixel Breite und 10 Pixel Höhe.

Wenn Sie also blind die echte border-radius am Ende Ihrer Eigenschaftslisten mit identischen Werten aufgenommen haben und dann von Safari 4 auf Safari 5 wechseln, würden Sie eine dramatische Veränderung der Art und Weise feststellen, wie der obige Code Ihre Boxen gestaltet.

Sie könnten dies beheben, indem Sie die Werte anpassen, um sicherzustellen, dass sie dasselbe tun... aber wenn Sie etwas anpassen, könnten Sie genauso gut die echte Eigenschaft anpassen, da dies die unterstützte Version in der Zukunft sein wird. Die echte Eigenschaft zuletzt aufzulisten ist definitiv der richtige Weg. Da sie vollständig auf der Spezifikation basiert, wird sie mit anderen Browser-Implementierungen übereinstimmen und die einzige unterstützte Version sein, wenn die Zeit vergeht und Vendor-Präfixe entfernt werden.

Border-Radius ist hier keine Ausnahme. Beachten Sie die dramatisch unterschiedlichen Syntaxes für background-image-Verläufe. Derzeit gibt es noch keine „echte“ Spezifikationsversion für diese Werte, aber wenn es sie gibt, wird die Implementierung anders sein als die, die wir jetzt verwenden. Diese sollte zuletzt in der Reihenfolge der Eigenschaften aufgeführt werden, um dies ebenfalls zukunftssicher zu machen.

Vielen Dank an @mattwiebe und @snookca, die mir geholfen haben, das besser zu verstehen.