1.346 kez okundu

Css de Reset.css stil dosyası oluşturma

10 10 1.346 kez okundu incelendi

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.

http://resim.sanalkurs.net/uploads/cross_browser.jpg

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

Paylaş !

Yoruma kapali.

Önceki yazıyı okuyun:
Css de metinlere stroke ve yansıma efekti uygulama

Css 3 ile gelen yeni özelliklerden biriside metinlerimize stroke (kenarlık) renkleri atayabiliriz. Kullanılabilecek yerlere en güzel örnek , web sayfanız...

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter