Analisis dan penyelesaian kepada sekatan IE pada helaian gaya CSS_Pertukaran pengalaman

Il existe quatre manières courantes d'associer des documents HTML à CSS :

Utiliser des balises de lien


Utiliser des éléments de style

body{background:#fff;}
h1{font-size:2em;}

Utilisez la commande @import

@import url(sheet1.css);
@import "sheet2.css"

Style en ligne utilisant l'attribut style (style en ligne) Ce sont des mots rouges
Dalam aplikasi sebenar, penggunaan gaya sebaris menggunakan atribut gaya tidak disyorkan XHTML1.1 telah menyeragamkan penggunaannya sebagai tidak disyorkan kawalan CSS. Kelebihan penampilan dokumen secara keseluruhan. Tiga kaedah pertama menggunakan teg pautan dan teg gaya, dan mempunyai sekatan berikut dalam IE (termasuk IE6, IE7 dan IE8 beta1):

Hanya CSS yang dikaitkan dengan 31 pautan atau teg gaya pertama dalam dokumen boleh diaplikasikan.

Bermula dari yang ke-32, CSS yang dikaitkan dengan tegnya akan menjadi tidak sah. Dokumentasi rasmi IE Semua teg gaya selepas 30 teg gaya pertama pada halaman HTML tidak digunakan dalam Internet Explorer juga menyebut sekatan ini, termasuk penggunaan fail .xsl .xml juga mempunyai sekatan ini. Tapi nampaknya tersalah kuantiti ditulis. Sila lihat IE:

Contoh 1: 34 teg gaya digunakan pada masa yang sama
Contoh 2: 1 teg gaya dan 34 teg pautan digunakan pada masa yang sama
Teg gaya hanya mempunyai 31 @import arahan pertama Aplikasi yang berkesan.

Abaikan bermula dari arahan @import ke-32. Sila lihat:

Contoh 3: Gunakan arahan @import 34 kali dalam teg gaya.

Hanya 31 arahan @import pertama bagi fail css digunakan dengan berkesan.

Abaikan bermula dari arahan @import ke-31. Sila lihat:

Contoh 4: Gunakan teg pautan untuk memperkenalkan fail css yang menggunakan arahan @import sebanyak 34 kali
Contoh 5: Gunakan teg gaya untuk memperkenalkan fail css yang menggunakan arahan @import 34 kali
Contoh 6: Gunakan teg pautan dan gaya untuk memperkenalkan fail CSS yang menggunakan arahan @import lebih daripada 31 kali
Fail CSS tidak boleh melebihi 288kb?

Berita ini datang daripada Had Saiz Fail CSS Internet Explorer.

Had melata di bawah arahan @import tidak boleh melebihi 4 lapisan

Apabila memperkenalkan fail css melalui arahan @import di bawah IE, lapisan kelima akan menjadi tidak sah. Had ini datang daripada had Cascade melalui peraturan @import. Malah, disebabkan sokongan pelayar yang tidak sempurna untuk sarang berbilang peringkat, walaupun anda perlu menggunakan arahan @import untuk memperkenalkan fail CSS, jangan melebihi 2 tahap.

Sekatan IE pada CSS tidak akan ditemui dalam kebanyakan kes Walaupun anda menemui penyelesaian terbaik, anda harus menggabungkan fail CSS dan teg respons secara manual atau melalui program bahagian belakang , meminimumkan bilangan http requests ialah prinsip pertama untuk mengoptimumkan pemaparan halaman.

Dalam IE, nilai gaya sebaris dan terbenam boleh diubah suai melalui objek document.styleSheets (disokong oleh Firefox, Opera9 dan Safari3.1). Objek ini hanya tersedia apabila dokumen mengandungi elemen gaya atau pautan Malah, menggunakan document.styleSheets.length anda boleh melihat bahawa nilai maksimum di bawah IE ialah 31.Yang berikut menggunakan Javascript untuk menggabungkan teg pautan dan gaya untuk menyelesaikan had di bawah IE:

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
return; }
var aSheet = document.styleSheets,
aStyle = document.getElementsByTagName('style'),
aLink = document.getElementsByTagName('link'); panjang                                                                                                                                                                                                                                                                                                                                      gaya tetapi simpan yang pertama
//Kerana nilai yang dikembalikan oleh kaedah getElementsByTagName ialah nodeList, jadi apabila memadam, gelung dalam urutan terbalik untuk(var i=aStyle.length-1;i>-1;–i){
var o = aStyle[i]; aCssText.push(o.innerHTML);
if(i>0){
                    o.parentNode.removeChild(o); ;i>-1;–i){
var o = aPautan[i];
if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
                                                                                              
aclonelink.push (o.clonenode (true)); tag gaya ditinggalkan paling banyak
//Dengan menambahkan semula pautan Kaedah nod mengaktifkan atribut StyleSheetnya untuk mendapatkan gaya
untuk(var i = aCloneLink.length-1;i>-1;–i) {
var o = aCloneLink[i];
oKepala(o); aCssText.push(o.styleSheet.cssText); 0].cssText += aCssText.join(”);
}
Sila lihat Contoh 1 dan Contoh 2 untuk demonstrasi.

Atribut media tidak dipertimbangkan Jika terdapat berbilang media, ia harus digabungkan secara berasingan, kesan rel="alternate stylesheet" dalam teg pautan tidak dipertimbangkan. Tetapi saya mengesyorkan menulis gaya yang sepadan dalam fail yang sama melalui arahan @media, yang sekurang-kurangnya boleh mengurangkan bilangan sambungan HTTP.
Ia tidak menyelesaikan masalah had 31 kali perintah @import Malah, anda boleh mengekstrak nilai hrefnya dan kemudian mengaktifkannya. Walau bagaimanapun, dalam aplikasi praktikal, adalah disyorkan untuk menggunakan tag pautan untuk menggantikan arahan @import Ini kerana arahan @import dalam IE adalah bersamaan dengan menulis tag pautan di bahagian bawah dokumen, yang akan menyebabkan gaya segera. masalah apabila halaman IE5/6 dimuatkan Nama saintifiknya ialah pepijat " "Flash of Unstyled Content" (dirujuk sebagai FOUC), pepijat ini boleh dielakkan dengan meletakkan pautan atau elemen skrip dalam pengepala dokumen.
Secara umumnya, jika terdapat sejumlah besar pautan atau teg gaya pada halaman, kebanyakannya berkemungkinan sama Anda boleh mengalih keluar item yang sama sebelum menggabungkan aCssText untuk mengurangkan jumlah kod.
Jika anda tidak menggunakan elemen gaya sedia ada dalam DOM untuk menambah terus kod gaya melalui atribut cssText, tetapi buat elemen gaya baharu untuk ditambah, pastikan anda menambah elemen gaya baharu pada DOM dahulu, dan kemudian gunakan cssText Attributes menambah kod gaya. Sebaliknya, kod gaya yang ditambahkannya nampaknya dihuraikan oleh penghurai gaya IE6 sebelum ditambah, jadi kedua-dua !penting dan penggodaman akan menjadi tidak sah. Sila lihat Contoh 7. Ia tidak disyorkan untuk menambah gaya baharu dengan menambahkan elemen gaya baharu, kerana ini boleh mencapai had IE dengan mudah.