Reset Css ve Normalize Css kullanımı.

Bu yazımda sizlere benim de  olmazsa  olmazlarım arasında  olan CSS sıfırlama  tekniğini anlatacağım.

Nedir bu CSS sıfırlama?

Html kodlama dili tarayıcı taraflı çalışan bir dildir ve her tarayıcıda bir takım defauld ayarları bulunmaktadır. Örneğin, Bir paragraf eklediğimizde, bu “p” etiketi margin veya padding ayarlarına  sahip olabilir. Özellikle “h” etiketleri istenilenin dışında  dafauld  boyutları bulunmaktadır. Bir örnek de body kısmıdır ve üstten az da  olsa  margin değere  sahiptir. Bunun gibi birçok defauld ayar bulunmakta ve tasarım esnasında  düzeltmekle uğraşmak bir yana, tüm tarayıcılardaki defauld ayarlar bilinip, ona  göre kod yazmak durumundayız. İşte bu yükümüzü hafifletmek ve sorunları gidermek adına CSS sıfırlayıcıları kullanılır. En çok kullanılanlar, Normalize CSS (bootstrap’de de kullanılıyor) ve Reset CSS(benim tavsiyem)’dir.

Download ve kullanımına  geçmeden önce, ufak bir örnekle tam olarak ne işe yaradığını görmenizi istiyorum.

 

Aşağıda CSS sıfırlayıcısı kullanmadan, paragraf etiketinde  bir yazı yazarak ön izleme oluşturduk.

 

Paragraf etiketi içerisine alınmış “Merhaba web bulutu!”   yazısında görüldüğü gibi, bir takım margin değerlere sahip. Şimdi bunu CSS sıfırlayıcıları ile ortadan kaldıralım. Ben bu örnekte reset css kullanmayı tercih ediyorum. Siz hangisini isterseniz onu kullanın.

Sonuç;

Görselden neyi anlatmak istediğimiz apaçık ortada  sanırım :).

 

Şimdi gelelim download linklerine;

Reset Css için  http://meyerweb.com/eric/tools/css/reset/  tıklayın. Açılan sitede  css kodlarını göreceksiniz, hepsini kopyalayın ve yeni bir css dosyasına yapıştırarak kaydedin. Daha sonra  projenizin en üstüne, tüm css dosyalarının üstüne gelecek şekilde ekleyin.

 

Normalize Css için https://necolas.github.io/normalize.css/ tıklayın. Açılan siteden dosyayı download edin ve css klasörünüze atın. İndex dosyanızı açarak, normalize css dosyanızı, kendi css kodlarınızın en üstüne gelecek şekilde ekleyin.

Css dosyanızı dahil etme  işlemi sırasında, tarayıcının en üstten başlayarak aşağıya doğru kodları okuduğunu unutmayın ve CSS sıfırlayıcılarının ilk olarak işleme  girmesi için en üste ekleyin. Alt taraflara veya ikinci sıralara eklenmesi durumunda, bir üstteki css dosyasında yazılan kodları sıfırlar, buna  dikkat edin.

Bir önceki yazımız olan Resimleri veya fotoğrafları responsive uyumlu hale getirme. başlıklı makalemizde fotoğrafları responsive hale getirme, responsive ve responsive dizayn hakkında bilgiler verilmektedir.