Internet Explorer CSS Dosya Sayısı ve Boyut Limitleri

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.

Tarayıcılara özel kapsamlı CSS Hack listesi

Arayüz kodlayan bir çok kişinin ihtiyacı olacağını düşündüğüm Tarayıcılara özel olarak kullanacabileceğimiz CSS Hack yöntemlerinin bir çoğunu görebileceğiniz listeyi sizlerle paylaşmak istedim. Her ne kadar CSS Hack yapmadan arayüz hazırlamak hayalim olsada umarım bu listedeki Hack yöntemleri hayatınızı kolaylaştırırır.

Seçici Hackleri (Selector Hacks)

IE6 ve alt sürümleri

* html #test { color: red }

IE7

*:first-child+html #test { color: red }

IE7, FF, Saf, Opera

html>body #test { color: red }

IE8, FF, Saf, Opera (IE 6,7 hariç)

html>/**/body #test { color: red }

Opera 9.27 ve alt sürümleri, safari 2

html:first-child #test { color: red }

Safari 2-3

html[xmlns*=""] body:last-child #test { color: red }

safari 3+, chrome 1+, opera9+, ff 3.5+

body:nth-of-type(1) #test { color: red }

safari 3+, chrome 1+, opera9+, ff 3.5+

body:first-of-type #test { color: red }

saf3+, chrome1+

@media screen and (-webkit-min-device-pixel-ratio:0) {
#test { color: red }
}

Safari 2 – 3.1

html[xmlns*=""]:root #test { color: red }

Safari 2 – 3.1, Opera 9.25

*|html[xmlns*=""] #test { color: red }

IE6-8 hariç

:root *> #test { color: red }

IE7

*+html #test { color: red }

Sadece Firefox. 1+

#test, x:-moz-any-link { color: red }

Firefox 3.0+

#test, x:-moz-any-link, x:default { color: red }

Öznitelik Hackleri (Attribute Hacks)

IE6

#test { _color: blue }

IE6, IE7

#test { *color: blue }

IE6 Hariç

#test { color/**/: blue }

IE6, IE7, IE8

#test { color: blue\9; }

IE7, IE8

#test { color/*\**/: blue\9; }

IE8 Hakkında Bilmeniz Gerekenler

IE8 uyumluluk modu / IE8 tarayıcısının IE7 gibi render etmesini önlemek

IE8 içinde bir düğmeye basarak sayfamızı IE7 içinde çalışır gibi davranmasını sağlayabiliyoruz. Bu düğmeye tıklandığında sayfamız bundan sonra IE7 gibi davranmaya başlayacaktır. Peki, IE7 modunda sayfamızın IE8 gibi davranma şansı varmı? Maalesef bunu yapmak mümkün değil. Eğer sayfalarımızı IE8 içinde çalışacak şekilde tasarlamış ve kesinlikle bu modda çalışmasını sağlamak istiyorsak sayfamızın içine aşağıdaki parametreyi eklemek yeterli olacaktır.

  1. <meta http-equiv="X-UA-Compatible" content="IE=8" />

Alternatif olarak, eğer tarayıcımızın IE7 gibi davranmasını istiyorsak aşağıdaki kodu eklememiz yeterli olacaktır.

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />

Her ne kadar bu etiketleri ekleyerek IE8′in IE7 gibi davranmasını sağlasakta bu gerçek bir IE7 gibi olmayacaktır. Bu nedenden meta etiketlerinin kullanımını önermiyorum.

IE8 CSS Hack

IE8 için kullanacağım hack yöntemi star hack yöntemini kullarak IE7 ve daha düşük versiyonları hedef alır. Fakat eski IE tarayıcıları için daha farklı hack yöntemleride kullanılabilir.

  1. p.myclass {
  2. color: green;
  3. *color: red;
  4. }
  5.  
  6. body:last-child p.myclass {
  7. color: blue;
  8. }

Bu hack yöntemi kullanıldığında myclass sınıfına sahip paragraflar;

Themeforest.Net

Flickr