Mengapa hanya CSS yang diiktiraf oleh IE wujud?

Dalam beberapa tahun kebelakangan ini, dengan pengemaskinian dan peningkatan berterusan teknologi penyemak imbas, pembangunan bahagian hadapan Web menjadi lebih mudah dan terbuka. Walau bagaimanapun, masih terdapat beberapa penyemak imbas lama yang tidak dapat mengendalikan teknologi web baharu dengan cekap.

Salah satu masalah yang paling kerap disebut ialah hanya penyemak imbas IE (Internet Explorer) yang mengendalikan sifat dan pemilih CSS secara khusus. Gaya CSS sedemikian dipanggil "CSS IE sahaja" kerana ia hanya berfungsi pada pelayar IE.

Dalam artikel ini, kami akan membincangkan sifat dan pemilih CSS ini yang hanya diiktiraf oleh IE, dan meneroka sebab ia wujud dan cara menanganinya dalam pembangunan web moden.

1 Mengapa hanya CSS yang diiktiraf oleh IE wujud?

Pada masa awal pembangunan bahagian hadapan web, IE ialah salah satu penyemak imbas yang paling popular. Pada masa itu, pembangun akan menggunakan gaya CSS khusus IE untuk memastikan tapak web mereka dipaparkan dengan betul pada IE.

Seiring berjalannya waktu, penyemak imbas lain menjadi popular, seperti Chrome, Safari dan Firefox, dan mereka semua mula menyokong sifat dan pemilih CSS baharu, memberikan pembangun lebih kawalan ke atas penampilan tapak web dan perasaan mereka . Walau bagaimanapun, Internet Explorer nampaknya telah ditinggalkan, dan pembangun terpaksa terus menggunakan gaya CSS lama untuk memastikan tapak mereka berfungsi dengan baik pada IE.

Sifat CSS dan pemilih yang diiktiraf oleh IE boleh dianggap sebagai penyelesaian stopgap untuk pembangun pada masa itu, tetapi kini ia telah menjadi masalah bagi pembangun.

2. Sifat CSS yang hanya diiktiraf oleh IE

Berikut adalah beberapa sifat CSS yang hanya diiktiraf oleh IE Penggunaan sifat ini sudah lapuk dan pembangun harus cuba mengelak daripada menggunakannya :

2.1. Atribut penapis

Atribut penapis ialah atribut CSS yang hanya dikenali oleh pelayar IE dan digunakan untuk menggunakan satu atau lebih kesan grafik, seperti kabur, terang dan bayang. Kesan ini boleh dicapai melalui fungsi penapis CSS, yang juga boleh digunakan dalam pelayar lain.

Walau bagaimanapun, dalam pelayar IE 8 dan IE 9, atribut penapis boleh menggunakan berbilang kesan, yang tidak boleh dilakukan dalam penyemak imbas lain. Contohnya:

.div {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#000000');
    filter:alpha(opacity=50);
}

Atribut penapis di sini menggunakan dua kesan: satu ialah latar belakang kecerunan dan satu lagi ialah kelegapan. Dalam pelayar IE 8 dan IE 9 kedua-dua kesan akan berfungsi, tetapi dalam pelayar lain hanya kesan pertama akan digunakan.

Jadi, jika anda perlu menggunakan kesan penapis dalam pelayar IE 8 dan IE 9, anda perlu menggunakan atribut penapis, tetapi kesan penapis dalam penyemak imbas lain harus menggunakan fungsi penapis CSS.

2.2. atribut -ms-interpolation-mode

-ms-interpolation-mode atribut ialah atribut CSS yang hanya dikenali oleh pelayar IE, digunakan untuk mengawal kaedah pemaparan imej. Ia boleh mengambil nilai jiran terdekat, bikubik atau bilinear, yang boleh meningkatkan atau merosakkan kualiti imej.

Walau bagaimanapun, sifat CSS ini hanya berguna dalam pelayar IE 8, pelayar lain mengabaikannya. Dalam pembangunan web moden, secara amnya tidak perlu lagi menggunakan sifat ini, kerana teknologi CSS baharu memberikan kawalan yang lebih besar terhadap cara imej dipaparkan.

2.3. Atribut mod penulisan

Atribut mod penulisan ialah atribut CSS yang hanya dikenali oleh pelayar IE dan digunakan untuk menukar arah teks dalam halaman. Ia boleh ditetapkan untuk mempunyai orientasi atas-ke-bawah atau kiri-ke-kanan, dan anda juga boleh menetapkan arah teks kepada menegak atau mendatar.

Walau bagaimanapun, sifat CSS ini tidak berfungsi dalam penyemak imbas lain. Dalam pembangunan web moden, adalah disyorkan untuk menggunakan flexbox dan teknologi susun atur grid baharu dan bukannya atribut mod penulisan.

3. Pemilih CSS yang hanya diiktiraf oleh IE

Berikut ialah beberapa pemilih CSS yang hanya diiktiraf oleh IE kini sudah lapuk dan pembangun harus cuba mengelak daripada menggunakannya:

3.1. * Pemilih HTML

• Pemilih HTML ialah pemilih CSS yang dikenali hanya oleh pelayar IE dan digunakan untuk memadankan elemen dengan elemen akar HTML apabila memilihnya. Dalam pemilih ini, simbol "*" mewakili semua elemen.

Contohnya:

* html body {
    font-size: 14px;
}

Ini bermakna gaya CSS ini digunakan pada semua elemen badan di bawah elemen akar HTML.

Walau bagaimanapun, pemilih ini tidak disokong dalam penyemak imbas lain, tetapi pemilih turunan biasa boleh digunakan untuk mencapai kesan yang sama.

3.2. :pemilih anak pertama

:pemilih anak pertama ialah pemilih CSS yang hanya dikenali oleh penyemak imbas IE, digunakan untuk memilih elemen anak pertama elemen .

Contohnya:

div:first-child {
    font-size: 16px;
}

Ini bermakna gaya CSS ini digunakan pada semua elemen Div yang merupakan elemen anak pertama di bawah elemen induk.

Walau bagaimanapun, dalam IE 7 dan lebih awal, pemilih ini berbeza daripada :first-child pseudo-element. Dalam IE 7 dan lebih awal, pemilih ini hanya memilih elemen anak pertama, manakala dalam penyemak imbas lain ia memilih elemen anak pertama.

Oleh itu, dalam pembangunan web moden, kami mengesyorkan menggunakan pemilih keturunan: anak pertama dan bukannya pemilih ini.

4. Bagaimana untuk berurusan dengan CSS yang hanya diiktiraf oleh IE?

Walaupun sifat CSS dan pemilih yang hanya dikenali oleh IE kurang biasa dalam pembangunan web moden, ia masih berguna pada penyemak imbas lama seperti IE 8 dan IE 9.

Untuk memastikan tapak web dipaparkan dengan betul pada penyemak imbas lama ini, pembangun boleh menggunakan ulasan bersyarat untuk menyediakan gaya CSS yang berbeza untuk penyemak imbas IE yang berbeza.

Sebagai contoh, berikut ialah ulasan bersyarat yang menyediakan penggayaan CSS khusus untuk pelayar IE 8 dan IE 9:

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
 
<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

在这里，如果浏览器是IE 8或IE 9，则加载ie8.css或ie9.css。这使开发人员可以针对不同的浏览器提供不同的CSS样式。

5. 结论

只有IE识别的CSS属性和选择器在现代Web开发中已过时，但仍然有用于旧的IE浏览器。开发人员应该避免使用它们，并使用现代的CSS技术来实现相同的效果。

如果确实需要在旧版本的IE浏览器中使用这些CSS属性和选择器，则可以使用条件注释和IE特定的CSS样式来为不同的浏览器提供不同的CSS效果。

在Web开发中，我们必须始终记住，我们的目标是提供良好的用户体验，为此，我们应该遵循最佳实践，为不同的浏览器提供最佳的CSS样式。通过了解只有IE识别的CSS，我们可以更好地处理它们，确保我们的网站在所有浏览器中都能正确显示。

Atas ialah kandungan terperinci Mengapa hanya CSS yang diiktiraf oleh IE wujud?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!