Kaip užtikrinate tinklalapių teisingą rodymą senesniuose ar ribotuose naršyklėse?

Naudoju polifilus užpildyti funkcionalumo spragas. Taikau pažangųjį tobulinimą, pradedant nuo bazinės semantinės žymėjimo ir palaipsniui pridedant CSS ir JavaScript. Tam naudoju caniuse.com ir Modernizr panašius įrankius. Testuoju įvairiose naršyklių versijose, įskaitant naudojant tokias paslaugas kaip BrowserStack.

Pavyzdžiai požiūrių:

• Polifilai: trūkstamų API ar funkcijų pridėjimas.

  // Polifilio pavyzdys Promise
  jei (typeof Promise === 'nežinoma') {
    // Prijungti biblioteką arba įgyvendinti Promise
    // require('promise-polyfill');
  }
  

• Pažangusis tobulinimas: Bazinis turinys veikia visur, patobulinta versija – šiuolaikiniams naršyklėms.

  <!-- Bazinė struktūra, prieinama visiems -->
  <div class="container">
    <h1>Pavadinimas</h1>
    <p>Aprašymas</p>
  </div>
  

  /* Banana, veikia visur */
  .container {
      margin: 0 auto;
  }
  
  /* Papildomai šiuolaikiniams naršyklėms */
  @supports (display: grid) {
      .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
      }
  }
  

• Graceful Degradation (Minkštas blogėjimas): Pradedame nuo šiuolaikinės versijos, siūlome alternatyvas, jei nėra palaikymo.

  <picture>
      <source srcset="image.webp" type="image/webp">
      <img src="image.jpg" alt="Paveikslėlis">
  </picture>
  

• Vendorsų prefiksai: Naudojami eksperimentiniai CSS prefiksai.

  .box {
      -webkit-transition: all 0.5s; /* Senesnės Chrome/Safari */
      -moz-transition: all 0.5s;    /* Senesnės Firefox */
      -o-transition: all 0.5s;      /* Senesnės Opera */
      transition: all 0.5s;         /* Standartinis */
  }
  

Šių metodų taikymas kartu su kruopščiais testais leidžia užtikrinti priimtiną naudotojo patirtį net ir pasenusiomis aplinkomis.