In unserem vorigen Blogbeitrag zum Thema Flexbox haben wir bereits die Vorteile des neuen Layout Moduls erläutert. Nach einem ersten Test in der Praxis haben wir jedoch festgestellt, dass es noch viele Dinge zu beachten gibt, um Flexbox sinnvoll einzusetzen.

1. Alte Syntax vs. neue Syntax

Flexbox hat sich in den letzten Jahren stark verändert. Derzeit existieren zwei unterschiedliche Spezifikationen.

Alte Syntax

Die alte Syntax stammt aus dem Jahr 2009 und genießt recht hohen Browsersupport. Alte Webkit-Browser und Firefox unterstützen diese Syntax. Man erkennt diese Version ganz leicht an der Anweisung display: box; oder an Eigenschaften, die mit box- beginnen.

Spezialfall IE10

IE10 unterstützt eine Hybridversion von Flexbox, die eine Mischung aus alter und neuer Syntax ist und aus dem Jahr 2011 stammt. Man erkennt sie an der Anweisung display: flexbox;.

Neue Syntax

Die neue Syntax wurde nach 2011 entwickelt und ist die aktuelle Spezifikation des W3C. Diese wird mit display: flex; definiert, sowie mit allen Eigenschaften, die mit flex- beginnen. Folgende Browser unterstützen diese Version: Chrome 21+, Opera (& Opera Mobile) 12.1+, und Blackberry 10+.

2. Browserprefixe

Zusätzlich zu den Spezifikationsunterschieden müssen auch die verschiedenen Prefixe für Browser beachtet werden:

• -webkit-
• -moz- (für Firefox auf Android)
• -ms-(für IE10)

3. Unterschiede in der Syntax