Jangan salah paham, IE tidak mendukung penyeleksi lanjutan CSS3, termasuk IE8 terbaru (lihat "Dukungan Browser untuk Penyeleksi CSS" untuk detailnya), tetapi penyeleksi CSS memang sangat berguna. Ini dapat sangat menyederhanakan pekerjaan kita dan meningkatkan kode kita efisiensi memudahkan kami membuat halaman yang mudah dipelihara.
Namun, dukungan IE untuk penyeleksi CSS tingkat lanjut, khususnya penyeleksi CSS3, menghalangi kami untuk mempromosikan penerapan penyeleksi CSS. Namun, meskipun kami tidak dapat mengontrol pangsa pasar browser, kami dapat meningkatkan kinerja kami melalui beberapa teknologi. Kita juga dapat menggunakan teknologi lain untuk memungkinkan IE mendukung penyeleksi CSS3 yang menyamar.
Keith Clark, seorang insinyur pengembangan web dari Inggris, mengembangkan solusi JavaScript untuk memungkinkan IE mendukung penyeleksi CSS3. Skrip ini mendukung berbagai versi dari IE5 hingga IE8.
penggunaan
Anda hanya perlu mengunduh skrip DOMAssistant Robert Nyman dan ie-css3.js dan mengimpornya ke tag head halaman Anda, seperti ini:
<kepala>
<skrip type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<skrip type="teks/javascript" src="ie-css3.js"></skrip>
</kepala>
Penyeleksi yang didukung
anak ke-n
anak terakhir ke-n
tipe ke-n
tipe terakhir ke-n
anak pertama
anak terakhir
anak tunggal
tipe pertama
tipe terakhir
satu-satunya tipe
kosong
Beberapa batasan ie-css3
Style sheet harus diperkenalkan melalui tag <link>. Style sheet tingkat halaman atau style sheet sebaris tidak akan berpengaruh. Tetapi
Anda dapat menggunakan @import dalam file gaya eksternal untuk mengimpor file gaya lainnya;
File style sheet harus ditempatkan di bawah nama domain yang sama dengan halaman;
File gaya yang menggunakan jalur file:// tidak akan berfungsi karena masalah keamanan browser;
:not() pemilih belum didukung;
Metode ini tidak dinamis. Mengubah DOM setelah gaya diterapkan tidak valid.
Bagaimana cara kerjanya?
ie-css3.js mengunduh setiap file gaya untuk halaman tersebut dan mem-parsing pseudo-selector CSS3-nya. Jika pemilih ditemukan, maka akan diganti dengan kelas CSS dengan nama yang sama. Misalnya: div:nth-child(2) akan menjadi div._iecss-nth-child-2. DOMAssistant Robert Nyman kemudian digunakan untuk menemukan node DOM yang cocok dengan pemilih CSS3 elemen dan kemudian menambahkan kelas CSS yang sesuai ke dalamnya.
Pada akhirnya, style sheet elemen akan diganti dengan versi baru, dan kemudian gaya terkait akan ditambahkan ke elemen terkait menggunakan pemilih CSS3.
Hindari penerjemah CSS IE
Menurut W3C, browser harus mengabaikan aturan CSS yang tidak dikenalinya. Hal ini menimbulkan masalah - kita perlu menggunakan pemilih CSS3 di file style sheet, tetapi IE akan membuangnya.
Untuk menghindari masalah ini, setiap file gaya diunduh melalui XMLHttpRequest. Hal ini memungkinkan skrip untuk melewati penerjemah CSS bawaan browser dan dapat membaca file CSS mentah.
Kunjungi beranda proyek
Unduh ie-css3.js
Unduh DOMAssistant
alternatif
Jelas ini bukan solusi yang tepat. Untuk website Ajax, ini pada dasarnya tidak dapat digunakan, karena mengubah DOM setelah style sheet yang dihasilkan diterapkan tidak akan efektif. Namun sebenarnya kita dapat mengkustomisasi ie-css3 sendiri. Hanya saja tidak secerdas yang ini.