CSS Reset Nedir? Nasıl Kullanılır?

CSS(Cascading Style Sheets) kısa tabirle işaretlemelere(markup) şekil veremeye yarayan biçimlendirme dili, daha doğrusuyla şablonudur.Web teknolojisi içerisinde, CSS öğrenemesi oldukça basit ama uygulaması tecrübe isteyen bir dildir.CSS’i çok kolay öğrenebilirsiniz ama CSS’de bir işi birden çok özellik yapabildiği için, hangi yerde hangi özelliği kullanacağınız sizin bu alanda ki deneyiminize kalır.

CSS’i kısaca açıkladığımıza göre esas konumauza gelelim.CSS Reset nedir? CSS Reset,CSS özelliklerimizi ilk başlangıç haline getirmek için kullanılan bir sıfırlama tekniğidir.Nasıl yani?CSS istemci trafında çalışır ve bunun için tarayıcılara bağlıdır.Her tarayıcıda kendine göre bir başlangıç ayarlarına sahip olduğundan, yapmaya çalıştığınız bir web sayfası tarayıcılara göre farklılıklar gösterir.Bunun önüne geçmek için CSS Reset kullanılır.

CSS Reset ne işe yarar? Biraz daha derine inelim.CSS’in bütün özellikleri ve parametreleri bağımsız W3 komitesi tarafından oluşturulur ve geliştirilir.CSS tamamen istemici tarafında yani ziyaretçilerin görebildiği kısımda çalıştığı için, işin içeresine bir çok faktör girer.Mesela browserlar(tarayıcılar) bu konu da başı çeker.Her tarayıcının (Chrome,Firefox,İnternet Explorer,Safari,Opera) kendine göre farklı startdartları vardır.Bu stardartlar tabi ki uçuk farklar içermez ama bir sitenin görünürlüğünü değiştirebilir.Mesela CSS’in yayında olan son güncel versiyonu CSS 3 ait bir çok özellik bazı tarayıcılarada desteklenirken bazı tarayıcılarda desteklenmez.Bu özellikleri tarayıcı desteklerini bilmeden uygularsanız ortaya her tarayıcı da farklı görünen bir yapı çıkarırsınız.

Konuyu rahat anlamnız için yukardaki örneği verdim ama CSS Reset bu özelliklerle ilgili değil aslında.Tarayıcıları başlangıç değerleri ile alakalıdır.Mesela tarayıcılara göre başlangıçta padding,margin,font-size, gibi özellikler farklılıklar gösterir.Birinde 10px olan başlangıç paddingi diğerinde 0,bir diğerinde 20px olabilir.Bu da oluşturacağınız alanların boyutlarını engelleyebilir.Biz işte bu her tarayıcıda farklı olan bu stardartları eşitlemek,hepsinde aynı şekilde başlamak için CSS Reset yapısını kullanıyoruz.

CSS Reseti kendiniz de oluşturabilir yada oldukça popüler olan bazı reset yapılarını kullanabilirsiniz.Ben bazı durumlarda sadece aşağıdaki yapıyı kullanarak işlerimi halledebiliyorum.

*,*:after,*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 16px;
    font-family: 'Open Sans',arial,sans-serif;
}
div,header,footer,main,aside,section {
    display: block;
}

Bu yukarıda ki kod yapısı basit bir CSS Reset örneğidir.Size önerebileceğimiz, belkide dünyada en fazla kullanılan CSS Reset, Eric Meyer tarafından oluşturulmuştur.Eric’in reset yapısı basit fakat oldukça kullanışlı bir tekniktir.Buradan ulaşabilir ve kullanabilirsiniz.
Diğer bir reset tekniği yine Meyer’in tekniği gibi oldukça popüler normalize.css dir.Nicolas Gallagher tarafından oluşturulan bu reset tekniği oldukça kapsamlı bir yapıdır.Ve bir çok framework Bootsrap,Foundation bu yapıyı kullanmaktadır.Buradan ulaşıp indirebilirsiniz.

Bu kadar uzun bir yazı olacağını düşnmüyordum.Ama umarım anlaşılmıştır.Bir sonra ki yazıda görüşmek üzere…

Bunları da beğenebilirsin