Wie können Lieferantenpräfixe für Flexbox bestellt werden?

Der RubWie können Lieferantenpräfixe für Flexbox bestellt werden?

CSS Tricks sagt, dass die Reihenfolge der display Verkäufer Präfixe für Flexbox wichtig ist, und zeigt eine Anordnung (-webkit-box, -moz-box, -ms-flexbox, -webkit-flex, flex)
MDN eine andere Reihenfolge zeigt als CSS Tricks und Swaps -moz-box für -moz-flex (-webkit-box, -webkit-flex, -moz-flex, -ms-flexbox, flex)
Bourbon zeigt noch eine andere Reihenfolge und bringt in box, die die beiden anderen Seiten erwähnt nicht einmal (-webkit-box, -moz-box, box, -webkit-flex, -moz-flex, -ms-flexbox, flex)

Die Fragen

Ist die Reihenfolge wirklich wichtig?
Was ist der richtige Weg, dies zu tun?

2016-03-25 Hoagy Carmichael

Solange die W3C-Version (die offizielle Eigenschaft) als letzte kommt, gibt es keinen Unterschied.

Die CSS-Rendering-Engine wählt immer die letzte zutreffende Eigenschaft aus. Daher möchten Sie beispielsweise nicht, dass Chrome flex überspringt und -webkit-flex auswählt, wenn flex tatsächlich unterstützt wird.

Sie sehen Variationen in der Reihenfolge der Herstellerpräfixe in CSS-Tricks, MDN und Bourbon, da die Reihenfolge keine Rolle spielt. Beachten Sie, was sie alle gemeinsam haben: flex ist zuletzt.

Hier sind einige weitere Details:

Quelle

2016-03-25 18:04:57

Wenn es wichtig ist, dass die offizielle Version als letzte kommt, würde ich auch annehmen, dass es wichtig ist, dass die Hersteller-Präfix-Versionen in chronologischer Reihenfolge ihrer selbst sind. Zum Beispiel, solange "-webkit-box" vor "-webkit-flex" steht und (unabhängig) "-moz-box" vor "-moz-flex" steht. Ist das korrekt? –

Wie in den Beispielen in Ihrer Frage dargestellt, ist die Reihenfolge der Lieferantenpräfixe nicht signifikant. Machen Sie es sich leicht, verwenden Sie dieses Tool: [** autoprefixer **] (https://autoprefixer.github.io/). –

Ich bin mir des Tools bewusst, aber ich denke, Sie haben mich falsch verstanden. Ich glaube, dass die Reihenfolge in einem Fall wie diesem erheblich sein wird: Wenn Ihr Browser '-prefix-box' und' -prefix-flexbox' versteht, aber nicht '-prefix-flex' oder' flex', wenn Sie '_ prefix-flexbox' vor '-prefix-box', du wirst' -prefix-box'-Verhalten bekommen (oder so gehe ich davon aus). Daher ist die Reihenfolge (unabhängig von den anderen Anbietern) von Bedeutung. –

Meistens ist die Reihenfolge der Anbieter Präfixe sind nicht so wichtig, aber sicher sein, dass Sie die meisten verwenden Standardisierte Version, indem Sie am Ende die ohne Präfix (nur flex) hinzufügen. Das CSS priorisiert immer das letzte, wenn die Eigenschaften gleich sind.

Wie auch immer, der Flex ohne Präfix wird jetzt von den gängigsten Browsern unterstützt: http://caniuse.com/#feat=flexbox. 96% der Browser können flexbox verwenden, und 82% von ihnen unterstützen flex ohne Präfix.

Quelle

2016-03-25 18:05:15 NiklasMH

Haben Sie Gründe dafür, dass die eine, die nicht vom Verkäufer qualifiziert ist ("flex" in diesem Fall), die letzte Eigenschaft ist? Ich habe es immer und immer wieder plappern gesehen, um es zuletzt zu sagen, aber ich habe nie irgendwelche Überlegungen gesehen, die nicht oberflächlich waren. –

Gute Frage. Ich bin kein Experte hinter den Kulissen, aber es scheint "natürlicher" zu sein, die Immobilie zu platzieren - die alle am Ende als letzte nutzen werden. Aber das ist mein Wissen, es könnte einen anderen Grund geben, warum es empfohlen wird. Vielleicht wird das Vendor-Präfix später nicht gleich behoben - wenn Sie dann die frühere Version verwenden, erhalten Sie das globale Update (?) Nicht. Normalerweise sollte das Globale stabil sein, aber es war nur ein Gedanke. – NiklasMH

Ich füge eine neue richtige Antwort hinzu. Weil es macht Angelegenheit, vor allem für Flexbox. Und die letzten zwei Beispiele, auf die Sie hingewiesen haben, sind nicht auf dem neuesten Stand der heutigen Syntax und müssen verworfen werden.

Wie Niklas sagte, Sie wollen immer die offizielle W3C Standard-Eigenschaft ohne Präfix zuletzt. Die Schlussfolgerung ist, dass CSS alle Regeln nacheinander analysiert.Die letzte Regel derselben (oder ähnlichen) Eigenschaft hat immer Vorrang vor einer vorherigen. Der Fall von flexbox ist jedoch wegen der 3 verschiedenen Arten von Regeln und Spezifikationen eigenartig.

Ignorieren Sie zuerst die angegebenen MDN- und Bourbon-Regelsätze, die nicht auf dem neuesten Stand sind.

Die Regel display: -moz-flex; aus dem MDN Beispiel ist leider falsch. Firefox hat es (und tut es) nicht offiziell unterstützt. Firefox unterstützt offiziell nur -moz-box oder flex. Ich werde den Artikel für Korrekturen mit der -moz-box Substitution bearbeitet haben. Die box Referenz von Bourbon ist nicht mehr genau. Du brauchst es nicht. Der Grund dafür, dass einige Demos es enthalten, ist, dass die offizielle "flexbox" Standard-Property zu der Zeit (2009) box wurde. flex war an dem Punkt nicht vorhanden. Die flex Syntax kam als endgültige Empfehlung später im Jahr 2013.

Und zwischen IE10 implementiert die -ms-flexbox Zwischenprodukt 2011-2012 draft spec.

Es ist also wichtig, dass Flex-Regel-Sets zuerst ältere Eigenschaften in der korrekt angegebenen CSS-Trick-Reihenfolge deklarieren. Sie finden den Regelsatz here, with additional explanations on full browser support.

Die zwei Regeln, die in beide Richtungen ohne viel Effekt getauscht werden konnten, sind -webkit-box und -moz-box.

Beachten Sie, dass Firefox und Edge mussten Alias ältere Eigenschaften oder die Webkit vordefinierten Regeln, um zu versuchen und zu lösen verschiedene bugs occuring due to inaccurate order und/oder fehlende Eigenschaften da draußen im Web.

Also in diesem Sinne ist die Verwendung der vollen current flexbox rule set sehr wichtig.

Quelle

2016-05-19 09:19:32 hexalys

Wie können Lieferantenpräfixe für Flexbox bestellt werden?

Antwort

Verwandte Themen