Beberapa kaedah penulisan serasi CSS pelayar yang biasa digunakan

Dalam pembangunan bahagian hadapan, terutamanya semasa menulis CSS, kita mesti mempertimbangkan isu keserasian pelbagai pelayar. Pelayar yang berbeza menghuraikan CSS secara berbeza, yang bermaksud gaya yang berbeza mungkin muncul dalam pelayar yang berbeza.

Untuk menyelesaikan masalah ini, kami perlu menggunakan beberapa kaedah keserasian untuk memastikan halaman boleh dipaparkan secara normal dalam pelbagai pelayar. Di bawah, artikel ini akan memperkenalkan beberapa kaedah penulisan serasi CSS pelayar yang biasa digunakan.

1. Model kotak

Model kotak ialah asas CSS, tetapi penghuraian model kotak mungkin berbeza dalam penyemak imbas yang berbeza. Terutamanya dalam dua pelayar IE6 dan IE7, model kotak dihuraikan secara berbeza daripada pelayar moden.

Untuk menyelesaikan masalah ini, kita boleh menggunakan atribut saiz kotak, yang membolehkan kita menentukan cara model kotak dihuraikan.

Contohnya:

div{
saiz kotak: kotak sempadan;
-saiz-kotak moz: kotak sempadan;
-kotak-webkit- sizing : border-box;
}

Dalam contoh ini, kami menghuraikan model kotak kepada keseluruhan saiz elemen termasuk padding dan jidar dengan menetapkan sifat saiz kotak kepada kotak sempadan. Kemudian pastikan sifat ini berfungsi dengan betul dalam semua penyemak imbas dengan menambahkan awalan sebelum setiap penyemak imbas.

2. Latar belakang kecerunan

Latar belakang kecerunan ialah kesan yang biasa digunakan dalam reka bentuk web moden, tetapi dalam penyemak imbas yang berbeza, cara menghuraikan latar belakang kecerunan juga akan wujud perbezaan. Untuk menyelesaikan masalah ini, kita boleh menggunakan sintaks kecerunan CSS3 dan kemudian menambah awalan -Vendor untuk memastikan ia berfungsi dengan betul dalam semua penyemak imbas.

Contohnya:

latar belakang: -webkit-linear-gradient(#000, #fff);
latar belakang: -moz-linear-gradient(#000, #fff);
latar belakang: -ms-linear-gradient(#000, #fff);
latar belakang: -o-linear-gradient(#000, #fff);
latar belakang: linear-gradient(#000, # fff);

Dalam contoh ini, kami mentakrifkan latar belakang warna kecerunan, dan kemudian dengan menambahkan awalan -Vendor, ia boleh dipaparkan seperti biasa dalam semua penyemak imbas.

3. Bayang Teks

Kesan bayangan teks CSS3 juga sangat biasa dalam reka bentuk web moden. Walau bagaimanapun, dalam sesetengah pelayar lama, kesan ini mungkin tidak disokong. Untuk menyelesaikan masalah ini, kami juga perlu menggunakan awalan -Vendor untuk memastikan kesan ini berfungsi dengan betul dalam semua penyemak imbas.

Contohnya:

text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow : 1px 1px 1px #000;
-ms-text-shadow: 1px 1px 1px #000;
-o-text-shadow: 1px 1px 1px #000;

Dalam contoh ini, kita Tentukan kesan bayangan teks dan tambahkan awalan -Vendor supaya kesan ini boleh dipaparkan secara normal dalam semua penyemak imbas.

4. Sempadan Bulat

Sempadan bulat bagi elemen juga merupakan kesan yang biasa digunakan dalam reka bentuk web moden Walau bagaimanapun, dalam penyemak imbas lama, kesan ini mungkin tidak disokong. . Untuk menyelesaikan masalah ini, kita boleh menggunakan sifat bulat sempadan CSS3 dan kemudian menggunakan awalan -Vendor untuk memastikan kesannya berfungsi dengan betul dalam semua penyemak imbas.

Contohnya:

jejari sempadan: 10px;
-jejari-sempadan-webkit: 10px;
-jejari-sempadan-moz: 10px;
-ms - jejari sempadan: 10px;
-o-jejari-sempadan: 10px;

Dalam contoh ini, kami mentakrifkan sempadan bulat untuk elemen dan menggunakan awalan -Vendor untuk Pastikan kesan ini dipaparkan dengan betul .

5. Pertanyaan media

Pertanyaan media ialah ciri penting dalam CSS3, yang membolehkan kami menentukan gaya berbeza mengikut saiz skrin dan jenis peranti yang berbeza. Walau bagaimanapun, dalam pelayar lama, ciri ini mungkin tidak disokong. Untuk menyelesaikan masalah ini, kita perlu menggunakan beberapa kaedah penulisan serasi khas supaya pertanyaan media boleh berfungsi dengan baik dalam pelayar lama.

Contohnya:

skrin@media dan (lebar maksimum: 768px) {
/ gaya untuk skrin dengan lebar <= 768px /
}

@media sahaja skrin dan (lebar-peranti-min: 320px) dan (lebar-peranti-maks: 480px) {
/ gaya untuk iPhone dan peranti lain yang serupa /
}

Dalam contoh ini, kami menggunakan pertanyaan media untuk menentukan gaya untuk saiz skrin yang berbeza, dan kemudian menggunakan awalan -Vendor dan satu-satunya kata kunci yang serasi dengan penyemak imbas lama dan jenis peranti tertentu.

Ringkasan

Apabila menulis CSS, kami perlu mempertimbangkan sepenuhnya keserasian penyemak imbas untuk memastikan halaman kami dipaparkan dengan betul dalam semua penyemak imbas. Artikel ini memperkenalkan beberapa kaedah penulisan serasi CSS penyemak imbas yang biasa digunakan, termasuk model kotak, latar belakang kecerunan, bayangan teks, sudut bulat sempadan dan pertanyaan media. Dengan menggunakan kaedah penulisan yang serasi ini, kami boleh menjadikan tapak web kami berfungsi dengan baik dalam pelbagai pelayar dan memberikan pengalaman yang lebih baik untuk pengguna kami.

Atas ialah kandungan terperinci Beberapa kaedah penulisan serasi CSS pelayar yang biasa digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!