@Supports selector ()

Die Fähigkeit der @supports -Regel, nach Selektorunterstützung zu überprüfen, ist überraschend robust! Während häufig zum Testen von property: value verwendet wird, erweitert die Funktion selector() ihre Fähigkeiten zur Bewertung der Auswahlunterstützung. Dies geschieht einfach, indem der Selektor einfach innerhalb der Klammern platziert wird:

 @Supports Selector (: N-te-Kind (1 von .foo)) {
  / * Styles angewendet, wenn der Selektor unterstützt wird */
}

Der Selektor :nth-child(n of .foo) , ein "Selektorlisten-Argument", das mit :nth-child -Familienauswahlkörper kompatibel ist, dient als gutes Beispiel. Derzeit unterstützt nur Safari diesen speziellen Selektor.

Betrachten Sie ein Szenario, in dem Sie eine Liste mit Separatoren und Zebra -Streifen stylen müssen. Im Idealfall würden Sie einen solchen Selektor verwenden, um die Zebra -Striping zu erreichen und gleichzeitig Separatoren zu ignorieren:

 li: nth-Kind (ungerade von .List-item) {
  Hintergrund: LightGoldenRodyellow;
}

Aufgrund der begrenzten Browser -Unterstützung können Sie jedoch @supports verwenden, um diesen Stil bedingt anzuwenden:

 @Supports Selector (: N-te-Kind (1 von .foo)) {
  li {
    Polsterung: 0,25EM;
  }
  li: nth-Kind (ungerade von .List-item) {
    Hintergrund: LightGoldenRodyellow;
  }
  li.separator {
    Listenstil: Keine;
    Rand: 0,25EM 0;
  }
}
@Supports nicht Selector (: n-te Kind (1 von .foo)) {
  li.separator {
    Höhe: 1PX;
    Listenstil: Keine;
    Border-Top: 1PX gestricheltes Lila;
    Rand: 0,25EM 0;
  }
}

Dies bietet einen Fallback -Stil für Browser, der den erweiterten Selektor fehlt. Eine verbesserte Syntax, die möglicherweise @when und @else verwendet, könnte dies vereinfachen:

 / * Hypothetische zukünftige Syntax */
@When unterstützt (Selector (: N-te Kind (1 von .foo))) {
  / * Stile für die Unterstützung von Browsern */
} @anders {
  / * Fallback -Stile *//
}

Eine JavaScript -API gibt es auch zur Unterstützung des Selektors:

 CSS.Supports ("Selector (: N-te Kind (1 von .foo))")

Diese Methode gibt in Safari true und in Chrome (zum Zeitpunkt des Schreibens) false .

Während die @supports Regel leistungsstark ist, ist die Anzahl der CSS-Selektoren mit inkonsistenter Cross-Browser-Unterstützung und die Anzahl der Anwendungsfälle, die @supports für diese Selektoren erfordern, relativ gering. Viele bisher problematische Selektoren, wie ::marker und Fall-unempfindliche Attribut-Selektoren, genießen jetzt eine breite Unterstützung. Selektoren wie :fullscreen oder :-webkit-full-screen bieten möglicherweise interessante und nützliche Anwendungen, da sie in iOS-Safari mangelnde Unterstützung haben.

Das obige ist der detaillierte Inhalt von@Supports selector (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!