Ako zabezpečujete správne zobrazenie stránok v…

Použitie Progressive Enhancement: Začínam s osnovno delujočo funkcionalnostjo, ki deluje v vseh brskalnikih, nato pa dodajam naprednejše možnosti z JavaScriptom in CSS-jem za sodobne brskalnike.

Uporaba odkrivanja funkcij: Namesto da prepoznava brskalnik po user agentu, uporabljam modernizr ali lasten kodo za preverjanje podpore določenim CSS lastnostim ali API-jem.

// Preverjanje podpore za MutationObserver
if ('MutationObserver' in window) {
  // Uporabi MutationObserver
} else {
  // Uporabi fallback (npr. star EventListener)
}

Polyfill in transpilerji: Uporabljam babel za transpile sodobni JavaScript (ES6+) v starejši standard (ES5), združljiv z starejšimi brskalniki. Za manjkajoče funkcije uporabljam polyfill (npr. core-js). Za CSS uporabljam postcss s autoprefixerjem.

Fallbacki v CSS: Za napredne CSS lastnosti (npr. Grid ali Flexbox) nudim alternative z uporabo float ali inline-block.

/* CSS Grid s fallback za stare brskalnike */
.container {
  display: block; /* Fallback */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Minimizacija odvisnosti od JavaScript: Poskušam kritične funkcije implementirati samo z HTML in CSS, da bo stran delovala tudi, če je JS izklopljen.
Testiranje: Redno testiram stran v različnih starih brskalnikih (IE11, stare verzije Edge) z uporabo BrowserStack ali lokalnih virtualnih strojev.
Omejitve: Z dogovorom s stranko določim, kateri brskalniki morajo biti popolnoma podprti, za katere pa je sprejemljivo omejeno delovanje. Določim minimalno raven podpore.
Nudenje alternativnih virov: Za slike ali videe uporabljam <picture> ali <video> z različnimi formati in viri, da brskalnik izbere ustreznega.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Opis slike">
</picture>
```

Ako zabezpečujete správne zobrazenie stránok v starších alebo obmedzených prehliadačoch?