Kutu Modeli: Internet Explorer ve W3C

Bugün, Internet Explorer Box Model sorunu çoğunlukla sorun değil. Çoğu web geliştiricisi <!DOCTYPE>standartlara uyumu sağlamak için bir etiket yerleştirir ve artık kimse Internet Explorer 5.5'i desteklemeyi umursamıyor.

Bununla birlikte, bazı geliştiriciler IE kutu modelinin savunmasında öznel, kavramsal argümanlar ortaya koymuşlardır. IE kutu modelinin W3C modelinden daha "sezgisel" olduğunu iddia ettiler, çünkü W3C modeli kutunun içeriğini ölçer , oysa IE modeli kutunun kendisini ölçer:

Onların bakış açısını görebiliyorum, ancak bu temelde öznel bir argüman ve en önemli şey standartlara uymak.

Ancak, son zamanlarda ciddi pratik nedenlerle IE box modelini tercih etmeye geldim . W3C kutu modeli, bir öğeyi başka bir öğenin tam ekran piksel genişliğine göre dinamik olarak yeniden boyutlandırmayı zorlaştırır. Bunun nedeni, style.widthbir öğenin özelliğinin, öğenin toplam ekran boyutunu hesaba katmamasıdır: ek kenarlık ve dolguyu da hesaba katmanız gerekir. Her iki öğe de aynı CSS sınıfını kullanıyorsa bu bir sorun değildir - ancak farklı CSS sınıfları varsa, bu inanılmaz zor olabilir.

İki divimiz olduğunu varsayalım: A ve B, html'de 400px div olarak kodlanmış, B ise Javascript kullanılarak dinamik olarak oluşturulmuştur. Görsel olarak B'nin A'nın tam genişliği olmasını istiyoruz. Eski IE Box modelinde bu önemsiz bir durumdur. Biz sadece deriz ki: B.style.width = A.style.widthhatta B.style.width = A.offsetWidth + "px".

Ancak W3C kutu modelinde bu o kadar basit değil. Şimdi de stil sayfaları hakkında endişelenmek zorundayız. Eğer B, A ile aynı CSS sınıfına sahipse, şunu söyleyebiliriz B.style.width = A.style.width. Ama eğer yapmazsa - ve estetik nedenlerle istemeyebilirsek - başımız belada. Şimdi sınırdaki toplam pikselleri ve hem A hem de B'nin dolgusunu dikkate almak zorundayız. Bu, özellikle sınır ve dolgunun tutarsız birimlerde belirtilmesi durumunda zor olabilir (kenarlık genellikle 1px'lik bir çizgi olduğundan, genellikle dolgunluk ems ile belirtilmiş olabilir). O zaman ortak bir birime (em px veya px em) dönüştürme yarı-imkansız bir görevle karşı karşıyayız . Bütün bunlar sadece iki div'in tam olarak ekrana gelmesini sağlamak.

Temel olarak, W3C kutu modeli bizi bir elemanın boyutunu ayarlarken CSS sınırını ve dolgusu sorunlarını göz önünde bulundurmaya zorlar, oysa ki IE kutu modeli, genişlik kutunun tüm boyutunu ölçtüğü için (uçtan uca) -end), kutunun içeriğinden ziyade . Bu, elemanları birbirlerine göre dinamik olarak boyutlandırmayı çok daha kolaylaştırır.

Bütün bunlar W3C modeline göre IE kutu modelini tercih etmek için oldukça güçlü bir neden gibi gözüküyor (en azından kavramsal olarak - uygulamada IE kutu modeli öldü).

Soru : W3C neden bu kutu modelini seçti? W3C kutu modelinin basitçe göremediğim bazı avantajları var mı? Yoksa sorunu basitçe abartıyor muyum?

Dolgu ve kenarlığı genişliğe dahil edip etmeme seçimi keyfidir. Önemli olan tek şey çok sütunlu mizanpajlar oluşturmaktı. Ancak, yine de insanların o sırada düzenler için tablo kullandığı gerçeğini dikkate almalısınız. Bu nedenle onlar için bu endişenin yeterince önemli görünmediğini ve içeriğin kendisinin CSS'de işgal edeceği tam genişliği belirleyebilmenin çok daha değerli göründüğünü belirtti.

Günümüz geliştiricileri için durum mizanpajlar için CSS kullandıklarından ve CSS boks modeli ile ilgilenmeleri gerektiğinden tamamen farklı görünmektedir. Neyse ki, boks kurallarını geçersiz kılma yeteneğine sahibiz, bu nedenle çoğu durumda stil sayfanızın üstündeki basit kural mükemmel çalışır:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

Konuyla ilgili Jeff Kaufman'a alıntı yapmak için :

Spesifikasyonun onu başka şekilde tanımladığı göz önüne alındığında, yanlış yorumlanmaları için Microsoft'a gönderdiği sinyal web için kötü olurdu. Microsoft, kullanıcıları Microsoft sürümlerine kilitlemek için kasıtlı olarak rakiplerden farklı hareket eden ürünler ürettikleri bir kucaklama, genişletme ve söndürme yaklaşımını kullanıyordu. Web ile başarılı olmak için çok yaklaşmışlardı: yaklaşık 2000'den 2005'e kadar IE pek çok site sadece bunun için tasarlandı. Burada IE’nin yaklaşımını benimsemek Microsoft’a “IE’yle ne istersen yapabilirsin ve yasal hale getirmek için standartları ayarlayacağız” diyebilirdi.

Böylece kutu modeli W3C ve Microsoft arasındaki güç mücadelesinin kurbanı oldu.