Kısa süre önce Michael Dell’den, ve onu liderliğe taşıyan birkaç özelliğinden bahsetmiştim. Mustafa Özel’in ‘Evet, velet Dell henüz 8 yaşındayken 9 yılını aradan çıkarmak istiyordu’ cümlesiyle anlattığı bir felsefesi daha var ki, Dell’in bu günlere şans eseri gelmediğini adeta kanıtlıyor.

Michael Dell 8 yaşındayken bir derginin arka kapağında gördüğü ‘Tek sınavla lise diploması’ ilanına hemen başvurur. Başvurusunu onaylamak için evine gelen bir kadını karşılayan annesi, oğlunun banyoda olduğu söyler, neler döndüğünü anlamakta da gecikmez. Daha sonra kadının karşısına kırmızı bornozlu, sekiz yaşındaki Dell çıkar.

Dell bu başvurusunu ‘Tek bir basit sınav karşılığında okulun 9 yılını atlamak bana gayet iyi bir fikir gibi gelmişti’ cümlesiyle açıklarken, şu an belki de önünüzde duran mönitördeki ‘Dell’ yazısının oluşması için belki de ilk adımlarını farketmeden atıyordu.

Aslında size de gayet mantıklı geldi değil mi? Dell’in o cesareti kendisinde bulup, hiçbir bilgisi olmadan o sınav ile diploma almak istemesi, kendi deyimiyle ‘gereksiz şeylerin ortadan kaldırılması’ oldukça iyi bir fikir. Kendimizce Dell’e benzemek, onun gibi gereksiz adımları kaldırmak için gidip dergilerin arka kapaklarında ‘tek sınavla lise diploması’ ilanları aramamıza gerek yok. İşimizde web tasarımcılığı olduğuna göre ‘Tuzu Migros’tan alacağınıza en yakın bakkaldan alın’ veya ‘Ekmeği üç lokmada yiyeceğinize iki lokmada yiyerek zaman kazanın’ da demeyeceğimize göre, sanırım yavaş yavaş konuya girebiliriz.

- Öfff, yine mi CSS? -

Dell: Gereksiz adımları ortadan kaldırın!

CSS’in tasarımcılara sağladığı güzellikler sadece yararlı özelliklerde kalmıyor, ayrıca bu listeye kolay kodlama, ve bununla birlikte gelen ‘gereksiz adımları ortadan kaldırma’ da eklenebiliyor. Daha önceki bir yazıda, css’de aynı özellikleri barındıran elementleri gruplayabileceğimizden bahsetmiştim (Bkz. ‘Bahar temizliğine ne dersiniz?‘ Asıl konuya girmeden önce, gruplama işlemine basitçe dönüp, bildiklerimizi pekiştirelim;

Şöyle ki, aynı özellikleri barındıran elementleri çift kez yazmaktansa virgül (,) kullanarak, bu elementlerin özelliklerini tek satırda belirtebiliyorduk;

Yanlış (veya iyi değil);

Doğru (veya daha iyi);

Bir de, yine gruplama işlemi var ki, birkaç özelliklerin iç özelliklerini (evet anlamadınız biliyorum, fakat bu Türkçe ile benden ancak bu kadarı geliyor. En iyisi örnekle pekiştirelim.) gruplayabiliyoruz. Daha önce büyük ihtimalle karşılaşmış olduğunuz bu özelliği örnekte de gördüğüzde ‘Aa, ben bunu biliyorum’ diyeceksiniz.

Let’s go baby!

İsterseniz küçük bir metin stili ile başlayalım. Sıra dışı olmayan, minik bir stil oluşturalım;

1

.metinstil { font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma; font-size:12px; font-variant:small-caps; font-style:italic; }

font-family: Kullanıcıya metnin yazı tipini seçme imkanı veriyor.
font-size: Kullanıcıya metnin büyüklüğünü belirleme imkanı veriyor.
font-variant: Kullanıcıya harf türünü seçme imkanı veriyor (Büyük harfler, küçük harfler, vs)
font-style: Kullanıcıya metnin stilini belirleme imkanı veriyor (Eğik yazı, kalın yazı vs)

Her ne kadar stilimiz şu an hoş görünse de, kodlama olarak çok daha ‘hoş’ duruma getirilebilir durumda. Zira W3C bu durumu da düşünüp, tüm özellikleri tek bir elemente vermeyi, bu örnekte ‘font’ elementine sığdırmayı mümkün kılmış;

1

font: font-style font-variant font-weight font-size/line-height font-family;

Yukarıda biraz karışık görünen kod, aslında çok kolay anlaşılabilir durumda;

1

.metinstil { font: italic small-caps 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma; }

Gördüğünüz gibi, metinstil stiline verdiğimiz tüm özellikleri tek bir element altında toplamayı başardık.

Büyük kolaylık getiren bu gruplama özelliğini, birçok css özelliği üzerinde kullanabiliriz;

1
2

.arkaplan { background-image:url(resim.gif); background-repeat:no-repeat; background-position:bottom; }
.arkaplan { background:url(resim.gif) no-repeat bottom; }

1
2

.kenarlik { border-width:1px; border-style:solid; border-color:#000; }
.kenarlik { border:1px solid #000; }

Bu örnekleri artirmaniz, ve daha geniş bilgiyi W3Schools üzerinde bulmanız mümkün.

Etiketler: css, xhtml, İpucu