Layout nochmal zurückgestellt

Gab einige Beschwerden, und ich glaube, ich weiß, woran es lag. Aber ich komme frühestens heute abend dazu, das zu reparieren, deshalb temporär nochmal das alte Layout.

In den vielen schönen Dokus, Specs und Anleitungen zum schönen neuen HTML5 und CSS3 wird das Flex-Layout immer so als das schöne neue Super-Layout beschrieben.

Das ist auch nicht ganz falsch, denn es ist wirklich gut.

Dummerweise ist der neue Standard aber nicht so verbreitet, wie die tun, und dummerweise stellen sie da nur die standardisierte Form dar.

Dummerweise ist es nämlich so, dass da jeder Browser-Hersteller erst mal seine eigene Suppe kocht, und sie sich dann auf was gemeinsames einigen. Weshalb man viele der neueren CSS-Eigenschaften mehrfach mit verschiedenen Tags und Syntaxvarianten hinschreiben muss. Schatten und Rundungen für Boxen musste ich auch gleich fünfmal reinschreiben.

Dummerweise steht in den offiziellen Dokumentationen nichts davon.

Ich habe es zwar gemerkt, weil ich kurz vor Veröffentlichung des neuen Layouts natürlich auch alle meine Handys und Tablets getestet habe, und deshalb auch beim Flex-Layout eine ganze Reihe proprietärer Syntax-Varianten mit reingenommen habe, aber es waren eben nicht genug. Ich habe noch ein paar Hinweise gefunden, die ich noch aufnehmen muss.

Allerdings scheine ich da noch in ein generelles Problem zu laufen. Bisher hatte ich das Seitenmenü im HTML-Text oberhalb des Haupttextes und per float an die rechte Seite gepackt, was eindeutig ist, weil “right” dann schon bei allen Browsern “rechts” meint, soweit sind sie sich dann doch einig.

Bei Flex ist das aber etwas anders. Da habe ich die Menü-Spalte auch im HTML-Text vor dem Haupttext angegeben, und dazu vorgegeben, dass das Flex-Menü die Spalten von rechts nach links aufbaut. Das ist notwendig, weil Flex dann, wenn die Breite nicht reicht, die Spalten übereinander darstellt, und das Menü dann oberhalb des Textes erscheinen soll. Ich wollte ganz bewusst keine JavaScript-Turnereien drin haben, sondern gerades, standardkonformes Layout.

Dummerweise verstehen das nicht alle Browser, und manche bauen die Spalten dann von links nach rechts auf, und packen damit den Text rechts neben das Menü statt links. Würde ich die Reihenfolge aber vertauschen, also das Menü erst nach dem Haupttext bringen, damit auch die doofen Browser von links nach rechts aufbauen können, dann würden die ganz doofen Browser und die mit kleinem Bildschirm das Menü womöglich unter den Text packen.

Bei Float zu bleiben ist aber auch nichts, weil das auch auf vielen kleinen Geräten und Smartphones nicht gut lesbar war, nicht „barrierefrei” ist, einen im Suchindex von Google & Co. massiv abwertet, und eben das Problem mit sich bringt, dass man das Design nicht im CSS kapseln kann, sondern auch im HTML Design-Elemente unterbringen muss, was unschön und unsauber ist. Die Idee ist ja gerade die strikte Trennung von Inhalt und Design.

Was ich daran jetzt wirklich dumm finde:

Google & Co. verlangen ja gerade deshalb die neuen Strukturelemente und saubere Trennung (was ich grundsätzlich ja gut finde), damit die Seiten auch auf mobile devices gut lesbar sind.

Alle Probleme, die mir gemeldet wurden, kamen aber von mobile devices, ausgerechnet die kommen damit nicht klar, weil es da eben mit der Aktualisierung der Software klemmt und die uralt unterwegs sind. Also den Zweck des Prinzips konterkarieren.

(Und das kostet einen auch alles wieder soviel Zeit…)

Schöne neue Technik-Welt.