CSS ipuçları - daha küçük CSS dosyaları için
25 Eylül 2007, Salı 1 pm | Yazan : webdr | 40 okunma | | 40 okunmaBu yazıda CSS dosyalarına sihirli bir teknikle ya da bir sıkıştırma yazılımı ile küçültmeyi anlatmayacağım ama CSS dosyalarını olduğundan daha küçük yapmak için güzel bir temizlik yapmanız gerektiğinden ve bu temizliği aşağıdaki sıralanan maddelerle nasıl yapabileceğinizden bahsedeceğim. Neden CSS dosyalarında temizlik yapmak isteyesiniz, ya da kodları neden küçük bir dosya oluşturacak şekilde tekrar düzenleyesiniz? Çünkü bu sitenizin açılma süresini özellikle büyük CSS dosyalarınız varsa önemli ölçüde kısaltacaktır. Belki 2 KB CSS dosyasında bir hız artışı göremeyebilirsiniz ancak daha büyük boyutlardaki CSS dosyalarında yapılan bu temizlikte açılış ya da gezinti hızındaki artışı siz ve kullanıcılarınız fark edecektir.
1-) Yorum alanlarınızı /*—*/ sınırlı ve sade tutmalısınız. Böylece büyük ölçüde boyuttan kazanırsınız. Bugün CSS dosyalarının yorum içermemesi diye bir şey söz konusu değil ancak daha sade anlatımlarla yerden kazanmak aklınızda bulunmalı.
2-) Renklerde düzenleme yapabilirsiniz mesela;
color: #ffffff;
ile
color: #fff;
aynı sonucu verecektir, aklınızda daima bulunsun, bunun gibi bazı renk kodları bulunmaktadır ancak tüm renk kodları bu kurala uymaz, tüm karekterleri farklı olan bir renk kodunda bu kısaltmayı yapamazsınız.
3-) Shorthand Properties denilen pek çok propertynin tek bir satırda kullanılabildiği kodları öğremenizde yarar olduğunu düşünüyorum.
Mesela sadece bu satır
font: italic small-caps bold 100%/120% arial, helvetica, sans-serif;
pek çok satırı içinde barındırır bunlar sırayla,
font-style, font-variant, font-weight, font-size, line-height, ve font-family.
eğer shorthand kullanmasaydık bunun yerine yaklaşık olarak 6 satır daha yazmamız gerekecekti. Emin olun bu shorthand bir karışıklık yaratmaz zaten CSS’den anlayan bir kimse bunları gördüğünde ne yaptığınızı fark edecektir o yüzden shorthand konusuna eğilin çünkü bu shorthand kısaltmalar yani birden çok propertynin bir satırda gösterilmesi belli bir sırayı takip eder mesela font için yukardaki sırayı onaylanmıştır. Bu sıra ile yerleştirdiğinizde tarayıcı otomatik olarak algılayacaktır.
4-) 0px ile 0, aynı şeydir. Eğer 0 piksel yazacaksanız yanında px olarak belirtmenize gerek yok. Buda size kazandıracaktır.
5-) Bu aslında bir ipucu değil CSS ile uğraşanların yapması gerektiğini düşündüğüm bir uygulama. Aynı içeriğe sahip selectorleri bir satırda birbirinde virgül ile ayırarak birleştirebilirsiniz. Mesela
p1{
font-family:sans-serif;
font-size:medium;
font-style: italic
}
p2{
font-family:sans-serif;
font-size:medium;
font-style: italic
}
ise
p1,p2 {
font-family:sans-serif;
font-size:medium;
font-style: italic
}
şeklinde kısaltarak kodun daha bütünleşik olmasını sağlayıp, CSS dosya boyutunu azaltabilirsiniz.
Bu alanda kendimi geliştirdikçe yapacağım ilk şeyin sitenin tasarımına el atmak olacağını bilmenizi isterim, tabi zamanda bir sorun ve uzun bir süre sonra yapmayı planlıyorum bu değişikliği. Bu süre içinde bir siteyi site yapanın içerik olduğu tezim daima geçerliliğini koruyacaktır 
İlaveten;
Bu, bu ve de bu adreslere uğramanızı da öneririm.
Etiketler: css
Bu Yazıyı Paylaşın: Bağcık |Webiket |Oyyla |LinkiBol |Favorri |Tusul |del.icio.us |
