Reset.css stil dosyası oluşturma

Sayfaları html'e dökerken en çok sıkıntı çıkaran konulardan biride sayfanın çeşitli browserlarda farklı şekillerde görüntülenmesidir. Bu yüzden birçoğumuz tasarımlarını işin hemen her basamağında belirli browserlarda test eder. Bu olaya cross-browser denir. Diğer bir deyişle tasarımlarınızı tüm browser'larda uyumlu ve aynı şekilde görüntülenip, çalıştırılmasıdır.

Sayfaları html'e dökerken en çok sıkıntı çıkaran konulardan biride sayfanın çeşitli browserlarda farklı şekillerde görüntülenmesidir. Bu yüzden birçoğumuz tasarımlarını işin hemen her basamağında belirli browserlarda test eder. Bu olaya cross-browser denir. Diğer bir deyişle tasarımlarınızı tüm browser'larda uyumlu ve aynı şekilde görüntülenip, çalıştırılmasıdır.



Bu standartlaştırma çeşitli css hack teknikleri ile yapılabiliyor. Ancak bunların en başında HTML etiketlerini sıfırlamak(resetlemek) geliyor. Bu sayede tasarımlarınızı browserlarda uyumlu hale getirmek için harcadığınız zamanda azalmış oluyor.

Bunu yapmak oldukça kolay tüm html etiketlerini sıfırlayabileceğiniz bir css reset dosyası. Bunun için en çok kullanılan iki reset.css dosyası var. Bunlardan biri Yahoo'nun geliştirdiği Yahoo UI Library Reset CSS, diğeride Eric Mayer'e ait Reset CSS dosyası. Birde bunların dışında benim geliştirdiğim bir reset.css dosyası var.


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

    :focus { outline: 0; }

    body { line-height: 1; color: black; background: white; }

    ol, ul {  list-style: none; }

    table { border-collapse: separate; border-spacing: 0; }

    caption, th, td { text-align: left; font-weight: normal; }

    blockquote:before, blockquote:after, q:before, q:after { content: ""; }

    blockquote, q { quotes: "" ""; }



Belki burada çok fazla kullanılmaya ihtiyaç duyulmadığı için blockquote ve q taglerinden bahsedebiliriz. Bunların ikiside bu tag'ler arasında yer alan metinlerin alıntı olduğuna belirtir. Değer verilirken;

quotes: bu etiketlerin başlarında ve sonlarına hangi karekterlerin geleceğini belirtir. Çünkü metin alıntı olduğu için bunu çift tırnak, tek tırnak gibi karekterler arasında belirtilmek istenebilir. Bizimde yaptığımız burada bu tag'lerin başına ve sonuna hiçbirşey ekleme demek

content: verildiği çift tırnak değerleri bu iki etiketin öncesinde(before) ve sonrasında(after) hiçbir veri olmasın demektir.

Bu reset.css stil dosyasını kullandığınız harici css'lerinize veya yaptığınız sayfalarınızın içine en başta mutlaka import edin. Emin olun faydasını görüceksiniz
  • Etiketler;
Ertuğrul Haskan
Merhaba, ben Ertuğrul. 1988 İstanbul doğumluyum ve burda yaşıyorum. Front-end Developer olarak çalışıyorum. Kendi blogumda blogger, Sanalkurs'ta yazar oluyorum ve yakın zamanda bir sürpriz daha bekleniyor. Yeni nesil girişimciyim ve freelance web projeleri geliştirmeyi seviyorum.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

normal yerlerde html kodu eklıoz cssde html kodunu nreye eklıoruz bunu bı acıklasana ya
ekledim ama doğru düzgün çalışmadı
yaptım ama bir fark olmadı
Merhaba Css reset kodu cidden önemli birşey ancak şöyle bir dez avantajı var site içerisine editör ile bir içerik ekliyorsa editörde yapmış olduğunuz h1 tagları ve diğer taklar doğru olarak sitede görünmüyor. Tavsiyem css reset kodundan h1 ve editör tarafından kullanılacak tagları kaldırın.
@daredewil1414 başlangıç seviyesindeki css derslerini okumanı tavsiye ederim bu sorunun cevabını oradan bulabilirsin. @Muhammed Emin Şahin doğru çalmaması imkansız bu makaleyi önce bir tekrar okumanı ve başlangıç seviyesindeki css notlarını internetten araştırarak veya çeşitli css kodlarını inceledikten sonra makaleyi tekrar okumanı tavsiye ederim. Şimdi tam olarak neyde nasıl sorunun olduğunu bilmediğim için teknik olarakta yardımcı olamıyorum. @TeknoAhmet reset.css dosyası özetle cross-browser yapmak için oldukça önemli bu noktada tüm tagleri sıfırlamak tüm browserlarda aynı yorum noktasına getirmek gerek bu noktada kullanılması önemli dolayısıyla bunu ekledikten sonra kendi oluşturacağın style.css dosyasına h1 tag'ini istediğin gibi tanımlayabilirsin. Bu oluşturduğun style.css dosyasının başınada reset.css dosyasını import ettikten sonra gerisi sorun değil artık herşey senin elinde.

Yukarı Git