Bagaimanakah Saya Boleh Memaparkan Notis Naik Taraf untuk Pengguna dengan Penyemak Imbas Lapuk?

Paparkan Mesej Permintaan Kemas Kini untuk Penyemak Imbas Lapuk

Dalam pembangunan web moden, memastikan keserasian dengan pelbagai penyemak imbas adalah penting. Walau bagaimanapun, versi penyemak imbas yang lebih lama mungkin memerlukan pelarasan kod tertentu, seperti awalan vendor. Untuk mengekalkan kesederhanaan kod, sesetengah pembangun memilih untuk meminta peningkatan penyemak imbas dan bukannya menggunakan awalan.

Untuk menyasarkan penyemak imbas lapuk dan memaparkan mesej yang menggesa pengguna mengemas kini, terdapat berbilang pendekatan yang tersedia. Satu kaedah yang digunakan secara meluas melibatkan CSS. Dengan menggunakan peraturan @supports, pembangun boleh menentukan gaya yang digunakan pada penyemak imbas moden tetapi bukan untuk penyemak imbas yang disasarkan.

Berikut ialah contoh kod CSS yang menyasarkan Safari 7-8, IE 10 dan penyemak imbas lain:

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

Selain itu, peraturan kekhususan CSS boleh menangani penyemak imbas tertentu yang tidak menyokong @supports:

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade {
  display: none;
}

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade {
  display: none;
}

Dalam HTML, div khusus dengan kelas peningkatan penyemak imbas boleh digunakan untuk memaparkan mesej:

<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>

Pendekatan CSS ini menyembunyikan mesej untuk pengguna dengan berkesan dengan penyemak imbas moden, sambil memaparkannya untuk mereka yang menggunakan pelayar lapuk yang disasarkan. Untuk penyemak imbas yang tidak menyokong @supports (cth., IE <= 7), ulasan bersyarat dalam HTML boleh digunakan untuk memaparkan mesej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Notis Naik Taraf untuk Pengguna dengan Penyemak Imbas Lapuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!