Altes Flexbox-Modell zu neuen Flexbox-Syntaxäquivalenten

Question

Ich beobachte eine Reihe von HTML5-Tutorials, in denen die Person versucht, Flexbox zu unterrichten, aber das Tutorial ist ziemlich alt und er verwendet Dinge wie display: -webkit-box; und webkit-box-pack:center; Ich gehe davon aus, dass weil Einige Browser haben es damals nicht unterstützt. Allerdings habe ich auch gelesen, dass diese Syntax jetzt veraltet ist und Sites wie MDN Warnungen darüber haben, aber sie bieten keine Links zur neuen Syntax, um dasselbe zu tun. Leider bin ich nicht in der Lage, eine Website zu finden, die den alten Weg und die neue Art der Dinge zeigt, also frage ich mich, ob mir jemand dabei helfen kann, nützliche Ressourcen verlinken oder mir vielleicht erklären kann, wie ich die Entsprechungen finden kann die alte Syntax in Sites wie MDN.

Dank

Answer 1

In solchen Fällen, soweit ich weiß, ist Google die beste und einzige Freundin. Zum Beispiel hat es mich zu shouldiprefix.com, die zwar ein wenig veraltet, manchmal zeigt in die richtige Richtung. In a case of flexbox, bezieht sich auf eine css-tricks.com article, die einen Abschnitt namens "Beispiele für veraltete Sachen" hat. Dort können Sie in der Tat einige Tutorials der alten Syntax sehen.

Es ist nicht einfach, Seiten zu finden, die alle Unterschiede zwischen der alten und der neuen Syntax erklären. Die Frage ist - brauchst du das wirklich? Die Websites, die von Tausenden von Menschen wie css-tricks.com (article about flexbox) oder w3schools.com (their flexbox reference) verwendet werden, lehren nur die neue Syntax und werden oft aktualisiert. Es ist nicht so, dass du oft eine alte Syntax brauchst.

Tun Sie sich auch einen Gefallen und machen Sie sich keine Sorgen über Anbieter-Präfixe. Verwenden Sie Autoprefixer wie z. grunt-postcss (hier ist ein nice tutorial - siehe "IV. Grunt Setup" Schritt).