Reset CSS ve Normalize CSS Farkları

HTML bir projeyi sıfırdan yazanların muhtemelen karşılaştığı sıkıntılardan bir tanesi de sitenin kenar boşluklarının tarayıcıdan tarayıcıya değişmesidir. Her tarayıcının kendine göre varsayılan biçimlendirmesi vardır. Bu durum projenizin her tarayıcıda farklı görünmesine neden olur. Bu durum sonucunda Reset CSS ve Normalize CSS çözümleri doğmuştur.

Okuma Önerisi: Vital CSS Nedir ? Basit Web Framework

Siz olsanız bu sorunu nasıl çözerdiniz?

Reset CSS Nedir?

Reset CSS tüm tarayıcıların varsayılan değerlerini sıfırlamaya yarar. Örnekle anlatmam gerekirse Firefox site kenar boşluğu için 5px verdiğini düşünelim. Safari ise 10 px veriyor olsun. Reset CSS alıyor bunu sıfırlıyor. Her iki tarayıcı da aynı şekilde görmüş oluyor.

Normalize CSS Nedir?

Reset CSS’de tüm değerlerin sıfırlanması sıkıntı çıkarabiliyordu. Bunun üzerine Normalize CSS çıkarıldı. Normalize CSS tüm özellikleri sıfırlamak yerine bunlara bir değer atıyordu. Örneğin site kenar boşluğuna 5 px atıyordu. Bu sayede her tarayıcı kenar boşluğunu 5 px olarak gösteriyordu.

Kodlar uzun olduğu için siteye eklemedim. Gist adresimden Normalize.CSS Örneğini inceleyebilirsiniz.
GitHub Normalize.css sayfasından son sürüme erişebilirsiniz.

Reset.CSS ve Normalize.CSS Arasındaki Farklar Nelerdir?

• Normalize.css her şeyi sıfırlamaz. Gerekli özellikleri sizin belirlediğiniz kadar değiştir.
• Normalize.css, reset.css kapsamının dışında kalan bazı hataları düzeltir.
• Normalize.css modüler bir yapıdadır. Örneğin projenizde form kullanmayacaksanız form normalizasyonu bölümünü kolayca kaldırabilmenizi sağlar. Yani normalizasyonda bölümler bağımsızdır diyebiliriz.
• Normalize.css ‘in dokümantasyonu daha gelişmiştir. Normalize.css kodu Github’da kapsamlı olarak belgelenmiştir. Her kod satırının ne işe yaradığı anlatılmaktadır. Yalnızca ne işe yaradığıyla kalmayıp tarayıcılar arasındaki farkın ne olduğunu da gösteriyor.

Karar yine tabiki sizlerin. Ancak bana sorarsanız hem dokümantasyon hem özellik açısından Normalize.CSS diyorum. Bu konudaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.