Bagaimanakah CSS Boleh Meminta Peningkatan Pelayar Tanpa Menggunakan Awalan Vendor?

Menggunakan CSS untuk Meminta Peningkatan Penyemak Imbas tanpa Awalan

Masalah:

Walaupun sokongan meluas untuk flexbox dalam penyemak imbas moden, sesetengah penyemak imbas lama masih memerlukan awalan vendor. Oleh itu, pembangun mungkin menghadapi dilema sama ada untuk menggunakan awalan dan memenuhi penyemak imbas warisan ini atau meminta pengguna meningkatkan penyemak imbas mereka untuk pangkalan kod yang lebih diperkemas.

Penyelesaian:

Untuk menangani isu ini, adalah mungkin untuk menggunakan CSS untuk menyasarkan penyemak imbas yang lapuk dan memaparkan mesej peningkatan tanpa memerlukan awalan.

1. Peraturan CSS untuk Penyemak Imbas Moden:

   @supports (display: flex) {
      .browserupgrade {
         display: none;
      }
   }

   Peraturan ini menyembunyikan mesej peningkatan untuk penyemak imbas yang menyokong flexbox sepenuhnya. Fokus utamanya ialah pada penyemak imbas terbaharu.

2. Peraturan CSS untuk Penyemak Imbas Yang Tidak Diingini Khusus:

   /* IE 11 and Opera Mini 8 */
   _:-ms-fullscreen, :root .browserupgrade {
      display: none;
   }
   
   /* Opera Mini 8 */
   :-o-prefocus, .browserupgrade {
      display: none;
   }

   Regles ini mengendalikan IE 11 dan Opera Mini 8, menyembunyikan mesej peningkatan dalam pelayar ini sebagai baik.

Dengan menggabungkan peraturan CSS ini, adalah mungkin untuk menyasarkan baki penyemak imbas lama yang tidak menyokong flexbox sepenuhnya tanpa menggunakan awalan.

3. Penyepaduan HTML:

   <div class="browserupgrade">
      <p>You are using an outdated browser. Please 
      <a href="http://browsehappy.com/">
         upgrade your browser</a>
      to improve your experience.</p>
   </div>

   Elemen HTML ini memaparkan peningkatan mesej dalam penyemak imbas yang disasarkan.

Pilihan Tambahan:

Walaupun CSS menyediakan penyelesaian yang mantap untuk permintaan naik taraf penyemak imbas, terdapat kaedah tambahan untuk dipertimbangkan :

• Modernizr: Pustaka JavaScript yang mengesan keupayaan penyemak imbas.
• PHP: Skrip sisi pelayan untuk menyemak butiran penyemak imbas dan mengubah hala pengguna ke halaman peningkatan.
• jQuery: Fungsi JavaScript untuk pengesanan penyemak imbas dan paparan mesej naik taraf.
• CSS.supports(): API yang membenarkan penggayaan bersyarat berdasarkan ciri penyemak imbas tertentu.
• update-browser.org: Perkhidmatan dalam talian yang menyediakan pengesanan naik taraf penyemak imbas automatik dan ubah hala.

Pilihan kaedah bergantung pada keperluan dan keutamaan projek individu, tetapi pendekatan CSS yang digariskan di atas menawarkan penyelesaian yang mudah dan ringan.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Meminta Peningkatan Pelayar Tanpa Menggunakan Awalan Vendor?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!