Rezepte zur Erkennung von Unterstützung für CSS-AT-Rules

Die @supports AT-Rule, die zunächst auf Eigenschafts-/Wert-Paarprüfungen beschränkt ist, unterstützt jetzt Selektorprüfungen über selector() und Schriftformat/Technologieprüfungen mit font-format() und font-tech(). Das direkte Testen anderer AT-RULE-Unterstützung bleibt jedoch eine Herausforderung. Die geplante at-rule() -Wrapper -Funktion ist, während er vielversprechend ist, eine weit verbreitete Browser -Implementierung.

In diesem Artikel werden die Problemumgehungen zum Erkennen von Unterstützung bei der Region untersucht und auf Bramus '"verräterischen" Immobilienansatz aufgebaut. Diese Methode nutzt das Vorhandensein verwandter Eigenschaften, die neben spezifischen AT-Rülen versandt werden, um die Unterstützung zu schließen. Wenn eine verwandte, überprüfbare Eigenschaft unterstützt wird, wird wahrscheinlich auch das nicht testbare AT-RULE unterstützt.

Mehrere AT-Rules werden untersucht, kategorisiert nach ihrem Browser-Unterstützung:

Basisunterstützung (zuverlässige Erkennung):

• @container Größe Abfragen: leicht mit Eigenschaften wie container-type, container-name oder container zu testen. Wenn eine davon unterstützt wird, wird @container wahrscheinlich unterstützt.

@supports (container-type: size) {
  /* Size queries are supported! */
}

• @font-feature-values: Die font-variant-alternates Eigenschaft dient als verräterische Anzeige.

@supports (font-variant-alternates: swash(custom-ident)) {
  /* @font-feature-values is supported! */
}

• @font-palette-values: Die font-palette Eigenschaft bietet einen zuverlässigen Test.

@supports (font-palette: normal) {
  /* @font-palette-values is supported! */
}

Teilnahmebereich (benötigte Problemumgehungen):

• @container Stilabfragen: Fehlen einer spezifischen verräterischen Eigenschaft, wird ein progressiver Verbesserungsansatz verwendet. Basisstile werden definiert und dann in einem @container -Block für die Unterstützung von Browsern überschrieben.

.container {
  --supports-style-queries: true;
}

.container .child {
  /* Base styles */
}

@container style(--supports-style-queries: true) {
  /* Container queries are supported! */
  .child {
    /* Override base styles */
  }
}

• @counter-style: Die Unterstützung für <custom-ident></custom-ident> -Werte in list-style-type zeigt @counter-style Unterstützung an.

@supports (list-style: custom-ident) {
  /* @counter-style is supported! */
}

• @position-try: Eigenschaften wie anchor-name oder position-try können zur Erkennung verwendet werden.

@supports (position-try: flip-block) {
  /* @position-try is supported! */
}

• @scope: Ähnlich wie bei Stilabfragen wird eine progressive Verbesserungsstrategie verwendet, wobei Basisstile in einem @scope Block überschrieben sind.

.foo .element {
  /* Base style */
}

@scope (.foo) to (.bar) {
  :scope .element {
    /* @scope is supported, override base style */
  }
}

• @view-transition: Die view-transition-name -Funktion oder die selector() -Funktion mit ::view-transition-group kann verwendet werden.

@supports (view-transition-name: custom-ident) {
  /* @view-transition is supported! */
}

ungelöste Herausforderungen:

Der Artikel identifiziert @layer, @property und @starting-style als AT-Rules, für die zuverlässige Erkennungsmethoden trotz angemessener Browserunterstützung schwer fassbar bleiben. Weitere Untersuchungen werden gefördert. Der Autor schlägt vor, dass ein progressiver Verbesserungsansatz für @layer.

funktionieren könnte

Dieser umfassende Leitfaden bietet praktische Rezepte zum Erkennen von AT-RULE-Unterstützung in CSS und bietet Lösungen für verschiedene Ebenen der Browserkompatibilität. Der "verteilte" Immobilienansatz erweist sich als wertvoll, aber einige AT-Rules erfordern immer noch innovative Teststrategien.

Das obige ist der detaillierte Inhalt vonRezepte zur Erkennung von Unterstützung für CSS-AT-Rules. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!