Internet Explorer CSS Dosya Sayısı ve Boyut Limitleri
19 January , 2010 tarihinde postalandı
IE6, IE7, IE8 | 6 Yorum altında dosyalandı
Son günlerde üzerinde çalıştığım bir proje üzerinde yaptığım güncellemeler sonrasında Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 sürümleri altında sayfadaki bazı bölümlerin düzgün görüntülenemediğini farkettim. Sorunum sayfa içinde bulunan bazı bölümlerin bağlı bulundukları CSS dosyası üzerindeki stil tanımlamalarını düzgün şekilde algılayamamasından kaynaklanıyordu.
Projenin kaynak dosyaları ile proje geliştirme aşamasında hazırlanan sayfaları karşılaştırdığımda, projenin kaynak dosyaları içinde olmayan fakat geliştirme ortamında farklı ihtiyaçlar için kullanılan CSS dosyaları olduğunu farkettim. 16 CSS dosyası olması gereken proje, geliştirme ortamında sonrasında 36′ya çıkmıştı.
Problemin kaynağının Internet Explorer üzerindeki CSS dosya kısıtlamalarından kaynaklandığını çok geçmeden anladım. Peki nedir bu kısıtlamalar, neler yapabiliriz kısaca bahsetmek istiyorum.
CSS Dosya Limitleri Hakkında Kısa Bilgi
Internet Explorer geliştiren ekip bir sayfa içinde <link /> veya @important url(‘sablon.css’) yöntemi kullanarak maksimum 32 harici CSS dosyası eklememize izin verir. Eğer bu sayının üzeririnde CSS dosyasına sahipsek bu dosyaları kesinlikle yüklemeyecektir. Bu limit tüm Internet Exlorer (6,7,8) sürümleri için geçerlidir. Bunun dışında pek bilinmeyen sınırlamalardan biride Internet Explorer içinde yüklenecek CSS dosyasının boyutunun (288 KB) geçemiyeceğidir.
Limitler İçin Çözüm Önerileri
Sayfamızda 36 CSS dosyası var ve hepsinede ihtiyamız olduğunu varsayalım. Peki bu durumda ne yapmamız gerekiyor?
1 – CSS dosyalarını gruplamak
Yeni CSS dosyaları oluşturabilir yada sık kullandığımız birden fazla CSS dosyası içine diğer CSS dosyalarını @import url(stil.css) yöntemi kullanarak gruplayabilirsiniz.
grup1.css
-----------------------------
@import url("1.css");
@import url("2.css");
...........
@import url("16.css");
grup2.css
-----------------------------
@import url("17.css");
@import url("18.css");
...........
@import url("36.css");
2 – CSS dosyalarını birleştirmek
CSS dosyalarını bölümlendirmenin en büyük nedenlerinden biri diğer sayfalarda kullanılmayacak olan stil tanımlamarını dosya içinden ayırarak hem CSS dosya boyutlarını düşürmek, hemde dosya yönetimini kolaylaştırmaktır.
Fakat çok fazla parçaya ayrılan CSS dosyalarının yönetimi bir süreden sonra amacı dışına çıkacak, yönetim zorlaştığı gibi aynı tanımlamara sahip bir çok CSS dosyasına da sahip olacaz. Tarayıcı üzerindeki dosya istek sayısınıda unutmayalım. Ne kadar çok istek sunucu tarafına o kadar yük demektir. Sonuç olarak yapmamız gereken benzer özelliklere sahip CSS dosyalarını birleştirmek ve münkün olduğunca benzer tanımlamaları aynı CSS dosyası üzerinde tutmak olacaktır.
3 – Gereksiz CSS dosyalarını kaldırmak
Malum dosya sayısı arttıkça yönetim zorlaşacağından aynı stil kurallarını içeren birden fazla CSS dosyasına sahip olacaksınız. Bu tarz bir sorun ile karşılaştığınızda elinizdeki dosyalarını tekrar gözden geçirebilir ve artık işinize yaramayan yada fazlalık olan dosyalarıda kaldırabilirsiniz.
İlgili Postalar
Yorumlar
6 Responses to “Internet Explorer CSS Dosya Sayısı ve Boyut Limitleri”
Cevap Ver
Abi bu kadar büyük bir proje yapacağımı düşünmüyorum ama faydalı bilgiler. Teşekkürler..
Teşekkürler Yunus. Ne zaman karşına çıkacağı belli olmayan sorunlar bunlar. Kulağının bir köşesinde kalsın emin ol bir gün işine yarar.
Bu sorunla 2 ay önce başıma geldi. localde çalışırken herhang bir sorunyoktu projeyi derleyip sunucuya attıktan sonra ve yazdııgm sisteme göre müşteri sayfasını düzenledikce css dosyaları ekleniyordu bir müddet sonra bozulmalar meydana geldi sorunu anlayıp çözmek için 2 günüm gitti. Hiç aklıma gelmemişti css dosyasına limit koyacakları. Sorunun yazdıgım kodlarda oldugunu sanarak epey uğraştım. Bu yazıyı keşke daha önce okusaydım. Eminim birilerinin işine yaracayaktır.
Evet edinmiş olduğumuz bilginin ne zaman işimize yarayacağı hiç belli olmuyor. Bende bu sorunla karşılaştığımda yeterli kaynak bulamadım için kendim çözmek zorunda kalmıştım. Bundan dolayı bu yazıyı sizlerle paylaşmak istedim.
@import url(“1.css”);
arkadaşlar yanlış anlamadıysam xx.css dosyasının içine yukarıdaki kodu kullanarak başka bir dosyayı
yani 1.ccc dosyasını xx.css dosyasıyla birleştiriyoruz.
örneğin sayfaya tıkladık xx.css dosyası bağlıdır; xx.css dosyası yüklendi, bu arada xx.css yüklenirken
içinde 1.css dosyasını da tanımladığımız için 1.css dosyası da yüklenir. ben ne anladım bu işten madem her iki css dosyası ister istemez yükleniyor.
Niçin css dosyamızı 2 ye bölelim.
ana sayfada ve gövdenin genelinde kullanacağımız css dosyasını ayrı yapalım. Bir de sayfa içerikleri ve ayrıntılar için ayrı bir css dosyası yapalım.
İndex sayfasına sadece:
Diğer sayfalar içinde:
Bu şekilde bir mantık kullanırsak ana sayfamızın yükü azalacak ve daha hızlı yüklenecek.
yok eğer ziyaretçi anasayfanın dışında bir sayfaya giriş yaparsa: diğer sayfalar içinde
iki css dosya tanımladığımız için: önce hızlı bir şekilde index.css yüklenecek ve site govdesi hemen belirecek, hemen ardından da genel.css yüklenecek böylece içerik şekillenecek.
===ben bu mantıkla çalışıyorum ve siteler hazırlıyorum=======
Arkadaşlar yanlışım varsa lütfen düzeltin beni…
herkeze saygılar.
Merhaba
Söylediklerine kesinlikle katılıyorum. Sayfamız için ne kadar az http-request yaparsak o kadar hızlı yüklenecektir. Doğru olanda budur fakat bazı projelerde (sony, samsung vb.) gibi uluslar arası projelerde herşey farklı modüllerden gelir ve bunları maalesef bir kaç css yada javascript dosyası içerisinde toparlayamazsınız. Bazende firmaların alt yapıları itibari ile sayfaya özel olarak css ve javascript basamadıklarında yada işlerine böyle geldiğinden proje ile ilgili tüm css ve javascript dosyalarını sayfalarına dahil ederler ve bu sıradada yazım içinde bahsi geçen sorunlarla karşılaşırsınız.