Kuidas tagate lehtede õige kuvamise vananenud või piiratud brauserites?

Ma kasutan polüfille, et täita funktsionaalsuse lüngad. Rakendan progressiivset parandust, alustades põhisisu semantilisest märgistusest ja järk-järgult lisades CSS ja JavaScripti. Selleks kasutan caniuse.com ja sarnaseid tööriistu nagu Modernizr. Testin erinevates brauseriversioonides, sealhulgas kasutades selliseid teenuseid nagu BrowserStack.

Näited lähenemisviisidest:

• Polüfille: puuduvate API-de või funktsionaalsuse lisamine.

  // Polüfilli näide Promise jaoks
  kui (typeof Promise === 'määramata') {
    // Lisada raamatukogu või realiseerida Promise
    // require('promise-polyfill');
  }
  

• Progressiivne parandamine: Põhisisu töötab kõikjal, täiustatud versioon kaasaegsetele brauseritele.

  <!-- Põhistruktuur, kättesaadav kõigile -->
  <div class="container">
    <h1>Nimi</h1>
    <p>Kirjeldus</p>
  </div>
  

  /* Banaan, töötab kõikjal */
  .container {
      margin: 0 auto;
  }
  
  /* Täiendavalt kaasaegsetele brauseritele */
  @supports (display: grid) {
      .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
      }
  }
  

• Graceful Degradation (Graatsiline halvenemine): Alustame kaasaegsest versioonist, pakume alternatiive, kui tugi puudub.

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

• Vendor Prefixes: Kasutatakse eksperimentaalseid CSS prefikseid.

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

Nende meetodite kasutamine koos hoolika testimisega võimaldab tagada vastuvõetava kasutajakogemuse isegi vananenud keskkondades.