CSS
Vragen over functies

Syntaxis

• @supports [voorwaarde] {/ * CSS-regels van toepassing * /}

parameters

Opmerkingen

Basic @ ondersteunt het gebruik

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

Qua syntaxis lijkt @supports erg op @media , maar in plaats van schermgrootte en -richting te detecteren, zal @supports detecteren of de browser een bepaalde CSS-regel aankan.

In plaats van iets als @supports (flex) , merk je op dat de regel @supports (display: flex) .

Detecties van kettingfuncties

Gebruik de operator and om meerdere functies tegelijk te detecteren.

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

Er is ook een or -operator en een not operator:

@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(...) */
}

Probeer voor de ultieme @supports ervaring logische expressies te groeperen met haakjes:

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

Dit werkt als de browser

1. Ondersteunt display: block EN zoom: 1 , of
2. Ondersteunt display: flex EN NIET display: table-cell , of
3. Ondersteunt transform: translateX(1px) .