Cara menyelesaikan masalah dengan gaya khusus untuk penyemak imbas yang berbeza

Apabila membina halaman web, kami sering menghadapi masalah dengan gaya tertentu yang hanya muncul pada penyemak imbas tertentu. Walaupun semua penyemak imbas memaparkan HTML dan CSS dengan cara yang sama, terdapat perbezaan halus yang boleh menyebabkan halaman kelihatan atau berfungsi secara berbeza dalam Chrome, Firefox, Safari atau Internet Explorer. Nasib baik, terdapat beberapa teknik yang boleh membantu menyelesaikan masalah ini dan memastikan pengalaman pengguna yang konsisten merentas semua platform.

---

1. Kenal pasti pelayar yang bermasalah

Langkah pertama ialah menguji tapak kami pada penyemak imbas dan peranti yang berbeza untuk mengetahui dengan tepat penyemak imbas yang menyebabkan masalah.

Isu keserasian yang paling biasa akan berlaku dengan versi lama Internet Explorer, Safari atau beberapa versi khusus Firefox.

Kami boleh menggunakan alatan seperti BrowserStack yang membolehkan menguji tapak pada pelbagai penyemak imbas dan peranti.

2. Gunakan gaya berasingan untuk penyemak imbas tertentu (gaya bersyarat)

Salah satu teknik paling mudah ialah menggunakan gaya bersyarat yang dimuatkan hanya untuk pelayar tertentu. Pendekatan ini membolehkan kami menyasarkan penyemak imbas tertentu dan menggunakan gaya khusus hanya untuk mereka.

Sebagai contoh, jika kami ingin menambah gaya tertentu hanya untuk Internet Explorer 9 dan versi terdahulu, kami boleh menggunakan kod HTML berikut:

<!-- Za Internet Explorer 9 i starije verzije -->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

Kod ini membolehkan pemuatan gaya ie9.css hanya untuk pengguna yang menggunakan Internet Explorer 9 atau lebih awal.
Dengan cara itu, kami hanya boleh menyasarkan elemen yang menyebabkan masalah dalam penyemak imbas itu, tanpa menjejaskan yang lain.

3. Gunakan rangka kerja CSS seperti Bootstrap

Jika kita ingin mengelakkan terlalu banyak penalaan manual untuk penyemak imbas yang berbeza, pilihan terbaik ialah menggunakan rangka kerja CSS seperti Bootstrap.

Kerangka seperti Bootstrap sudah mempunyai penyelesaian untuk banyak isu keserasian merentas penyemak imbas.

Dengan menggunakan rangka kerja, kami mendapat gaya pratetap yang diuji pada berbilang penyemak imbas dan peranti, yang boleh menjimatkan masa dan usaha dengan ketara.

4. Gunakan Autoprefixer

Autoprefixer ialah alat yang secara automatik menambah awalan vendor yang diperlukan untuk sifat CSS.

Pelayar yang berbeza selalunya memerlukan awalan yang berbeza untuk sifat CSS tertentu untuk menyokongnya, seperti:

• -webkit- untuk Chrome dan Safari,
• -moz- untuk Firefox,
• -ms- untuk Internet Explorer.

Sebagai contoh, jika kami menggunakan CSS untuk mengubah elemen, sesetengah penyemak imbas mungkin memerlukan awalan -webkit- manakala yang lain tidak.
Dengan Autoprefixer, kami tidak perlu menambah awalan ini secara manual - ia akan menambah awalan yang betul secara automatik untuk setiap penyemak imbas.

Berikut ialah bagaimana contoh akan kelihatan tanpa dan dengan Autoprefixer:

Tanpa Autoprefixer:

<!-- Za Internet Explorer 9 i starije verzije -->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

Dengan Autoprefixer:

div {
  transform: rotate(45deg);
}

5. Gunakan Reset CSS atau Normalize.css

Satu isu keserasian merentas penyemak imbas biasa ialah gaya lalai digunakan pada elemen HTML. Sebagai contoh, sesetengah penyemak imbas mungkin menambah jidar atau padding pada elemen h1 secara lalai, manakala yang lain mungkin tidak.

Tetapkan Semula CSS dan Normalize.css ialah set gaya yang menetapkan semula atau menormalkan lalai ini, membolehkan kami mempunyai rupa asas yang lebih bersih dan konsisten.

Normalize.css selalunya merupakan pilihan yang lebih baik daripada tetapan semula gaya lengkap, kerana ia hanya menyeragamkan perbezaan merentas penyemak imbas, mengekalkan gaya lalai yang berguna, menjadikan reka bentuk lebih konsisten antara penyemak imbas yang berbeza tanpa berlebihan. Pendekatan ini lebih modular dan lebih mudah untuk nyahpepijat, tetapi kurang "agresif" berbanding dengan menetapkan semula gaya.

Tetapkan Semula CSS mengalih keluar sepenuhnya semua gaya lalai yang digunakan oleh penyemak imbas dan mengembalikan elemen kepada keadaan asalnya, membenarkan pembangun bermula dari asas "bersih". Pendekatan ini boleh menyukarkan kami untuk nyahpepijat dan mengekalkan kerana rantaian pemilih yang besar.

6. PostCSS dan pemalam keserasian

Jika kami menggunakan PostCSS atau perpustakaan CSS yang serupa, kami boleh menggunakan plugin yang membenarkan penggunaan sintaks CSS moden.

Sebagai contoh, sesetengah pemalam mendayakan penggunaan fungsi CSS baharu yang belum lagi disokong dalam semua penyemak imbas, tetapi akan ditranspilkan secara automatik ke dalam versi lama kod yang serasi dengan semua penyemak imbas.

---

Kesimpulan

Menyelesaikan masalah dengan penyemak imbas tertentu memerlukan penggunaan berbilang teknik dan alatan, untuk memastikan penampilan dan kefungsian tapak yang konsisten pada semua platform.
Dengan menggabungkan alatan seperti Autoprefixer, Normalize.css dan rangka kerja CSS seperti Bootstrap, kami boleh memudahkan proses ini dan menghapuskan banyak perkara isu keserasian.
Selain itu, menggunakan gaya bersyarat dan penyelesaian khusus untuk versi penyemak imbas yang lebih lama akan membantu tapak kelihatan dan berfungsi sebagaimana mestinya, tanpa mengira peranti atau pelayar yang digunakan pengguna.

Atas ialah kandungan terperinci Cara menyelesaikan masalah dengan gaya khusus untuk penyemak imbas yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!