CSS Verschachtelungsproblem bei @media und @supports

[Daaron]

Ich weiß nicht, ob ich grundsätzlich was falsch verstanden habe oder ob sowohl aktuelle Chromium-Builds, FF und IE10 schlichtweg nicht können, was ich von ihnen erwartet hab, aber evtl. hat ja hier schon einmal damit herumgespielt...

Viele von euch haben ja sicher schon mit CSS Mediaqueries per @media screen and (min-width:...){} herumgespielt, viel weniger bekannt dürfte @supports(cssbefehl:wert) {} sein.

Ich brauchte heut für den fehlerhaft implementierten flex-wrap im Firefox folgende @supports - Fallbackregel:

@supports not(flex-wrap:wrap) {
#parent {display:block;}
#parent .child {display:inline-block;}
}

Logische Folge wäre, gemäß dem wie ich die W3-Definitionen zu den at-Rules verstehe,

@media screen and (min-width: 20em) {
@supports not(flex-wrap:wrap){
/* spezifische Deklarationen für diese Mindestauflösung, z.B. höhere Breiten oder andere Paddings*/
}
}

Genau dieses @supports im @media ging aber nicht.

Hat schon mal jemand damit gearbeitet? Hat so ein Aufbau bei jemandem mal in einem der gängigen Browser überhaupt funktioniert? Oder ist Verschachtelung von at-Rules nur etwas, das auf dem Papier existiert?

 

[jan4321]

also theoretisch sehe ich da auch keinen Logikfehler.
Laut W3 darf man in @Media allerdings at-rules NICHT Verschachteln :
http://www.w3.org/TR/CSS21/media.html#at-media-rule

At-rules inside @media are invalid in CSS2.1.

Habe dazu sonst nur einen Bug von FireFox gefunden, du solltest also eigentlich eine Warnung bekommen....
https://bugzilla.mozilla.org/show_bug.cgi?id=652014

 

[Daaron]

CSS 2.1 spielt hier ja keine Rolle, denn @supports selbst ist Teil des Conditional Rules Model 3 (Teil von CSS3)...

The main extensions compared to level 2 are allowing nesting of certain at-rules inside ‘@media’, and the addition of the ‘@supports’ rule for conditional processing.

Aber es betrifft ja indirekt nicht nur den FF. Ich hab getestet, ob mein installierter Chromium @supports kann... schien zu klappen. @supports in einem @media hingegen ging nicht.

Das Problem wär ja keins, wenn Mozilla nicht so ne Scheiße bei display:flex; gebaut hätten. Die haben die präfix-lose Version aktiviert, dabei kann der FF so etwas extrem wichtiges wie Multi-Line - Flexbox noch nicht. Daran hängts ja am Ende, deshalb schreib ich so dämliche @supports... Hätten die weiterhin nur display:-moz-flex; akzeptiert wär alles gut...

 

[jan4321]

^^ Sage das nicht mir, sondern den FF Devs ;-)

allerdings sehe ich, wie gesagt, ansonsten keine Logikfehler darin. Solange das Valides CSS3 ist UND in FF richtig implementiert ist, sollte es ja klappen. Ich würde mal im FF Dev Forum nach fragen, ob dazu irgendwelche Bugs bekannt sind, wobei dagegen ja spricht, das es im Chromium auch nicht klappt.

 

[Daaron]

Hätt ja sein können, dass ein anderer Entwickler hier so eine Verschachtelung schon einmal erfolgreich genutzt hat.... aber ich glaub, @supports ist noch zu neu, um überhaupt irgendwo eingesetzt zu werden.

 

[palace4d]

Macht leider nur der alte Opera (Presto) und der Chrome. Verschachteln ist möglich.
http://jsbin.com/aSUmEri/2/

 

[Daaron]

Ok, dann hab ich wohl schlichtweg einen Denkfehler in meiner Supports-Regel. Guck ich mir das Montag noch einmal genauer an.