Arayüz kodlayıcılarının bilmesi gereken en faydalı 6 CSS kısaltması

CSS ile kodlama yaparken bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtuluruz, hem de sayfa boyutlarını en aza indirerek performans artışı sağlamış oluruz.

1. Font

font-weight: bold;
font-family: arial, sans-serif;
font-size: 14px;
line-height: 17px;

Kısaltma olarak kullanılan kod ise tek satır:

font: bold 14px/15px arial, sans-serif;

2. Margin ve Padding'ler

Margin ve paddingler de normal tanımlama şöyledir:

margin-top: 15px; 
margin-right: 10px; 
margin-bottom: 5px; 
margin-left: 25px;

kısaltılmış hali:

margin: 15px 10px 5px 25px;

Burada öznitelikler sağdan başlayarak saat yönünde devam eder. Örneğin;

4 Değer: (margin: 15px 10px 5px 25px;) birinci - üst, ikinci - sağ, üçüncü - alt, dördüncü - sol.

3 Değer: (margin: 15px 10px 5px;) birinci - üst, ikinci - sol ve sağ, üçüncü - alt.

2 Değer:(margin: 15px 10px;) birinci - üst ve alt, ikinci - sol ve sağ.

1 Değer: (margin: 15px;) birinci - üst, sağ, alt ve sol

3. Renkler(Hex-decimal)

CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin color: #ffffff; beyaz. Renkler 6 karakterle gösterilse de bir çok renk (web tabanlı) 3 karakterin tekrarlanması ile oluşturulur. Örneğin, siyah'ın hex-decimal kodunu kısaltırsak color: #000;

Örneğin, siyah renk kullanacağınızda, color: black; veya color: #000000; kullanımı önermeyiz. Kısaltılmış olanı color: #000; kullanmanız daha avantajlıdır.

4. Background

Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebiliriz.

background-color: #ddd; 
background-image: url(ornek.jpg);
background-repeat: no-repeat; 
background-attachment: scroll;
background-position: 0px 0px;

Kısaltırsak:

background: { 
    #ddd url(ornek.jpg) no-repeat scroll 0px 0px; 
}

5. Listeler

Liste tanımlamalarında da kısaltmalar mümkündür

ul { 
    list-style-type:disc; 
    list-style-position:outside;
    list-style-image:url(ornek.png); 
}

Kısaltırsak;

ul li { 
    list-style:disc outside url(ornek.png); 
} 

6. Border

Kenarlık tanımlamalarında her özellik için bir tanımlama yapılır. Örnek olarak bir elementin alt kenarına atama yapmak için:

border-top-width: 1px; 
border-top-style: solid;
border-top-color: #000;

Kısaltırsak:

border-top: 1px solid #000;

Bu özellikleri tüm kenarlara uygulamak için:

border: 1px solid #000;