Günümüzün web tarayıcısı, herhangi bir çapraz tarayıcı tutarlılığının arzulanan düşüncenin olduğu çılgın günlerden çok uzakta geldi. Bugünün web tarayıcıları tamamen standartlara uygundur. Birlikte güzelce çalıyorlar ve çeşitli tarayıcılarda oldukça tutarlı bir sayfa ekranı sunuyorlar. Bu, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari ve bugün web sitesine erişmek için kullanılan sayısız mobil cihazda bulunan çeşitli tarayıcıların en son sürümlerini içerir.
Web tarayıcıları ve CSS'nin nasıl görüntülendiği konusunda ilerleme kaydedilmiş olsa da, bu çeşitli yazılım seçenekleri arasında hala tutarsızlıklar var. Yaygın tutarsızlıklardan biri, bu tarayıcıların marjları, dolguları ve sınırları varsayılan olarak nasıl hesapladığıdır.
Kutu modelinin bu yönleri, tüm HTML öğelerini etkilediğinden ve sayfa düzenleri oluştururken bunların çok önemli olmasından dolayı tutarsız bir görüntü, bir sayfanın bir tarayıcıda harika görünebileceği anlamına gelir, ancak bir diğerinde hafifçe görünebilir. Bu problemle mücadele etmek için, birçok web tasarımcısı kutu modelinin bu yönlerini normalleştiriyor. Bu uygulama ayrıca, kenar boşlukları, dolgu ve kenarlık değerlerini "sıfırlama" olarak da bilinir.
Tarayıcı Varsayılanlarına İlişkin Bir Not
Web tarayıcılarının tümü, bir sayfanın belirli ekran görünümleri için varsayılan ayarlara sahiptir. Örneğin, köprüler mavidir ve varsayılan olarak altı çizilmiştir. Bu, çeşitli tarayıcılarda tutarlılık gösterir ve çoğu tasarımcının kendi özel projelerinin tasarım ihtiyaçlarına göre değiştiği bir şey olmasına rağmen, hepsi aynı varsayılan değerlerle başlıyor olmaları, bu değişiklikleri yapmanın daha kolay olmasını sağlar. Ne yazık ki, kenar boşlukları, dolgu ve kenarlıklar için varsayılan değer, tarayıcı düzeyindeki aynı tutarlılık düzeyinden yararlanamamaktadır.
Kenar Boşlukları ve Dolgu için Normalleştirme Değerleri
Tutarsız kutu modelinin problemini çözmenin en iyi yolu, HTML öğelerinin tüm kenar boşluklarını ve dolgu değerlerini sıfıra ayarlamaktır. Bunu yapmanın birkaç yolu vardır, bu CSS kuralını stil sayfanıza eklemektir:
* {margin: 0; dolgu malzemesi: 0; }Bu CSS kuralı * veya joker karakteri kullanır. Bu karakter "tüm öğeler" anlamına gelir ve temel olarak her HTML öğesini seçer ve kenar boşluklarını ve dolgulamayı 0 olarak ayarlar. Bu kural çok belirsiz olsa da, harici stil sayfanızda olduğu için, varsayılan tarayıcıdan daha yüksek bir özgüllüğe sahip olacaktır. değerler Bu varsayılanlar üzerine yazdığınız şey olduğundan, bu tarz bir şey yapmakta olduğunuz şeyi gerçekleştirecektir.
Başka bir seçenek de bu değerleri HTML ve gövde öğelerine uygulamaktır. Sayfanızdaki diğer tüm öğeler bu iki öğenin çocukları olacaklarından, CSS çağlayanı bu değerleri diğer tüm öğelere uygulamalıdır.
html, vücut {marjı: 0; dolgu malzemesi: 0; }Bu, tasarımınızı tüm tarayıcılarda aynı yerde başlatacaktır, ancak hatırlamanız gereken tek şey, tüm kenar boşluklarını ve dolguları bir kez çevirdiğinizde, web sayfanızın belirli bölümleri için onları seçerek yeniden etkinleştirmeniz gerekir. ve tasarımın istediğini hissediyorum.
Sınırlar
Düşünüyor olabilirsiniz, ancak tarayıcıların varsayılan olarak vücut öğesi etrafında kenarlıkları yoktur. Bu kesinlikle doğru değil. Internet Explorer'ın eski sürümleri, öğelerin etrafında saydam veya görünmez bir kenarlığa sahiptir. Kenarlığı 0 olarak ayarladığınız sürece, bu sınır sayfa düzenlerinizi bozabilir. IE'nin bu eski sürümlerini desteklemeye devam edeceğinize karar verdiyseniz, aşağıdakileri bedeninize ve HTML stilinize ekleyerek ele almanız gerekir:
HTML, beden {
kenar boşluğu: 0px;
dolgu malzemesi: 0px;
kenarlık: 0px;
}
Kenar boşluklarını ve dolguyu kapattığınız gibi, bu yeni stil de varsayılan sınırları kapatacaktır. Aynı şeyi, makalenin başlarında gösterilen joker karakterini kullanarak da yapabilirsiniz.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 9/27/16 tarihinde düzenlendi.