Eğer tasarımlarınızda tablo kullanmıyorsanız sitenizin herhangi bir bölümü ziyaret edildiğinde internet tarayıcısı css dosyanıza/kodlarınıza mutlaka başvuracaktır. Demek istediğim tasarımınızın altyapısında en sık başvurulan bölüm css kodlarınızdır. Dolayısıyla bu bölümü mümkün olabildiğince ekonomik kullanmak hem sunucu bant kullanımınızı az da olsa hafifletecek hem de ziyaretçilerinizin sitenize ulaşma süresini asgariye indirecektir.

Aslında bu konuya “Site Açılma Süresini Kısaltmak” başlıklı yazıda değinmeye çalışmıştım. Bu yazıda da biraz daha detaylandırmaya ve daha farklı ipuçları veremeye çalışacağım.

Gereksiz anlatımlar

Css kodlarınızda bazı bölümlerin başlangıç ve bitimlerine dikkat çekmek amacıyla ilgili bölümler;

/*----------------------*/
/*-----Yan menu basla-----*/
/*----------------------*/
...kodlar...
/*----------------------*/
/*-----Yan menu bitir-----*/
/*----------------------*/

şeklinde yazılmış olabilir. Aslına bakarsanız bu şekilde yazımın tasarıma hiçbir etkisi yoktur. Yalnızca daha anlaşılır olmak için böyle bir yol seçilebilir. Bu kodaları kısaltırken;

/*Yan menu basla*/
...kodlar...
/*Yan menu bitir*/

gibi bir yazım şekli yapabilirsiniz. Her iki biçim de aynı şeyi ifade etmektedir. Ancak dediğim gibi dilerseniz hiç kullanmayabilirsiniz de.

Yazı tipleri ve boyutları

Sitenizin farklı bölümlerinde, farklı yazım biçimlerini kullanma ihtiyacı duyabilirsiniz. Örnek verecek olursak;

yanmenu {
font-weight: bold;
font-family: verdana, arial;
font-size: 12px;
line-height: 18px;
}

gibi basit bir kodlamada birden fazla komutu yazdık. Bu tarz bir kodlamayı kısaltırken;

yanmenu {font: bold 12px/18px verdana, arial;}

yazmamız yeterli olacaktır. Görüldüğü gibi hem yazı kalınlığını, hem yazı tipini, hem de yazı boyutu ve satır yüksekliğini tek bir satıra indirgemiş olduk.

Renklendirme

Bildiğiniz gibi standart renk kodları;

color: #ffffff;
background: #000000;

şeklinde gösterilir. Bu 6 haneli yazımı 3 haneye düşürebilirsiniz. Yani;

color: #fff;
background: #000;

gibi. Burada yapılan kısaltma işlemini birazdan vereceğim araçlar ile gerçekleştirebilirsiniz. Çünkü bana bazen matematik problemi çözmek gibi geliyor.

Çerçeveler (Border)

Tasarımınızda bazı bölümleri çeşitli çerçeve biçimleri içine alabilirsiniz. Burada da kısaltma işlemi gerçekleştirebilirsiniz. Uzun bir kod;

border-top-width: 3px;
border-top-style: dotted;
border-top-color: #dddddd;

gibi olabilir. Biz burada çerçevenin üst çizgisi için kalınlık, stil ve renk değerlerini vermiş olduk. Bunu şu şekilde kısaltabiliriz;

border-top: 3px dotted #ddd;

Görüldüğü gibi 3 satırlık kodu tek bir satıra indirebildik. Yine çerçeve bölümünde yapabileceğiniz bir kısaltma şu şekilde olabilir;

border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;

Burada ilgili bölümün tamamını çerçeveye aldık. Kısa yazım;

border:1px solid #000;

Yani çerçevenin her kenarı için aynı değeri tekrar tekrar yazmaktansa genel bir değer biçmiş olduk.

Margin ve Padding

Az önce çerçeve bölümünde gerçekleştirdiğimiz kısaltma işlemini margin ve padding değerlerini verirken de uygulayabiliriz. Uzun bir koda örnek;

margin-top: 20px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 5px;

Bu yazımda her yön için değerler 4 satırda yazılmış. Farklı değerler olsa da bunları tek bir satırda şu şekilde birleştirebiliriz;

margin: 20px 15px 20px 5px;

Bir de ayrı ayrı şöyle bir yazım biçimi olabilir;

padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;

Bunu kısaltmak için de kullanacağımız kod;

padding:0 10px;

Burada gerçekleştirdiğimiz kısaltma işlemini biraz daha açıklayalım. Tek satır olarak yazdığımız her 4 değer girintinin yapılacağı bir yönü ifade etmektedir. Örnekteki ikili değerde “0″ olan ilki alt ve üstü, “10″ olan ise sağ ve solu ifade eder.

Eğer;

margin: 20px 15px 10px;

Yazarsak “20″ ile üstü, “15″ ile hem sağı hem solu, “10″ ile de altı belirtiriz. Bir diğer biçim;

margin: 20px;

Burada da her yön için “20″ değerini vermiş olduk. Bir küçük ipucu da “0″ olan değerlerin ardından “px” (piksel) yazmanıza gerek yok.

Aynı özelliklere sahip bağımsız bölümler

Konuyu hemen örneklendirelim;

a:link {
color:#000;
text-decoration:underline;
}
a:visited {
color:#000;
text-decoration:underline;
}

Görüldüğü gibi sitemizdeki bağlantıları biçimlendirdik. Ancak hem normal bir bağlantının, hem de aynı ziyaretçinin daha önce kullandığı bir bağlantının aynı biçime sahip olması rağmen farklı iki bölüm olarak yazdık. Kodları şu şekilde kısaltabiliriz;

a:link, a:visited {
color:#000;
text-decoration:underline;
}

Aynı biçimlerdeki farklı bölümleri bu şekilde araya virgül koyarak tek bir seferde yazmamız mümkün.

Tek satır, birden fazla satır

Kodlarınızı tek satırda toplamak belki durumu biraz zor anlaşılır yapıyor ancak bu yolla da tasarruf edebilirsiniz. Yani;

bolum {
margin: 10px 0;
float: left;
}

Kodunu

bolum {margin:10px 0;float:left;}

Şeklinde yazmanız mümkün. Ancak dediğim gibi görünüm açısından biraz karışık durabilir.

Bu işlemler elbette çok büyük kazanımlar değil ancak kodlarınız için gerçekten faydalı. Birkaç kilobaytlık dosyalarda kısaltma yapmak pek göze görünmese de 20-25 kilobaytlık kodlarda yapacağınız kısaltmalar olumlu şekilde size geri dönecektir.

Css kısaltma araçları

Buraya kadar olan bölümde kodlarınızda kısaltma yapabileceğiniz kimi noktaları ele almalaya çalıştım. Şimdi de kodlarınızı otomatik olarak kısaltan kimi araçları veremeye çalışacağım. Bu araçlar, sizin belirleyeceğiniz kıstaslar ile (yukarıda birçoğuna değindik) kodlarınızda kısaltma yapmanıza olanak veriyor. Ancak kısaltmayı yapmdan önce kodlarınızı bir kenara kaydetmenizi tavsiye ederim. Yeni kodlarla yapacağınız önizlemelerde problem çıkması halinde kaynak kodunuzu sorunlu bölümlerde kullanabilirsiniz. Ayrıca css kodlarınızın boyutunu da not etmeyi unutmayın. Çünkü bazı durumlarda optimize edilmiş kodlar orijinal kodlarınızdan daha uzun olabiliyor. Örneğin ben oldukça kısa yazmışım ki bu araçların bazılarını denediğimde kod boyutunda artış oldu. İşte araçlar;

• Arantius CSS Compressor
• Pingates Compressing CSS
• CSS Optimiser
• Icey CSS Compressor
• Flumpcakes CSS Optimiser
• Clean CSS
• CSS Drive CSS Compressor