Progressive Enhancement og fallbacks

Kompatibilitet er en strategiopgave

To klassiske begreber:

• Progressive enhancement: lav først en løsning, der virker bredt, og forbedr derefter hvor muligt.
• Graceful degradation: byg det bedste først og sørg for, at det falder nogenlunde pænt tilbage.

I praksis er progressive enhancement ofte det mest robuste mindset i UI-arbejde, fordi det tvinger dig til at tænke i basisoplevelse, før du tænker i ekstra polish.

Fallbacks kan være helt enkle

Nogle gange er en fallback bare to deklarationer i den rigtige rækkefølge:

.element {
  background: #0000ff;
  background: color(rec2020 0 0 1);
}

Browseren bruger den nyere værdi, hvis den kan. Hvis ikke, falder den tilbage til den første. Det er ofte nok, når forskellen kun handler om kvalitet eller farverum, ikke om funktionalitet.

Ikke-kritiske forbedringer er et godt sted at starte

Ting, der gør oplevelsen bedre uden at være afgørende for, at interfacet virker:

p {
  text-wrap: pretty;
}

details {
  interpolate-size: allow-keywords;
}

@view-transition {
  navigation: auto;
}

Hvis en browser ignorerer disse regler, er det normalt fint. Teksten kan stadig læses, accordionen kan stadig åbnes, og navigationen virker stadig. Det er præcis den slags features, der egner sig godt til progressive enhancement.

Moderne select er også progressive enhancement

appearance: base-select er et godt eksempel, fordi <select> stadig fungerer som et almindeligt native kontrolfelt uden understøttelse. Den nye feature forbedrer styling- og API-mulighederne, men den er ikke nødvendig for, at brugeren kan vælge en værdi.

Det samme gælder ::picker(select): brug det som en forbedring, ikke som et krav. Una Kravets har en god oversigt her: select updates.