bildirgec.org - etiketler: ie netrenderer

Kendi reset.css'inizi oluşturun

Nodtveidt — Thu, 25 Jun 2009 08:35:00 GMT

CSS'e yeni başlayanlar reset.css dosyasının önemini tam olarak kavrayamamış olabilirler. Herbir tarayıcı (browser)'nın kendi "default" (varsayılan) netrenderer'ı olduğunu öğrenmeden önce kendisini "buradaki boşlukta neyin nesi ?" gibi sorularla boğuşurken bulacaktır. Bunu gibi baş ağrılarından kurtulmak için kendi reset.css dosyanızı yazmanız gerekir. Reset.css dosyasını kendiniz yazmasanız da
buradan(YUI), buradan(Eric Meyer) ve buradan(David Walsh) bulabilirsiniz.

Kendi reset.css dosyasını yazmak isteyenlerle devam edelim.

1.Adım: Margin ve Padding'leri Sıfırlayalım

Varsayılan ayar olarak tarayıcılar sayfalarınıza margin'ler ve padding'ler ekleyecektir. Örneğin tarayıcıların çoğu body elementine 6px'lik bir margin değeri verir, bunu farkettiğinizde

body {margin-top:0;}

özelliğini eklemek isteyeceksiniz. Fakat bunları eklemek yerine browser'ların kendi kendine verdiği marginleri ve paddingleri sıfırlamak daha doğru olacaktır.

İlk olarak yapmanız gereken yeni bir css dosyası oluşturmak ve adını reset.css yaptıktan sonra sayfamızın kök dizinine kaydetmek. Css dosyamızı oluşturduktan sonra geçerli HTML sayfamızın

<head> </head>

tag'leri arasına reset.css dosyasını şu şekilde iliştiriyoruz:

<link href="reset.css" rel="stylesheet" type="text/css" />

CSS dosyamızı html'e ekledikten sonra tekrar reset.css dosyamıza gelerek genel kullanımı olan elementlerin margin ve padding değerlerini sıfırlayan kodumuzu yazıyoruz.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

2.Adım: Elementlerinizi Kontrol Altına Alın

Heading elementlerinin font boyutları eşitleyen bir css kodu olmadan kullanıldığında tarayıcıdan tarayıcıya değişiklik gösterecektir. Varsayılan font boyutunu %100'e getirdiğinizde bu değişimlerin önüne geçebilirsiniz.

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}

Ve sonra elementlerimizin margin, padding ve satır arası boşluklarını yineleyelim. Aynı zamanda listeleme elementlerinin listeleme tipinide "none" yapmak işinize yarayacaktır.

body
{
line-height: 1;
font-size: 88%;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

img
{
border: 0;
}

3.Adım: Genişlemeler

Aslında reset.css inizde olmazsa olmazlardan birisi değil ama olmasında yarar görüyorum. Float veriğiniz elementlerinizde örneğin bir resim dosyası için kullandığınızda yazılar resmin hemen bitişiğinde değilde 0.5em uzağında durması görsellik açısından iyi olacaktır. İstemeyen kullanmayabilir.

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}
.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

İşte reset.css Dosyamızın Son Hali:

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}
body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

Son olarak, reset.css dosyasını tüm web sitelerinizde kullanmanın birçok faydası olacaktır. Bundan sonra size kalan reset.css dosyanızını satırlarını artırmak ne kadar çok element için belirli bir varsayılan değer kullanırsanız sitenizin tasarımı üzerinde o kadar çok hakimiyetiniz olur.

Mesela sayfanızda verilen tüm linkler için genel bir değer kullanmak isteyebilirsiniz veya

(paragraf) taginizin sitedeki yazılardan farkı görüntülenmesini istiyorsanız

için farklı değer kullanabilirsiniz.

100 % tamamlanmış bir reset.css dosyası istiyorsanız Eric Meyer'in "Reset CSS Dosyasını" kesinlikle öneririm.

ilgili yazılar

Bu yazı Nodtveidt tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web tasarımcılar için 10 firefox eklentisi

AntiHumanIST — Wed, 02 Jul 2008 17:27:00 GMT

firefox'a eklenti kurmak sanırım her web tasarımcının yaptığı birşey. özellikle kimi eklentiler hayat kurtarır nitelikte zaman kazandırıp işleri kolaylaştırıyor. benim gibi acemilerine bile kod sisteminin içinde kulaç atmayı öğreten eklentileri bir web tasarımcının kullanması gerekenler olarak sıralamışlar.

Web Developer Toolbar | detay

çeşitli kısayollarda kaynak kodlara ulaşmanızı sağlayan küçük bir toolbar eklentisi

FireFTP | detay

internete dosyalarınızı yüklerken yeni bir program açmak yerine işleri basitçe halledebileceğiniz bir ftp eklentisi

Firebug | detay

işte firefoxun belki de en beğendiğim fantastik eklentisi. gerçek zamanlı düzenlemeler yapabileceğiniz, CSS, HTML ve JavaScript kodlarını incelemenize olanak tanıyan, hataları gözler önüne seren, kısaca sitenin röntgenini çeken süper ötesi bir eklenti.

Screengrab | detay

web sitelerinin tam ekran görüntüsünü almak bazen işkenceye dönüşebilir. işte bu eklentiyle bu işi en kolayından halledebiliyorsunuz.

CSS Viewer | deta

çok faydalı bir css görüntüleyici olan bu eklenti ile, css i öğrenmeniz kolaylaşabilir.

IE NetRenderer | detay

tasarımlarınızı firefox ta hazırlıyorsanız, browser uyumluluğunu göz ardı etmemek için IE 5.5, 6, 7 ve Beta 8 de sitenizin nasıl göründüğünü bu eklenti sayesinde kolayca görebilirsiniz.

Window Resizer | detay

web tasarımlarınızı yaptığınız çözünürlük dışında 640×480, 800×600, 1024×768, 1280×1024 ve 1600×1200 çözünürlükte de görmek isterseniz bu eklentiyi arıyorsunuz.

Dummy Ipsum | detay

hazır templateler hazırlayan bir tasarımcı iseniz sizin için rastgele yazılar hazırlayan bir eklenti.

Font Finder | detay

bu da seçtiğiniz metinin bütün bilgilerini sizinle paylaşan güzel bir eklenti.

Offline Page Validator | detay

sayfanızı tek tıkla W3C validator e gonderebileceğiniz sizi rahatlatan bir uygulama.

yazının orjinali için şöyle buyrun.

Bu yazı AntiHumanIST tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web sitenizi test etmek için araçlar

ErrorLog — Sat, 05 Apr 2008 12:40:00 GMT

Hepimiz sitemizin bir yerlerinde değişiklik yapmış ve bunu bir IE bir de Firefox'da test etmişizdir. şimdi sizlere sitelerimizi online olarak test edebileceğimiz bazı servislerden bahsedeceğim.

BrowserShots bizlere sitemizi farklı işletim sistemlerinden farklı internet tarayıcılarından sitelerimizi görüntüleme ve test etme imkanı sunuyor.

BrowserShots

IE NetRenderer , BrowserShots'a benzer bir site fakat sadece bizlere sitelerimizi farklı tarayıcılardan gösterme hizmeti veriyor.

IE NetRenderer

BrowsrCamp, sitelerimizin önizlemesini detaylı bir şekilde alma ve yine browsershats gibi bir hizmet vermektedir.

BrowsrCamp

Total Validator, tam doğrulayıcı bir araç web sitenizdeki kırık linkleri, ulaşabilirlikleri, html hatalarını vs.her şeyi bulur sizlere hızlı bir şekilde sunar ve düzenlemenizi sağlar.

Total Validator

Bu yazı ErrorLog tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage