Muhtemelen Kullanmadığımız 9 adet CSS kolaylığı

Posted: June 11th, 2010 | Author: B | Filed under: CSS | Tags: , , , | No Comments »

1. FONT için kısayol

Font ile ilgli tanımlamaları yaparken muhtemelen kullanım şeklimiz:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

Oysa tüm bu satırları kısaca:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

şeklinde de tanımlayabiliriz. Tek dikkat ememiz gereken, en son boyut ve font ismini yazmamız. Aksi takdirde tek satırda tanımlama çalışmayacaktır.

2. Tek Etiket 2 Class

Genellikle stil özellikleri tek bir sınıfın içinde tanımlanır ve bu stil sınıf ları ilgili etiketlere verilerek kullanılır. Oysabir etikete birden çok stil sınıfı ekleyebilirsiniz.

<p class=”text side warningColor”>…</p>

Burada olduğu gibi bir “p” etiketine 3 farklı sınıf tanımlanabilir. Bu stil sınıflarında birbiri ile çakışan tanımlamaların CSS dosyasında en altta olan(yani en son okunan) tanımlar geçerli olacaktır.

3. Varsayılan olarak kullanılan çerçeveyi tekrar tanımlamamak.

Border:3px solid #000; şeklinde yaptığımız bir tanımlama yerine border:solid yazmamız aynı etkiyi verecektir. Çünkü çerçevenin varsayılan (default) kalınlığı 3px ve rengi siyahtır.

4. Yazıcı ayarları için CSS tanımlama

Birçok web sayfası sayfaların yazıcıdan kolaylıkla çıktısının alınabilmesi için printer-friendly bağlantılarıyla çalıştırdıkları kodlar yazarlar. Oysa bu işlemin yerine ikinci bir CSS dosyası kullanmak çok daha basit ve hızlı bir çözümdür.

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

Yukarıdaki gibi bir tanımlama ile mecra (media) ya göre CSS dosyası adresleri verilebilir. İlk satır ekran, ikinci satır yazıcı medyasında kullanılacak olan stil dosyalarını adreslemektedir.

Bundan sonra yapılacak olan tek şey, çıktı alınan dosyada, menü, dekoratif amaçlı görseller gibi öğelerin görünürlüğünü display:none ile saklamak olacaktır. Böylece ekranda görünüp, çıktıda gerek duymadığınız bölümleri iptal etmiş olursunuz.

5. Metinleri imaj ile değiştirmek

En genel kural, görsel yerine metinleri kullanmaktır. Bu hem sayfanın yükünü düşürecek, hem arama motorlarının ve ekran okuyucularının sayfa üzerinde doğru çalışmasını sağlayacaktır. Ayrıca sayfanızda kullanmak için yanıp tutuştuğunuz fontun kullanıcılarda olmaması yüzünden doğru görünmemesi de önemli risklerdendir.

Diyelim ki her sayfa da beğendiğiniz font ile İSMİNİZİN yer almasını istiyorsunuz. <h1><img src=”ismim.png”/></h1>şeklinde yaptığınız tanımlama sizi görsel açıdan hedefinize götürür elbet. Ancak yukarıda bahsettiğimiz gibi arama motorları ve ekran okuyucuları için bu kullanım şekli hiçbirşey ifade etmeyecektir.

Bu durumda ilgili imajı fon olarak kullanıp, arama motorlarının ve ekran okuyucularının işine yarayacak metni de yazarız.

<h1>BARIŞ ÖZTEKİN</h1>

h1

{
background: url(widget-image.gif) no-repeat;
height: görselin yüksekliği;
text-indent: -2000px
}

6. CSS box model için alternatif hack yöntemi

Her nekadar Microsoft IE6 dan desteğini çektiğini açıklamış olsa da, Windows işletim sistemleri ile birlikte gelen IE6 birçok kullanıcının hala varsayılan tarayıcısı durumunda. Hal böyle iken, standartlara uygun yapılan XHTML ve CSS kodlamaları için bir de IE6 stilleri tanımlamak zorunda kalıyoruz.

Örneğin:

#box
{
width: 100px;
border: 5px;
padding: 20px
}

<div id="box">...</div>

Bu div etiketi IE için ile oluşturulan kutu genişliğinin 150px olması anlamına geliyor. 100px genişlik + 10px iki yandaki çerçeve + 20′şerden 40px de yine iki taraftan padding.

Ufak bir ekleme ile tüm tarayıcılarda aynı görünecek kutu modelimiz için stil tanımımızı:

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

şeklinde ve XHTML kodlamamız da

<div id="box"><div>...</div></div>

olarak değiştirmemiz mükemmel sonuç sağlayacaktır.

7. Yatay Ortalanmış Blok

<div id=”content”>…</content> şeklinde içeriğimizin yer aldığı XHTML elemanını sayfa içinde yatay ortalamak için

#content
{
width:960px;
margin:0 auto;
}

bizi, istediğimiz sonuca ulaştıracaktır.

8. Dikey ortalanmış elemanlar

Tabloları dikey olarak ortalamak gerçekten sıkıntılı bir iştir. Hücre içi elemanları ortalamak için vertical-align:middle tanımlaması yaparız. Ancak bu bizi sonuca götürmez ve metinler bulundukları hücre içlerinde yine kendilerini yukarıya yaklaştırırlar.

Bu durumda hücre yüksekliği ile satır yüksekliğini aynı değerde vermemiz sorunumuzu çözecektir.

#box{height:2em; line-height:2em}

9. Elemanları istediğimiz yere yerleştirelim

CSS’in en güzel yanlarından biri de şüpesiz ki dilediğimiz HTML elemanını ekran da istediğimiz yere yerleştirmek. En güzeli ise bir container içindeki elemanları container içinde istediğimiz gibi yerleştirip, container ı istediğimiz şekilde kullanmaktır. Bunu yapmak için

#container

{
position: relative
}

tanımlamasını yapmalıyız ki, içine aldığı elemanlar bu container’a göre davransın… Bu durumda:

<div id="container"><div id="navigation">...</div></div>

şeklinde yapacağımız bir kodlamanın ardından #navigation’ı #container içinde istediğimiz gibi yerleştirebiliriz.

#navigation
{
position: absolute;
left: 30px;
top: 5px
}

Leave a Reply