Hej zusammen, > gibt es eine Möglichkeit festzustellen ob ein Browser so etwas wie `:focus-within` unterstützt? @supports geht meines Wissens nach nur bei Eigenschaften/Werten?!? Problem: für Browser die `:focus-within` verstehen, sollen einige Angaben gemacht werden, die Browser ohne `:focus-within` ignorieren. Die Lösung ist simpel: was nur von Browsern mit `:focus-within`-Unterstützung angewendet werden soll, wenn `:focus-within` nicht zutrifft in einen negation-Selektor notieren, also so: ~~~css *:not(:focus-within) { foo: bar; } ~~~ Das klappt natürlich bei allen Selektoren, die noch nicht von allen Browsern unterstützt werden. Vorteil: progressive enhancement (wobei es sich eigentlich um graceful degradation handelt). Beispiel zum Spielen bei Codepen (ein Fork von Gunnar Bittersmann, der diese Lösung für alle Browser mit JavaScript umgesetzt hat): [ http://codepen.io/haunschild/pen/NjEZYm](http://codepen.io/haunschild/pen/NjEZYm) @Gunnar Bittersmann: die Formularfelder habe ich untereinander gesetzt, was aus BF-Gründen empfohlen wird - das Beispiel hat aber noch ein BF-Problem: die hübsche Animation einhergehend mit Schriftverkleinerung dürfte die Nutzung für Menschen mit Fehlsichtigkeiten und kognitiven Einschränkungen erschweren. - Und mein vorgegebenes Layout, um das es im konkreten Fall geht, sieht auch nebeneinaderstehende Formularfelder vor. Dort werde ich zur Positionierung aber flexbox verwenden… Beitrag auf [haunschild.de](http://haunschild.de/) folgt Marc

Hej marctrix, > gibt es eine Möglichkeit festzustellen ob ein Browser so etwas wie `:focus-within` unterstützt? @supports geht meines Wissens nach nur bei Eigenschaften/Werten?!? Problem: für Browser die `:focus-within` verstehen, sollen einige Angaben gemacht werden, die Browser ohne `:focus-within` ignorieren. Die Lösung ist simpel: was nur von Browsern mit `:focus-within`-Unterstützung angewendet werden soll, wenn `:focus-within` nicht zutrifft in einen negation-Selektor notieren, also so: ~~~css *:not(:focus-within) { foo: bar; } ~~~ Das klappt natürlich bei allen Selektoren, die noch nicht von allen Browsern unterstützt werden. Vorteil: progressive enhancement (wobei es sich eigentlich um graceful degradation handelt). Beispiel zum Spielen bei Codepen (ein Fork von Gunnar Bittersmann, der diese Lösung für alle Browser mit JavaScript umgesetzt hat): [ http://codepen.io/haunschild/pen/NjEZYm](http://codepen.io/haunschild/pen/NjEZYm) @Gunnar Bittersmann: die Formularfelder habe ich untereinander gesetzt, was aus BF-Gründen empfohlen wird - das Beispiel hat aber noch ein BF-Problem: die hübsche Animation einhergehend mit Schriftverkleinerung dürfte die Nutzung für Menschen mit Fehlsichtigkeiten und kognitiven Einschränkungen erschweren. - Und mein vorgegebenes Layout, um das es im konkreten Fall geht, sieht auch nebeneinaderstehende Formularfelder vor. Dort werde ich zur Positionierung aber flexbox verwenden… Marc