Bilmemek Değil Öğrenmemek Ayıp
Yazar: Volkan Görgülü | Yayın Tarihi:
20 Eylül 2008 | Yorumlar:
21 Yorum
Kategori: CSS & XHTML
Arkadaşlar Serkan Alp ve Burak’ın katkıları ile sizlere kısa bir bilgi aktarmak istiyorum.
Örneğin deneme id’sine sahip bir div’in içindeki başlık etiketlerini hedef almak için
1 2 3 4 | #deneme h1, #deneme h2, #deneme h3, #deneme h4 { color:#e6e6e6; font-size:24px; } |
kodunu kullanıyoruz, aşağıdaki kodu kullandığımız zaman ise
1 2 3 4 | #deneme h1, h2, h3, h4 { color:#e6e6e6; font-size:24px; } |
tamam #deneme h1, deneme id’sine sahip div’in içindeki h1 etiketine tekabül ediyor ama diğer h2, h3 ve h4′ler sayfanın geneline tekabul ediyor.
Dolayısıyla
Sayfa genelinde yapmak istediğim tanımlamalarda
1 | h1, h2, h3, h4 {} |
Şeklinde kullanımlar yapabiliriz, ama eğer sadece bir div’e özel tanımlamalar yapmak istiyorsak.
1 | #deneme h1, #deneme h2, #deneme h3, #deneme h4 {} |
Şeklinde kullanmak daha doğru olacaktır.
Daha Ucuza Mal Etmek
Arkadaşlar CSS kısayollarını kullanarak sanki bir ürünü çok daha ucuza mal ediyormuşum gibi geliyor bana ve mutlu oluyorum, şöyle düşünün bir telefon üreteceksiniz telefonu üretmenin maliyeti size 20 YTL ise bir anda bu üretimin maliyeti 10 YTL’ye düşüyor.
Burada para mecazı ile aslında dosya boyutundan bahsediyorum, CSS dosyamızın boyutu ne kadar düşük olursa, CSS dosyamız o kadar hızlı yüklenecektir.
CSS dosyamızın boyutunuda kısayolları bilerek ve kullanarak, düşürebiliriz.
Serkan Alp‘e ve Burak’a katkıları için tekrar çok teşekkür ederim.
Başka bir paylaşımımı inceleyebilirsiniz
Düşüncelerinizi duymaya ihtiyacım var!
Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.
Yazıya Gelen Yorumlar
1
Karbonizma
20 Eylül 2008´de söylemiş
Bu güzel paylaşım çok için teşekkürler.
2
müJdaT
20 Eylül 2008´de söylemiş
Yararlı bir paylaşım olmuş doğrusu. Bu tarz kısaltmalar css dosyamızın boyutunu azaltarak yükleme hızını artırabilir.
3
Volkan Görgülü
20 Eylül 2008´de söylemiş
@Karbonizma, teşekkürler
@müJdaT, teşekkürler aradığım bir cümleyi sen söyledin, “yükleme hızını arttırabilir”, ben de yazıyı güncelledim.
4
Uğur ÇELENK
20 Eylül 2008´de söylemiş
CSS optimizasyonu adına başka bir teknikten de ben bahsediyim.
@variables {
bc: #EDEDED;
}
#deneme {
background-color: var(bc);
}
Sürekli kullandığınız seçicileri yukarıda variable olarak tanımlayıp, istediğiniz yerde var(DEGISKEN_ISMI) şeklinde çağırabilirsiniz.
5
Burak
20 Eylül 2008´de söylemiş
#deneme h1, h2, h3, h4 {
color:#e6e6e6;
font-size:24px;
}
şeklindeki kullanılırsa, sadece deneme id’sine sahip değil tüm h2, h3 ve h4 etkiletlerini etkiler.
Sadece ve sadece deneme div’inin içerisindekilere etki etmek için “#deneme h1, #deneme h2, #deneme h3, #deneme h4 ” şeklinde kullanmak doğru olacaktır.
6
Volkan Görgülü
20 Eylül 2008´de söylemiş
@Uğur ÇELENK, çok teşekkürler paylaşımın için açıkçası hiç rastlamamıştım böyle bir kullanıma, ama etkili kullanımlar yapılabilir gibi duruyor.
@Burak, çok teşekkürler, yorumun üzerine tüm yazıyı tekrar düzenledim
7
Cihan ÖNER
20 Eylül 2008´de söylemiş
Doğru! bilmemek değil öğrenmemek ayıp.
Basit ama etkili bir bilgi olmuş.
Teşekkür ederiz Volkan GÖRGÜLÜ & Serkan ALP : )
8
Salih S. DEMİR
20 Eylül 2008´de söylemiş
@variables olayını anlamadım bir örnekle anlatabilir misiniz?
9
Burak
20 Eylül 2008´de söylemiş
CSS değişkenleri kullanmak gerçekten çok pratik. Ancak hangi tarayıcılar tarafından desteklendiğini konusundan emin değilim.
CSS içerisinde değişken kullanmak için PHP gibi sunucu taraflı bir dile ile CSS dosya oluşturulabilir.
Örneğin dosya uzantısı .php olarak değiştirilip;
şeklinde kullanılırsa dosya PHP tarafından yorumlanabilir olacaktır. CSS dosyanın içerisinde PHP değişkenleri tanımlanır. Böylece PHP içerisinden stillere müdahele edilebilir.
10
Burak
20 Eylül 2008´de söylemiş
Önceki yorumumda dikkatsizliğim yüzünden etiketler çıkmamış
link href=”stil.css” rel=”stylesheet” type=”text/css”
şeklinde kullanmak yerine
link href=”stil.php” rel=”stylesheet” type=”text/css”
kullanarak PHP ile CSS içerisinde değişken kullanılabilir.
11
hakan yamanoglu
20 Eylül 2008´de söylemiş
CSS de bu şekilde kısaltmalar kullanmak hayati önem taşıyor. Kendi CSS dosyamın nasıl hantallaştığını ve nasıl kaynak tükettiğini görseniz şaşırırsınız
Teşekkürler Volkan.
12
Uğur Samsa
21 Eylül 2008´de söylemiş
Ben de sana teşekkür ederim. Yardımcı olan arkadaşlara da tabi. Faydalı bir bilgi.
13
Furkan Turan
21 Eylül 2008´de söylemiş
CSS dosyasının boyutunu küçültmek demişken: CSS sıkıştırma uygulamalarını önerir misiniz?
Dosyanın içindeki tüm boşlukları kaldırıp, insanlar için anlaşılmaz hale sokuyorlar ama yine de yararlı olur mu sizce?
14
TheTennische
21 Eylül 2008´de söylemiş
Teşekkürler Volkan Bey. Elinize sağlık
15
Uğur ÇELENK
21 Eylül 2008´de söylemiş
@Furkan Turan,
CSS sıkıştırma uygulamalarının yaptığı iş aslında, yukarıda ki gibi benzer seçicilere sahip olanları gruplamak ve boşlukları silmek oluyor. Ben genelde siteyi publish ederken css ve javascript dosyalarının sıkıştırılmış halleriyle birlikte publish ediyorum ama proje üzerinde çalışırken sıkıştırılmamış halini kullanıyorum yine. Boyut olarak büyük oranlar olmasa da bir azalma oluyor, bunu da kar olarak görmek lazım.
16
Eray Usta
22 Eylül 2008´de söylemiş
Volkan öncelikle merhaba nedendir bilmiyorum ama yorumlarımı göremiyorum bir sorun var sanırım bilgilendirirsen sevinirim teşekkürler
17
Serkan Alp
22 Eylül 2008´de söylemiş
Volkan paylaşımında para konusunu mecaz olarak kulanmış ama ziyaretçi ve sayfa sayısı çok yüksek olan projelerde bu tür optimizasyon teknikleri sunucu tarafındaki yükü azalttığı için hosting şirketlerine trafik için ödenen paralarda ciddi tasarruflar oluşturabiliyor.
18
TheTennische
22 Eylül 2008´de söylemiş
@Eray Usta yorumunuz onaylanmamış olabilir.
19
fatihturan
04 Ekim 2008´de söylemiş
Güzel bir ipucu fakat Max Design‘daki sunumu okurken burada bahsettiğiniz kısaltmanın hatalı olduğundan bahsediyordu. Aşağıda da ilgili açıklamayı yazdım (umarım düzgün görüntülenir):
Merak ettiğim birşey var. Bu ipucu bütün tarayıcılarda sorunsuz çalışıyor mu? Deneyen oldu mu?
20
Yakotech
31 Ekim 2008´de söylemiş
Okunmamış makale her zaman için yeni bir hatta yepyeni bir makaledir.Tebrikler ve ayrıca Teşekkürler.
21
Apollonius
03 Nisan 2010´de söylemiş
“@variable” konusunda söylemek istediğim bir husus var.
background-color: var(bc);
yazmak ile
background-color: #EDEDED;
yazmak arasında hiç bir fark yok (boyut olarak);
Baştaki @variable tanımlaması da cabası oluyor ayrıca oradan oraya yönlendirme de mantıklı değil. Ayrıca doğrudan rengi okuması varken değişkene yönlendirmek mantıksız, yani kullanmamak daha mantıklı.
Belki daha karmaşık konularda kullanılabilir fakat verilen örneğe göre çok gereksiz gözüküyor.