Vermeiden von column breaks

[Rolf B]

Hallo alle,

Vor zwei Jahren schrieb Rachel Andrews über CSS Fragmentierung, und sagte, dass die CSS Eigenschaften break-before:avoid und break-after:avoid von den Browsern schlecht bis gar nicht unterstützt werden.

Ich bastele im Moment an einem Konzept für Wiki-Vorlagen, wo ich das brauchen würde, und es scheitert nach wie vor jämmerlich. Ich möchte die diversen Tutorial-Einleitungen, die einen Überblick über die Inhalte geben, mit einer Vorlage steuern.

Kontrollfrage: Ist es mit der Fragmentierung tatsächlich immer noch so schlimm? Oder mache ich etwas falsch?

jsFiddle: https://jsfiddle.net/Rolf_b/t5m10awr/ - der obere Teil.

Im unteren Teil habe ich das semantische Markup in die Tonne gehauen und einfach Breaks verwendet. Eine Präsentation mit Listenpunkten könnte man noch ergänzen. Dadurch, dass ich jetzt normalen Text als Inhalt habe, kann ich die CSS-Eigenschaften orphans und widows verwenden (Hurenkinder und Schusterjungen). Damit ist zumindest in Chromia meine Absicht erreichbar, Abschnittsüberschriften und Listenpunkte beisammenzuhalten, bzw. nicht einzelne Listenpunkte am Ende überhängen zu haben, und trotzdem responsiven Spaltensatz zu ermöglichen. Dem Fuchs sind die Widows und Orphans aber leider egal.

Richtig gut ist es aber auch in Chromia nicht, weil gelegentlich ein "padding-bottom" oder "margin-bottm" auf die Folgespalte umgebrochen wird.

Ich frage mich nur: Ist der Verzicht auf die Semantik akzeptabel? Oder würde das Wiki damit ein unakzeptables Beispiel geben?

Und gibt es eine bessere Lösung? Gibt es einen "Polyfill" auf JS Basis? Nicht, dass ich das toll fände...

Rolf