@supports og feature detection

Spørg efter støtte, ikke efter browser

@supports er et af de vigtigste værktøjer i moderne CSS-kompatibilitet. I stedet for at tænke “virker det i browser X?” kan du spørge direkte: “understøtter browseren denne property, værdi eller selector?”

Det gør koden mere fremtidssikker, fordi du tester kapabilitet og ikke brandnavn.

Der er flere ting du kan teste

Her vises tre nyttige mønstre:

@supports (view-timeline: --my-timeline) {
  ...
}

@supports selector(::details-content) {
  ...
}

@supports not (interpolate-size: allow-keywords) {
  [open]::details-content {
    ...
  }
}

Du kan altså både teste property/value-par, selectors og negationer. Det gør @supports til et godt sted at samle både enhancements og fallback-regler.

text-box med fallback

I denne demo bruges @supports not (...) til at lægge en fallback ind, hvis browseren ikke kan trimme teksten med text-box:

Det er et godt mønster, fordi den moderne løsning får lov at stå først, mens fallbacken kun aktiveres, når den faktisk er nødvendig.

Dette er et eksempel på Graceful Degradation, hvor den bedste løsning kommer først, og så sørger man for, at det stadig ser nogenlunde ud, hvis den ikke understøttes. Det er et fint alternativ til Progressive Enhancement, når det handler om visuelle forbedringer, der ikke er afgørende for funktionaliteten.

Ressourcer

• caniuse.com er god til hurtige opslag på konkret browserstøtte.
• Web Platform Status er god, når du vil følge implementeringsstatus og se, hvor en feature er på vej hen.