@supports für Pseudoklassen? GELÖST

[marctrix]

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:

*: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

@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 folgt

Marc