Kā nodrošināt lapu pareizu attēlošanu novecojušās vai ierobežotās pārlūkprogrammās?

Es izmantoju polifilus, lai aizpildītu funkcionalitātes trūkumus. Es piemēroju progresīvu uzlabošanu, sākot ar pamatsemantisko marķējumu un pakāpeniski pievienojot CSS un JavaScript. Tam es izmantoju caniuse.com un līdzīgus rīkus kā Modernizr. Es veicu testus dažādās pārlūkprogrammu versijās, tostarp izmantojot tādas pakalpojumu kā BrowserStack.

Piemēri pieejām:

• Polifili: trūkstošu API vai funkcionalitātes pievienošana.

  // Polifila piemērs Promise
  ja (typeof Promise === 'nezināms') {
    // Pievienot bibliotēku vai īstenot Promise
    // require('promise-polyfill');
  }
  

• Progresīva uzlabošana: Pamat saturs darbojas visur, uzlabota versija – mūsdienu pārlūkprogrammām.

  <!-- Pamatstruktūra, pieejama visiem -->
  <div class="container">
    <h1>Nosaukums</h1>
    <p>Apraksts</p>
  </div>
  

  /* Banāns, darbojas visur */
  .container {
      margin: 0 auto;
  }
  
  /* Papildus mūsdienu pārlūkprogrammām */
  @supports (display: grid) {
      .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
      }
  }
  

• Graceful Degradation (Gādīga pasliktināšanās): Sākam ar mūsdienu versiju, piedāvājam alternatīvas, ja nav atbalsta.

  <picture>
      <source srcset="image.webp" type="image/webp">
      <img src="image.jpg" alt="Attēls">
  </picture>
  

• Vendors prefiksi: Izmanto eksperimentālus CSS prefiksus.

  .box {
      -webkit-transition: all 0.5s; /* Vecāki Chrome/Safari */
      -moz-transition: all 0.5s;    /* Vecāki Firefox */
      -o-transition: all 0.5s;      /* Vecāki Opera */
      transition: all 0.5s;         /* Standarta */
  }
  

Šo metožu pielietošana kopā ar rūpīgu testēšanu ļauj nodrošināt pieņemamu lietotāja pieredzi pat novecojušās vidēs.