Cara Mengaktifkan CSS3 Border Radius Di Internet Explorer 8

CSS3 memberikan kita kemampuan untuk menciptakan sudut tumpul dengan properti border-radius. Tapi seperti yang Anda tahu, fitur baru ini tidak diakui di Internet Explorer 8 (IE8) dan versi yang sebelumnya. Jadi, ketika Anda menerapkan CSS3 Border Radius ke elemen, maka hasilnya masih tetap lancip di bagian tepi.

Anda mungkin menemukan banyak saran yang berbeda di Internet, agar Anda mengabaikan IE8. Anda tentu dapat melakukannya. Tapi jika Anda bekerja pada sebuah situs web untuk lembaga pemerintah atau bank, Anda mungkin tidak memiliki pilihan lain, Anda masih harus membuat website terlihat bagus seperti dalam browser modern, yang mencakup kemampuan untuk menerapkan CSS3 Border Radius. 

Jika Anda benar-benar harus membuat website Anda support di IE8 ke bawah, anda bisa bisa menerapkan tips berikut ini.

CSS3Pie

CSS3Pie adalah semacam polyfill untuk fitur CSS3 dekoratif. Selain CSS3 Border Radius yang kita akan bahas dalam artikel ini, CSS3Pie juga mendukung Box Shadow dan Gradien, meskipun itu terbatas pada tipe Linear Gradient. 

Download CSS3Pie (di sini). Masukan ke dalam direktori proyek Anda. Seperti Anda juga dapat melihat dari gambar di bawah, saya telah membuat satu stylesheet serta satu file HTML.

Buka stylesheet dalam kode editor dan pilih salah satu elemen dalam file HTML dengan sudut membulat, seperti:

[.border-radius {
 height: 100px;
 width: 100px;
 background-color: #2ecc71;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}
]

Sebagai lebar elemen dan tinggi keduanya 100px, dan border-radius diatur ke 50px, elemen akan menjadi lingkaran:

Dalam IE8, seperti yang kita harapkan, itu akan tetap menjadi persegi, tapi jangan khawatir.

Untuk mengaktifkan efek sudut bulat, masukkan baris ini: behavior: url(css/pie.htc); seperti itu.

[.border-radius {
 height: 100px;
 width: 100px;
 background-color: #2ecc71;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 behavior: url(css/pie.htc);
}]

Perhatikan bahwa path file di url() harus berupa path absolut atau relatif ke file HTML. Anda juga dapat menambahkan baris ini di file terpisah. 

Anda mungkin memiliki stylesheet yang digunakan untuk Internet Explorer. Anda dapat menempatkan behavior: url(css/pie.htc); dalam file itu, tapi pastikan bahwa itu dinyatakan dalam selector CSS yang sama.

[/* declared in ie.css */
.border-radius {
 behavior: url(css/pie.htc);
}]

Refresh halaman di IE8. lihat hasilnya sudut sudah tumpul, dan ini harus bekerja di IE7 atau kebawah juga.

Pemecahan Masalah 
Internet Explorer mungkin akan bertingkah aneh. Jika ini tidak berhasil (mungkin sudut tumpul tidak berlaku), menambahkan properti position dan zoom  harusnya akan memecahkan masalah:

[<style>
.border-radius {
 behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
 position: relative;
    zoom: 1;
}
</style>]

Penggunaan CSS3 Pie di WordPress

Anda juga memanfaatkan pie.htc dalam situs web untuk memungkinkan CSS3 di IE8. Pada tahap ini, Anda siap untuk mengubah website menjadi tema berfungsi WordPress. Dalam hal ini, seperti WordPress adalah dinamis, di mana setiap halaman dapat melayani tingkat URL yang berbeda, kita harus menentukan path absolut. 

Anda juga dapat mengubah jalur dalam CSS seperti ini:

[.border-radius {
 behavior: url(http://localhost/{website}/wp-content/themes/{the_theme}/css/pie.htc);
 position: relative;
 zoom: 1;
}
]

Atau menambahkan gaya internal di header.php, seperti berikut:

[<style>
.border-radius {
 behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
 position: relative;
 zoom: 1;
}
</style>]

Setelah CSS3 Border Radius bekerja di IE8, hal tersebut karena CSS3Pie.