antalya web tasarım

Css de 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.

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