CSS
Funktionsfrågor

Syntax

• @supports [villkor] {/ * CSS-regler för tillämpning * /}

parametrar

Anmärkningar

Grundläggande användning av @support

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

När det gäller syntax är @supports mycket lik @media , men istället för att upptäcka skärmstorlek och orientering, kommer @supports att upptäcka om webbläsaren kan hantera en given CSS-regel.

Istället för att göra något som @supports (flex) , märker du att regeln är @supports (display: flex) .

Kedjefunktionsdetekteringar

Använd and operatören för att upptäcka flera funktioner på en gång.

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

Det finns också en or operatör och en not operatör:

@supports (display: flex) or (display: table-cell) {
  /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
  /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

För den ultimata @supports upplevelsen, prova att gruppera logiska uttryck med parentes:

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

Detta fungerar om webbläsaren

1. Stöder display: block OCH zoom: 1 eller
2. Stöder display: flex OCH INTE display: table-cell , eller
3. Stöder transform: translateX(1px) .