Firefox und CSS Flexbox

[Gunther]

Hallo werte Selfgemeinde!

Folgendes Problem:
Die Mozilla Entwickler sind ja ganz schlau! Da haben sie das CSS Flexbox Modul seit der Version 19 von Firefox ohne Hersteller Präfix integriert, es aber standardmäßig, also per Default, in den Einstellungen deaktiviert (layout.css.flexbox.enabled = false).

Das Problem, welches ich jetzt sehe/ habe ist, dass aufgrund des Bugs in der bisherigen Implementierung (alte Syntax), der keine Prozentangaben für Flexbox-Elemente zulässt, für den Firefox immer eine "Extrawurst" im CSS von Nöten ist. Dies war bisher eben auch kein Problem, da man sich bspw. per
@media only screen and (min--moz-device-pixel-ratio: 0.1) {...}
oder
@-moz-document url-prefix() {...}
behelfen konnte.

Wenn jetzt aber ein User die Einstellung in about:config auf TRUE ändert, dann führt die bisher notwendige "Extrawurst" aber genau zum gegenteiligen Effekt, nämlich dazu, dass das Layout "nicht mehr wie gewünscht" aussieht (, bzw. komplett zerschossen ist)!

Ich habe keine Möglichkeit gefunden, wie man zwischen diesen unterschiedlichen Konfigurationseinstellungen unterscheiden kann (im CSS) - weder per CSS, noch per Javascript.
Dementsprechend "funktionieren" auch Detection-Skripte wie Modernizr & Co. nicht ...!

Kennt jemand von euch eine "Lösung" für das Problem?

Gruß Gunther

PS: Ich habe eh den Eindruck, dass der Firefox in seiner Entwicklung und Bug-Beseitigung immer weiter hinter alle anderen "gängigen" Browser zurückfällt - sehr bedauerlich (und aus Entwicklersicht sehr problematisch aufgrund des hohen Maktanteils).

[1UnitedPower]

Wenn jetzt aber ein User die Einstellung in about:config auf TRUE ändert, dann führt die bisher notwendige "Extrawurst" aber genau zum gegenteiligen Effekt, nämlich dazu, dass das Layout "nicht mehr wie gewünscht" aussieht (, bzw. komplett zerschossen ist)!

Das ist imho. nicht dein Problem. Wer experimentelle Einstellungen zulässt, der ist sich durchaus bewusst, dass das zu Fehlern führen kann und nimmt diese in Kauf.

[Gunther]

Hi!

Das ist imho. nicht dein Problem. Wer experimentelle Einstellungen zulässt, der ist sich durchaus bewusst, dass das zu Fehlern führen kann und nimmt diese in Kauf.

Da stimme ich dir prinzipiell zu, aber ...
... trotzdem halte ich "diesen Weg" der Mozilla Entwickler für "nicht ganz so ideal", um es mal vorsichtig auszudrücken. Und ich hoffe sehr, dass sie in Zukunft nicht auch bei anderen Features auf so eine Idee kommen!

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

... trotzdem halte ich "diesen Weg" der Mozilla Entwickler für "nicht ganz so ideal", um es mal vorsichtig auszudrücken. Und ich hoffe sehr, dass sie in Zukunft nicht auch bei anderen Features auf so eine Idee kommen!

Auch Blink (Chrome/Chromium/Opera(?)) geht diesen Weg – bei allen Features.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

... trotzdem halte ich "diesen Weg" der Mozilla Entwickler für "nicht ganz so ideal", um es mal vorsichtig auszudrücken. Und ich hoffe sehr, dass sie in Zukunft nicht auch bei anderen Features auf so eine Idee kommen!

Auch Blink (Chrome/Chromium/Opera(?)) geht diesen Weg – bei allen Features.

Ich glaube, hier haben wir uns missverstanden ... ;-)
Ich sprach nicht von "Vendor Prefixes" (die sind auch eine Seuche, aber egal), sondern davon, dass das Verhalten des Browsers von seiner Konfiguration beeinflusst wird, *ohne* dass man dies dann noch *ohne* Javascript entsprechend "steuern" kann.

Also wie hier in dem konkreten Fall:
Per Default ist 'layout.css.flexbox.enabled' = false, d.h. Firefox verwendet die alte Flexbox Syntax. Diese hat u.a. den Bug, dass man für die Box-Elemente keine Prozentwerte verwenden kann. Und ohne die Angabe einer "bestimmten" Breite funktioniert Flexbox dann nicht wie gewünscht.

Wenn ein User diese Einstellung aber nun aktiviert, und FF somit die neue Flexbox Syntax verwendet, führt genau diese vorher zwingend erforderliche Angabe einer Breite (mit einer anderen Einheit als Prozent) dazu, dass die neue Flexbox "nicht funktioniert".

Per CSS hast du aber bei ein und derselben Browserversion keine Chance, dies zu unterscheiden.

Einzig Mathias Tipp mit dem Javascript à la:
if(!!window.sidebar && typeof document.body.style.flex != 'undefined') alert("layout.css.flexbox.enabled = true");
schafft hier Abhilfe.

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Auch Blink (Chrome/Chromium/Opera(?)) geht diesen Weg – bei allen Features.

Ich glaube, hier haben wir uns missverstanden ... ;-)

Ich glaube, ich dich nicht. Du mich vielleicht? ;-)

A.a.O.: “Instead, we’ll expose a single setting (in about:flags) to enable experimental DOM/CSS features for you to see what's coming …”

Auch in Chrome liegt die Entscheidung, ob experimental features interpretiert werden oder nicht künftig beim Nutzer, nicht mehr beim Seitenautor.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Auch Blink (Chrome/Chromium/Opera(?)) geht diesen Weg – bei allen Features.

Ich glaube, hier haben wir uns missverstanden ... ;-)

Ich glaube, ich dich nicht. Du mich vielleicht? ;-)

Ups ..., ja - man sollte halt immer den ganzen (relevanten) Text lesen - sorry!

A.a.O.: “Instead, we’ll expose a single setting (in about:flags) to enable experimental DOM/CSS features for you to see what's coming …”

Auch in Chrome liegt die Entscheidung, ob experimental features interpretiert werden oder nicht künftig beim Nutzer, nicht mehr beim Seitenautor.

Na prima ...! Ich halte das wie gesagt nicht unbedingt für so eine gute Idee. Insbesondere eben dann nicht, wenn die Veränderung solcher "Features" Auswirkungen auf das Rendering hat. Denn dann ist man mit reinem CSS am Ende.

Somit aus jeder Version für den Produktiv-Einsatz gleichzeitig eine Beta zu machen und dem User dann das hin & her switchen zu überlassen mag zwar für die Hersteller sehr "bequem" sein - speziell aus Autorensicht finde ich es "voll daneben". ;-)

Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

Kennt jemand von euch eine "Lösung" für das Problem?

Wie man das immer[tm] macht:

@-moz-document url-prefix() {  
   selektor {-moz-flex-box: foo; }  
   selektor {flex-box: bar; }  
}

oder missverstehe ich dich gerade?

Matthias

[molily]

Hallo,

Kennt jemand von euch eine "Lösung" für das Problem?

Ich verstehe das Problem gar nicht. Wieso ist dein Layout zerschossen, wenn Flexbox angeschaltet ist? Zeig mal den konkreten Flexbox-Code, den Firefox nicht unterstützt. Gibst du für flex-basis einen Prozentwert an? Reicht es nicht i.d.R., mit flow-grow zu arbeiten?

PS: Ich habe eh den Eindruck, dass der Firefox in seiner Entwicklung und Bug-Beseitigung immer weiter hinter alle anderen "gängigen" Browser zurückfällt

Den Eindruck habe ich nicht. Es ist sinnvoller, auf eine halbwegs stabile Flexbox-Spezifikation zu warten als eine veraltete mit Präfixen auszuliefern.

Mathias

[Gunther]

Hallo Mathias,

Ich verstehe das Problem gar nicht. Wieso ist dein Layout zerschossen, wenn Flexbox angeschaltet ist? Zeig mal den konkreten Flexbox-Code, den Firefox nicht unterstützt. Gibst du für flex-basis einen Prozentwert an? Reicht es nicht i.d.R., mit flow-grow zu arbeiten?

Da es sich um ein "Responsive Layout" handelt, verwende ich (natürlich) Prozentwerte.
Und irgendwoher hatte ich früher mal den "Würg-Around" für den Firefox dann 'width: 0' zu setzen.

Mit dieser "Variante" zerfällt dann das Layout natürlich, wenn man die neuere Flexbox Version aktiviert.

Eine "funktionierende" Variante für beide Fälle ist aber, die width der entsprechenden Elemente in einer absoluten Größenangabe so groß zu setzen, dass sie auf jeden Fall größer als der jemals erreichbare Wert ist. Und zusätzlich '-moz-box-flex: 1'.

PS: Ich habe eh den Eindruck, dass der Firefox in seiner Entwicklung und Bug-Beseitigung immer weiter hinter alle anderen "gängigen" Browser zurückfällt

Den Eindruck habe ich nicht. Es ist sinnvoller, auf eine halbwegs stabile Flexbox-Spezifikation zu warten als eine veraltete mit Präfixen auszuliefern.

Wie lange willst du denn da warten!? ;-)
Features, die auf diese Art & Weise implementiert sind, sind defakto in der Praxis nicht nutzbar - also quasi nicht existent! Wem nutzt das also?

Anstatt solche Dinge in eine stabile Version zu integrieren, gehört so etwas imho in eine Beta. Oder wozu Beta-Versionen da?

Zwischenzeitlich wäre es aber hilfreich, wenn man den von Anfang an bestehenden Bug mit den Prozentwerten fixen würde.

Und wenn man denn schon die neue(re) Version implementiert, dann bitte auch mit flex-wrap!

Gruß Gunther

[molily]

Hallo,

Da es sich um ein "Responsive Layout" handelt, verwende ich (natürlich) Prozentwerte.

Firefox unterstützt durchaus Prozentwerte für flex-basis: http://codepen.io/molily/pen/bLgcv

Noch einmal meine Bitte: Zeig mal den konkreten Flexbox-Code, den Firefox nicht unterstützt.

Mit dieser "Variante" zerfällt dann das Layout natürlich, wenn man die neuere Flexbox Version aktiviert.

Wenn das neue Flexbox aktiviert ist, werden die alten CSS-Eigenschaften ignoriert und die neuen umgesetzt – wo ist das Problem?

Übrigens ist eine Feature-Abfrage mit JavaScript einfach:
'flex' in document.body.style

Mathias

[Gunther]

Hallo Mathias,

sorry - ich hatte gestern einen Termin und musste weg. Hat etwas länger gedauert ...!

Da es sich um ein "Responsive Layout" handelt, verwende ich (natürlich) Prozentwerte.

Firefox unterstützt durchaus Prozentwerte für flex-basis: http://codepen.io/molily/pen/bLgcv

Ja klar, aber eben nur wenn die "neue" Version aktiviert ist. Ansonsten "versagt" dein Beispiel.

Noch einmal meine Bitte: Zeig mal den konkreten Flexbox-Code, den Firefox nicht unterstützt.

Kurze Erklärung vorweg:
Es geht hier speziell um 4 "Boxen", die je nach Viewportgröße (MQ)

• alle untereinander
• je 2 nebeneinander
• alle 4 nebeneinander
  angeordnet sind.

  
<div>  
	<div class="box_wrapper">  
		<div class="box_item">  
			...  
		</div>  
		<div class="box_item">  
			...  
		</div>  
	</div>  
  
	<div class="box_wrapper">  
		<div class="box_item">  
			...  
		</div>  
		<div class="box_item">  
			...  
		</div>  
	</div>  
</div>  

Ich hoffe, dass ist jetzt der gesamte relevante Teil ... ;-)

  
.box_wrapper {  
	display: -moz-box;  
	-moz-box-direction: normal;  
	-moz-box-orient: horizontal;  
	-moz-box-pack: justify;  
	-moz-box-align: stretch;  
  
	display: flex;  
	flex-direction: row;  
	flex-wrap: wrap;  
	justify-content: space-between;  
	align-content: center;  
	align-items: stretch;  
}  
  
.box_item {  
	width: 49%;  
	margin: 0 0 2rem;  
}  
  
@-moz-document url-prefix() {  
	.box_wrapper {width: 100%;}  
	.box_item {width: 45em; -moz-box-flex: 1; flex: 0 1 auto;}  
	.box_item:first-child {margin-right: 2.0rem;}  
}  

Mit dieser "Variante" zerfällt dann das Layout natürlich, wenn man die neuere Flexbox Version aktiviert.

Wenn das neue Flexbox aktiviert ist, werden die alten CSS-Eigenschaften ignoriert und die neuen umgesetzt – wo ist das Problem?

Das Problem ist, dass die alte Version eine Width-Angabe mit einer Weite >= max. Breite des Elements in einer Einheit ungleich Prozent benötigt, um zu funktionieren. Aber mit diesen Einstellungen "funktioniert" dann die neue Version nicht ("überlappt" das nachfolgende Element - die Flex-Boxen als solche "funktionieren").

Und da 'width' nichts mit der Flexbox-Syntax zu tun hat, kann man im CSS nicht zwischen alter und neuer Variante unterscheiden. Ergo funktioniert bei mir also (bis jetzt zumindest) immer nur eine Version.

Im übrigen gehören die "Hauptelemente" der Seite jeweils auch zu einer 'vertikalen' Flexbox.
Getestet habe ich das bis jetzt mit Chrome, Safari, Opera und IE10. In allen Browsern "funktioniert" es wie gewünscht.

Übrigens ist eine Feature-Abfrage mit JavaScript einfach:
'flex' in document.body.style

Das ist ja zur Abwechslung mal einfach ... - danke!
Frage ich mich, warum die das nicht im Modernizr Skript machen!? Die testen auf 'flexWrap', um zwischen alt und neu zu unterscheiden. Und da der Firefox wrap auch in der neuen Version nicht beherrscht, kommt als Ergebnis immer 'no-flexbox flexboxlegacy' heraus.

Gruß Gunther

[molily]

Hallo,

okay, *jetzt* verstehe ich das Problem. ;) Das wurde aus deinem Ursprungsposting nicht so deutlich.

Und da 'width' nichts mit der Flexbox-Syntax zu tun hat, kann man im CSS nicht zwischen alter und neuer Variante unterscheiden. Ergo funktioniert bei mir also (bis jetzt zumindest) immer nur eine Version.

Solange alle Spalten gleich groß sind (abzüglich margins), ist das eigentlich relativ einfach, oder? Mein Vorschlag:

http://codepen.io/molily/pen/FkecC

Die margins habe ich hier einmal herausgelassen (werde ich noch sinnvoll nachtragen – ist noch mal ein Problem für sich).

Im übrigen gehören die "Hauptelemente" der Seite jeweils auch zu einer 'vertikalen' Flexbox.

Frage ich mich, warum die das nicht im Modernizr Skript machen!? Die testen auf 'flexWrap', um zwischen alt und neu zu unterscheiden. Und da der Firefox wrap auch in der neuen Version nicht beherrscht, kommt als Ergebnis immer 'no-flexbox flexboxlegacy' heraus.

Naja, Modernizr will halt die komplette Unterstützung prüfen, insofern ist das Ergebnis korrekt.

Für die Praxis macht es mehr Sinn, zwischen grundlegender Unterstützung (display: flex usw.) und flex-wrap zu unterscheiden.

HTH
Mathias

[Gunther]

Hallo Mathias,

okay, *jetzt* verstehe ich das Problem. ;) Das wurde aus deinem Ursprungsposting nicht so deutlich.

Ja, manchmal ist es sogar in Deutsch "schwierig", ein Problem verständlich zu formulieren ... ;-)

Und da 'width' nichts mit der Flexbox-Syntax zu tun hat, kann man im CSS nicht zwischen alter und neuer Variante unterscheiden. Ergo funktioniert bei mir also (bis jetzt zumindest) immer nur eine Version.

Solange alle Spalten gleich groß sind (abzüglich margins), ist das eigentlich relativ einfach, oder? Mein Vorschlag:

http://codepen.io/molily/pen/FkecC

Die margins habe ich hier einmal herausgelassen (werde ich noch sinnvoll nachtragen – ist noch mal ein Problem für sich).

Im übrigen gehören die "Hauptelemente" der Seite jeweils auch zu einer 'vertikalen' Flexbox.

Die 4 Boxen ansich sind auch nicht das eigentliche Problem.
Der letzte Punkt bereitet Probleme ...!

Mein Body Element ist ja ebenfalls ein (vertikaler) Flexbox Container.
Zur Veranschaulichung:

  
<body>  
  <header>...</header>  
  <nav>...</nav>  
  <main>...</main>  
  <footer>...</footer>  
</body>  

Alle Blöcke sind "starr", bis auf Main, der bei Bedarf "gestreckt" werden soll.
Auch das "funktioniert" soweit in allen getesteten Browsern.

Nur wenn ich im Firefox die neue Flexbox Syntax (mit dem CSS Code aus meinem Beispiel) aktiviere, grenzt das Main Element zwar immer noch unmittelbar an das Footer Element, aber der Inhalt von Main (also u.a. meine 4 Boxen) "ragen" plötzlich über das Main Element hinaus (und liegen vor/ über dem Footer Element)!?

Ein Bug in der neuen Flexbox Syntax im Firefox?
Ich habe ehrlich gesagt keine Ahnung wieso FF dieses Verhalten zeigt.
Wie gesagt, sobald ich für die Boxen nur den Prozentwert für width verwende, ist alles OK. Nur "funktionieren" so halt die Boxen mit der alten Syntax nicht ...! :-(

Frage ich mich, warum die das nicht im Modernizr Skript machen!? Die testen auf 'flexWrap', um zwischen alt und neu zu unterscheiden. Und da der Firefox wrap auch in der neuen Version nicht beherrscht, kommt als Ergebnis immer 'no-flexbox flexboxlegacy' heraus.

Naja, Modernizr will halt die komplette Unterstützung prüfen, insofern ist das Ergebnis korrekt.

Für die Praxis macht es mehr Sinn, zwischen grundlegender Unterstützung (display: flex usw.) und flex-wrap zu unterscheiden.

Vielleicht interessiert dich dann auch
https://github.com/Modernizr/Modernizr/issues/934
https://github.com/Modernizr/Modernizr/issues/812

Gruß Gunther