@supports
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
Die @supports
CSS @-Regel ermöglicht es Ihnen, CSS-Deklarationen zu definieren, die von der Unterstützung einer CSS-Funktion durch den Browser abhängen.
Die Verwendung dieser @-Regel wird allgemein als Feature Query bezeichnet.
Die Regel muss auf der obersten Ebene Ihres Codes oder innerhalb einer anderen bedingten Gruppenregel verschachtelt sein.
Probieren Sie es aus
In JavaScript kann auf @supports
über die CSS-Objektmodell-Schnittstelle CSSSupportsRule
zugegriffen werden.
Syntax
Die @supports
-Regel besteht aus einem Block von Anweisungen mit einer Supports-Bedingung.
Die Supports-Bedingung ist eine Menge aus einem oder mehreren Name-Wert-Paaren (z. B. <property>: <value>
).
@supports (<supports-condition>) {
/* If the condition is true, use the CSS in this block. */
}
Die Bedingungen können durch Konjunktionen (and
), Disjunktionen (or
) und/oder Negationen (not
) kombiniert werden.
@supports (<supports-condition>) and (<supports-condition>) {
/* If both conditions are true, use the CSS in this block. */
}
Die Reihenfolge der Operatoren kann mit Klammern definiert werden.
Supports-Bedingungen können entweder eine <property>: <value>
-Deklarationssyntax oder eine <function()>
-Syntax verwenden.
Im Folgenden werden die Verwendung der jeweiligen Supports-Bedingung beschrieben.
Deklarationssyntax
Die Deklarationssyntax prüft, ob ein Browser die angegebene <property>: <value>
-Deklaration unterstützt.
Die Deklaration muss von Klammern umgeben sein. Im folgenden Beispiel wird true zurückgegeben, wenn der Browser den Ausdruck transform-origin: 5% 5%
unterstützt:
@supports (transform-origin: 5% 5%) {
}
Funktionssyntax
Die Funktionssyntax überprüft, ob ein Browser Werte oder Ausdrücke innerhalb der Funktion unterstützt. Die unterstützten Funktionen der Funktionssyntax werden in den nachfolgenden Abschnitten beschrieben.
selector()
Diese Funktion bewertet, ob ein Browser die angegebene Selektorsyntax unterstützt. Das folgende Beispiel gibt true zurück und wendet den CSS-Stil an, wenn der Browser den Kind-Kombinator unterstützt:
@supports selector(h2 > p) {
}
font-tech()
Diese Funktion prüft, ob ein Browser die angegebene Schrifttechnologie für Layout und Rendering unterstützt.
Das folgende Beispiel gibt true zurück und wendet den CSS-Stil an, wenn der Browser die COLRv1
-Schrifttechnologie unterstützt:
@supports font-tech(color-COLRv1) {
}
Die folgende Tabelle beschreibt die Schrifttechnologien (<font-tech>
), einschließlich farbiger Schrifttechnologien (<color-font-tech>
), Schriftfunktions-Technologien (<font-features-tech>
) sowie weiteren verfügbaren Schrifttechnologien, die mit der font-tech()
-Funktion abgefragt werden können:
Technologie | Unterstützt |
---|---|
<color-font-tech> |
|
color-colrv0 |
Mehrfarbige Glyphen über die COLR-Version-0-Tabelle |
color-colrv1 |
Mehrfarbige Glyphen über die COLR-Version-1-Tabelle |
color-svg |
SVG-mehrfarbige Tabellen |
color-sbix |
Standard-Bitmap-Grafik-Tabellen |
color-cbdt |
Farb-Bitmap-Daten-Tabellen |
<font-features-tech> |
|
features-opentype |
OpenType GSUB - und GPOS -Tabellen |
features-aat |
TrueType morx - und kerx -Tabellen |
features-graphite |
Graphite-Funktionen, beispielsweise Silf , Glat , Gloc , Feat und Sill -Tabellen |
Andere <font-tech> -Werte |
|
incremental-patch |
Inkrementelles Schrift-Laden mit der Patch-Subset-Methode |
incremental-range |
Inkrementelles Schrift-Laden mit der Range-Request-Methode |
incremental-auto |
Inkrementelles Schrift-Laden mit Aushandlungsmethode |
variations |
Schriftvariationen in TrueType- und OpenType-Schriften zur Steuerung der Achsen, Gewichte, Glyphen usw. |
palettes |
Schriftpaletten mit Hilfe von font-palette , um aus mehreren Farbschemata im Font zu wählen |
font-format()
Diese Funktion prüft, ob ein Browser das angegebene Schriftformat für Layout und Rendering unterstützt.
Das folgende Beispiel gibt true zurück und wendet den CSS-Stil an, wenn der Browser das opentype
-Schriftformat unterstützt:
@supports font-format(opentype) {
}
Die folgende Tabelle beschreibt die verfügbaren Formate (<font-format>
-Werte), die mit dieser Funktion abgefragt werden können:
Format | Beschreibung | Dateiendungen |
---|---|---|
collection |
OpenType-Sammlung | .otc , .ttc |
embedded-opentype |
Eingebettetes OpenType | .eot |
opentype |
OpenType | .ttf , .otf |
svg |
SVG-Font (veraltet) | .svg , .svgz |
truetype |
TrueType | .ttf |
woff |
WOFF 1.0 (Web Open Font Format) | .woff |
woff2 |
WOFF 2.0 (Web Open Font Format) | .woff2 |
Der not-Operator
Der not
-Operator geht einem Ausdruck voran und führt zur Negation des Ausdrucks.
Das folgende Beispiel gibt true zurück, wenn die transform-origin
-Eigenschaft des Browsers 10em 10em 10em
als ungültig ansieht:
@supports not (transform-origin: 10em 10em 10em) {
}
Wie bei jedem Operator kann der not
-Operator auf eine Deklaration jeder Komplexitätsstufe angewendet werden.
Die folgenden Beispiele sind beide gültig:
@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}
Hinweis:
Es ist nicht erforderlich, den not
-Operator auf oberster Ebene zwischen zwei Klammern zu setzen.
Um ihn jedoch mit anderen Operatoren wie and
und or
zu kombinieren, sind Klammern erforderlich.
Der and-Operator
Der and
-Operator erstellt einen neuen Ausdruck aus der Konjunktion zweier kürzerer Ausdrücke.
Er gibt nur dann true zurück, wenn beide kürzeren Ausdrücke ebenfalls true sind.
Das folgende Beispiel gibt true zurück, wenn und nur wenn die beiden kürzeren Ausdrücke gleichzeitig true sind:
@supports (display: table-cell) and (display: list-item) {
}
Mehrere Konjunktionen können ohne zusätzliche Klammern aneinandergereiht werden. Die folgenden Beispiele sind beide gleichwertig:
@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
((display: list-item) and (display: contents)) {
}
Der or-Operator
Der or
-Operator erstellt einen neuen Ausdruck aus der Disjunktion zweier kürzerer Ausdrücke.
Er gibt true zurück, wenn einer oder beide der kürzeren Ausdrücke ebenfalls true sind.
Das folgende Beispiel gibt true zurück, wenn mindestens einer der beiden kürzeren Ausdrücke true ist:
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}
Mehrere Disjunktionen können ohne zusätzlichen Bedarf an Klammern aneinandergereiht werden. Die folgenden Beispiele sind beide gleichwertig:
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) {}
@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
Hinweis:
Wenn sowohl and
- als auch or
-Operatoren verwendet werden, müssen Klammern verwendet werden, um die Reihenfolge ihrer Anwendung zu definieren.
Andernfalls ist die Bedingung ungültig und die gesamte Regel wird ignoriert.
Formale Syntax
@supports =
@supports <supports-condition> { <rule-list> }
<supports-condition> =
not <supports-in-parens> |
<supports-in-parens> [ and <supports-in-parens> ]* |
<supports-in-parens> [ or <supports-in-parens> ]*
<supports-in-parens> =
( <supports-condition> ) |
<supports-feature> |
<general-enclosed>
<supports-feature> =
<supports-decl>
<supports-decl> =
( <declaration> )
Beispiele
Testen der Unterstützung einer CSS-Eigenschaft
@supports (animation-name: test) {
/* CSS applied when animations are supported without a prefix */
@keyframes {
/* Other at-rules can be nested inside */
}
}
Testen der Unterstützung einer CSS-Eigenschaft oder einer präfixierten Version
@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
/* CSS applied when text-stroke, prefixed or not, is supported */
}
Testen der Nicht-Unterstützung einer spezifischen CSS-Eigenschaft
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
/* CSS to provide fallback alternative for text-align-last: justify */
}
Testen der Unterstützung eines Selektors
Bedingte CSS-Regeln bieten die Möglichkeit, die Unterstützung eines Selektors wie :has()
zu testen.
/* This rule won't be applied in browsers that don't support :has() */
ul:has(> li li) {
/* CSS is applied when the :has(…) pseudo-class is supported */
}
@supports not selector(:has(a, b)) {
/* Fallback for when :has() is unsupported */
ul > li,
ol > li {
/* The above expanded for browsers that don't support :has(…) */
}
}
/* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) */
@supports selector(:nth-child(1n of a, b)) {
/* This rule needs to be inside the @supports block, otherwise
it will be partially applied in browsers which don't support
the `of` argument of :nth-child(…) */
:is(:nth-child(1n of ul, ol) a, details > summary) {
/* CSS applied when the :is(…) selector and
the `of` argument of :nth-child(…) are both supported */
}
}
Testen der Unterstützung einer Schrifttechnologie
Das folgende Beispiel wendet den CSS-Stil an, wenn der Browser die COLRv1
-Schrifttechnologie unterstützt:
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");
@supports font-tech(color-COLRv1) {
font-family: "Bungee Spice";
}
Es ist auch möglich, die Unterstützung einer Schrifttechnologie mit der tech
-Funktion innerhalb der @font-face
-Regel zu testen.
Falls ein Browser die Schrifttechnologie nicht unterstützt, kann eine Ersatzschriftart (Bungee-fallback.otf
) verwendet werden.
@font-face {
font-family: "Bungee Spice";
src:
url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
tech(color-COLRv1),
url("Bungee-fallback.otf") format("opentype");
}
Testen der Unterstützung eines Schriftformats
Das folgende Beispiel wendet den CSS-Stil an, wenn der Browser das woff2
-Schriftformat unterstützt:
@supports font-format(woff2) {
font-family: "Open Sans";
src: url("open-sans.woff2") format("woff2");
}
Spezifikationen
Specification |
---|
CSS Conditional Rules Module Level 4 # at-supports-ext |
CSS Conditional Rules Module Level 3 # at-supports |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@supports | ||||||||||||
font-format() | ||||||||||||
font-tech() | ||||||||||||
selector() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
Siehe auch
- Feature Queries verwenden
- Die CSSOM-Klasse
CSSSupportsRule
und die MethodeCSS.supports()
, um dieselbe Prüfung über JavaScript durchzuführen.