Bagaimanakah anda melaksanakan kecerunan dalam Internet Explorer 9 dan seterusnya?

Kecerunan dalam Internet Explorer 9 dan Seterusnya

Dalam bidang pembangunan web, kecerunan telah menjadi sangat diperlukan untuk mencipta antara muka yang menarik secara visual dan menarik. Walaupun Internet Explorer 9 kini dianggap sebagai warisan, ia tetap menjadi titik pertikaian mengenai sokongan kecerunan.

Pertanyaan Awalan Kecerunan IE9

Seorang pembangun meminta penjelasan tentang awalan vendor untuk kecerunan dalam IE9, menyatakan kekeliruan terhadap penggunaan penapis proprietari. Untuk menangani perkara ini, kami beralih kepada pelaksanaan kecerunan menyeluruh merentas berbilang penyemak imbas:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

Kecerunan Penyemak Imbas Moden

Walau bagaimanapun, apabila pembangunan web berkembang, IE10 memperkenalkan yang baharu sintaks kecerunan, diikuti dengan pelaksanaan serupa dalam pelayar utama yang lain. Berikut ialah coretan kod yang dikemas kini yang mempamerkan sokongan kecerunan dalam penyemak imbas moden:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

Dengan kod yang dikemas kini ini, anda boleh mencapai pemaparan kecerunan yang konsisten merentas semua penyemak imbas utama, termasuk IE10 dan ke atas. Ingat, penyemak imbas moden turut menyokong penggunaan nilai rgb/rgba dan bukannya tatatanda heksadesimal untuk takrifan warna.

Atas ialah kandungan terperinci Bagaimanakah anda melaksanakan kecerunan dalam Internet Explorer 9 dan seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!