Hoe zorg je voor een correcte weergave van pagina's…

Gebruik van Progressive Enhancement: Ik begin met een basisfunctionaliteit die in alle browsers werkt, en voeg vervolgens geavanceerdere functies toe met JavaScript en CSS voor moderne browsers.
Toepassing van Feature Detection: In plaats van de browser te detecteren via user agent, gebruik ik modernizr of eigen code om de ondersteuning van specifieke CSS-eigenschappen of API's te controleren.
```
// Controleer ondersteuning voor MutationObserver
if ('MutationObserver' in window) {
  // Gebruik MutationObserver
} else {
  // Gebruik fallback (bijvoorbeeld oude EventListener)
}
```
Polyfills en Transpilers: Ik gebruik babel om moderne JavaScript (ES6+) te transpilen naar een oudere standaard (ES5), compatibel met oude browsers. Voor ontbrekende functies gebruik ik polyfills (bijvoorbeeld core-js). Voor CSS gebruik ik postcss met autoprefixer.

CSS Fallbacks: Voor geavanceerde CSS-eigenschappen (zoals Grid of Flexbox) bied ik alternatieven met float of inline-block.

/* CSS Grid met fallback voor oude browsers */
.container {
  display: block; /* Fallback */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Minimaliseren van afhankelijkheid van JavaScript: Ik probeer kritieke functionaliteit alleen met HTML en CSS te implementeren, zodat de site blijft werken als JavaScript is uitgeschakeld.
Testen: Ik test de site regelmatig in verschillende oude browsers (IE11, oude versies van Edge) met BrowserStack of lokale virtuele machines.
Beperkingen: Ik bespreek met de klant welke browsers volledig ondersteund moeten worden en voor welke een beperkte functionaliteit acceptabel is. Ik bepaal de minimale ondersteuningsdrempel.
Alternatieve bronnen verstrekken: Voor afbeeldingen of video's gebruik ik het <picture>- of <video>-element met verschillende formaten en bronnen, zodat de browser het meest geschikte kan kiezen.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Omschrijving van de afbeelding">
</picture>
```

Hoe zorg je voor een correcte weergave van pagina's in oude of beperkte browsers?