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

Používám polyfill pro doplnění mezer v funkcionalitě. Používám postupné zlepšování, začínám základním sémantickým označením a postupně přidávám CSS a JavaScript. Pro sledování podpory používám caniuse.com a nástroje jako Modernizr. Testuji v různých verzích prohlížečů, včetně služeb jako BrowserStack.

Příklady přístupů:

• Polyfill: Přidání chybějících API nebo funkcí.

  // Příklad polyfill pro Promise
  if (typeof Promise === 'undefined') {
    // Připojení knihovny nebo implementace Promise
    // require('promise-polyfill');
  }
  

• Postupné zlepšování: Základní obsah funguje všude, vylepšená verze pro moderní prohlížeče.

  <!-- Základní struktura, dostupná všem -->
  <div class="container">
    <h1>Název</h1>
    <p>Popis</p>
  </div>
  

  /* Základní, funguje všude */
  .container {
      margin: 0 auto;
  }
  
  /* Pro moderní prohlížeče */
  @supports (display: grid) {
      .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
      }
  }
  

• Elegantní degradace: Začínáme moderní verzí, poskytujeme alternativy při absenci podpory.

  <picture>
      <source srcset="image.webp" type="image/webp">
      <img src="image.jpg" alt="Obrázek">
  </picture>
  

• Vendor prefixy: Použití prefixů pro experimentální CSS vlastnosti.

  .box {
      -webkit-transition: all 0.5s; /* Pro staré verze Chrome/Safari */
      -moz-transition: all 0.5s;    /* Pro staré verze Firefox */
      -o-transition: all 0.5s;      /* Pro staré verze Opera */
      transition: all 0.5s;         /* Standardní vlastnost */
  }
  

Použití těchto metod v kombinaci s důkladnými testy umožňuje zajistit přijatelnou uživatelskou zkušenost i v zastaralých prostředích.