Jak zajišťujete správné zobrazení stránek ve starých…

Použití Progressive Enhancement: Začínám s základní funkcionalitou, která funguje ve všech prohlížečích, a poté přidávám pokročilejší funkce pomocí JavaScriptu a CSS pro moderní prohlížeče.

Použití detekce funkcí: Místo detekce prohlížeče podle user agentu používám modernizr nebo vlastní kód k ověření podpory konkrétních vlastností CSS nebo API.

// Kontrola podpory MutationObserver
if ('MutationObserver' in window) {
  // Použít MutationObserver
} else {
  // Použít fallback (například starý EventListener)
}

Polyfill a transpiler: Používám babel k transpile moderní JavaScript (ES6+) na starší standard (ES5), kompatibilní se staršími prohlížeči. Pro chybějící funkce používám polyfill (například core-js). Pro CSS používám postcss s autoprefixerem.

Fallbacky v CSS: U pokročilých vlastností CSS (například Grid nebo Flexbox) poskytují alternativy pomocí float nebo inline-block.

/* CSS Grid s fallbackem pro staré prohlížeče */
.container {
  display: block; /* fallback */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Minimalizace závislosti na JavaScriptu: Snažím se implementovat klíčové funkce pouze s HTML a CSS, aby stránka zůstala funkční i při vypnutém JS.
Testování: Pravidelně testuji stránku v různých starých prohlížečích (IE11, staré verze Edge) pomocí BrowserStack nebo lokálních virtuálních strojů.
Omezení: Diskutuji s klientem, které prohlížeče mají být plně podporovány a u kterých je přijatelná omezená funkčnost. Určuji minimální práh podpory.
Poskytování alternativních zdrojů: U obrázků nebo videí používám tag <picture> nebo <video> s různými formáty a zdroji, aby si prohlížeč vybral vhodný.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Popis obrázku">
</picture>
```

Jak zajišťujete správné zobrazení stránek ve starých nebo omezených prohlížečích?