Menggunakan penyeleksi CSS3 tingkat lanjut di IE

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 memanfaatkan pemilih CSS3 di file stylesheet, tetapi IE 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 DOMAsisten

alternatif

Jelas ini bukan solusi yang tepat. Untuk website Ajax, pada dasarnya ini 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.