Patutkah Anda Mengawal Kod Flexbox atau Meminta Naik Taraf Penyemak Imbas dengan sopan?

Permintaan Naik Taraf Penyemak Imbas tanpa Prefixing

Untuk tapak web yang memanfaatkan kuasa CSS flexbox, keserasian penyemak imbas menjadi pertimbangan yang penting. Walaupun kebanyakan penyemak imbas moden menyokong flexbox dengan lancar, pelayar lama seperti Safari 8 dan IE 10 memerlukan penggunaan awalan vendor. Dengan hanya peratusan kecil pengguna yang masih mengakses tapak web menggunakan penyemak imbas yang lebih lama ini, pembangun mungkin mempersoalkan keperluan untuk meletakkan awalan kod mereka untuk menampung teknologi lapuk.

Daripada menggunakan awalan, pendekatan alternatif adalah dengan sopan meminta pelawat menaik taraf pelayar mereka. Ini memastikan bahawa sebahagian besar pengguna mengalami tapak web seperti yang dimaksudkan, mengekalkan kesederhanaan dan kecekapan kod.

Mensasarkan Penyemak Imbas Lama untuk Permintaan Naik Taraf

Untuk menyasarkan pelayar lama dan memaparkan mesej yang disesuaikan, terdapat pelbagai kaedah yang tersedia. Satu kaedah sedemikian ialah penggunaan komen bersyarat secara bijaksana. Komen bersyarat adalah khusus untuk Internet Explorer, membolehkan pembangun menyasarkan versi IE tertentu. Walau bagaimanapun, pendekatan ini tidak sesuai untuk penyemak imbas seperti Safari dan Opera.

Penyelesaian CSS Sahaja

Penyelesaian yang lebih komprehensif, merangkumi berbilang penyemak imbas, adalah menggunakan CSS- pendekatan sahaja. Ini bergantung pada peraturan @supports, yang membenarkan aplikasi bersyarat sifat CSS berdasarkan keupayaan penyemak imbas. Dengan memanfaatkan peraturan ini, pembangun boleh menyesuaikan CSS untuk menyasarkan versi penyemak imbas tertentu.

Kod Contoh

Kod berikut menunjukkan cara menyasarkan pelayar lama tanpa menggunakan awalan:

.browserupgrade { display: block; }

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

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

/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}

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>

Tambahan Pertimbangan

Untuk situasi yang memerlukan interaksi pengguna tambahan, skrip JavaScript atau jQuery boleh digunakan untuk mengubah hala pengguna secara automatik ke URL yang ditetapkan selepas kelewatan yang telah ditetapkan. Ini memastikan pelawat yang menggunakan penyemak imbas lapuk dibimbing dengan lembut ke arah pengalaman penyemakan imbas yang serasi.

Atas ialah kandungan terperinci Patutkah Anda Mengawal Kod Flexbox atau Meminta Naik Taraf Penyemak Imbas dengan sopan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!