‘Etkinlik’ etiketi için sonuçlar

!important Tanımı

Ekim 14th, 2010 • 6 yorum CSS, XHTML
Etiketler: , , ,

Friendfeed’de bir serzenişim üzerine Fatih Turan’ın bir cevabı hafızamdaki !important bilgilerimin yeterli olmadığını gösterdi bana ve bu konuda biraz araştırma yapma gereği duydum ve burada bu araştırma sonuçlarını paylaşmak istedim.

!important’ı anlamak için CSS’de etkinliğine bir göz atmalıyız. Daha önce yazdığım bir konu bu “CSS’de Tanımlamalar ve Etkinlikleri(Specificity)” ayrıntılarını bu yazıdan okuyabilirsiniz. CSS’de etkinlik tanımını tekrar hatırlatalım; CSS’de etkinliğin anlamı stil çatışması(aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir. Her css tanımını bir sayısal değeri vardı ve benzer tanımların yapıldığı bir elemanda bu sayısal değeri büyük olan tanımı elemana etki edecektir.

Peki, biz sayısal değeri küçük olan tanımın etkin olmasını istersek ne yapabiliriz? Bu sorunun cevabı ve bu ihtiyacı karşılayan tanım !important tanımıdır. Bir örnekle durumu gösterelim

<ul class="menu">
    <li>Menü 1</li>
    <li>Menü 2</li>
    <li>Menü 3
        <ul>
          <li class="deneme">Alt Menü</li>
        </ul>
    </li>
    <li>Menü 4</li>
</ul>

CSS kodumuzda aşağıdaki gibi olsun

ul.menu li{
	background-color:#3CF;
}

li.deneme{
	background-color:#f00;
}

Örneği görmek için tıklayınız.

Kodumuza göre tüm li background rengi #3CF olsun ama .deneme sınıfı tanımladığımız li’nin ki kırmızı olsun diyoruz, ancak sonuç istediğimiz gibi olmuyor.

Firfox’un eklentisi Firebug’u durumu bize açıkça gösteriyor. Üzeri çizilen tanım altta kalırken üstteki tanım elemana uygulanmaktadır.

Seçici adına üst eleman adlarını ekleyerek etkinliği arttırma

Burada bizim kendi istediğimiz sonucun oluşması için bir iki yöntem bulunmaktadır. Bir tanesi istediğimiz atamanın üste çıkması için seçici değerini arttırmak, yani örnek kodumuzda bu li.deneme yerine ul li.deneme şeklinde yaparak seçici etkinliğini arttırarak yapmaktır.

  ul.menu li.deneme{
  background-color:#F00;
  }

Örneği görmek için tıklayınız.

Bu kod bizi çözüme ulaştıracaktır, ancak bazen bu çözüm çok can sıkıcı haller alabiliyor. Büyük projelerde çok sık rastladığımız bir sorun.

important! tanımı ile etkiliği arttırma

Diğer bir çözüm ise etkin olmasını istediğimiz tanımın sonuna kardeşim bu önemli bunu etkin yap demek, yani sonuna !important eklemek ile olur. 

li.deneme{
   background-color:#f00 !important;
}

Örneği görmek için tıklayınız.

İE6 için important ile hack yapmak

Şimdi gel gelelim important tanımının ie6 ile olan problemine ve benim yanlış anlamama.

Eğer yukarıdaki gibi bir tanımlama var ise yani tek bir özellik ve bu özelliğe atanmış important tanımı var ise ie6 sorun çıkarmıyor. İşte benim yeni öğrendiğim bilgi bu.

Peki, sorun nasıl çıkıyor derseniz. İE6 eğer bir normal tanım var ise ve birde important tanımı bulunuyorsa, aynı özellik iki kere tanımlandı ise bu importantlı tanımı ie6 uygulamıyor. Bunu ie6 hack için kullanılabilir. Bunu ie6 hack için kullanılabilir. Zamanında bir yazıda yazmıştım bu konuda http://www.fatihhayrioglu.com/css-de-kodumuzu-ieden-gizleme/ Aslında burada ie6’nın bir sorununu avantaja çevirmiş oluyoruz.

Satıriçi kodları Ezmek için important kullanımı

Bazı durumlarda htmle müdahele imakanımızın olmadığı durumlarda veya acil bir düzeltme gerektiğin genelde lazım oluyor important tanımı. Eğer html içinden bir tanım yapıldı ise css ile yaptığımız hiç bir tanım satıriçi kodu ezemiyecektir. Tek çare important tanımıdır. 

<ul style="background-color:#3CF">
	<li>Deneme</li>
<ul>

Tanımı olsun biz bu elemanı background rengini değiştirmek istersek sadece important ile değiştirebiliriz. 

li.deneme{
   background-color:#f00 !important;
}

Tanımı li elemanının background rengini kırmızı yapacaktır.

Son bir ipucu olarak şu cümleyi söyleyelim. CSS kısaltmalarına yapılan important tanımı kısaltması yapılan özelliklere tek tek yapılmış gibidir.

Sonuç

important tanımı çok tercih edilen bir özellik değildir, nadiren de olsa lazım olur. Bazen çok can kurtarır. Çok fazla yerde kullanmak kodunuzu okunaksız hale getirebilir, buna dikkat etmek gerekir.

Fatih Turan’a teşekkürler bilgilendirme için.

Kaynaklar

14 Ağustos 2008 web’den seçme haberler

Ağustos 14th, 2008 • 1 yorum Haberler
Etiketler: , , , , , , , ,

  • FriendFeed Nedir? Ne değildir? – webdeneyimleri.com Bağlantı
  • Ajax sayfalama scripti. Bağlantı
  • Niçin float:center yok? Bağlantı
  • CSS’de Tanımlamalar ve Etkinlikleri(Specificity) Bağlantı
  • Tasarımcı ve Kod Yazarları için 5 kullanışlı çözüm. Bağlantı
  • Gooogle Döküman aracına formlar ve resim galerisi bölümü eklemiş. Bağlantı
  • SmashingMagazine’de bahsedilen site güzel bir jquery uygulaması. Bağlantı
  • Javascript 6 adet string fonksiyonu. Bağlantı
  • Webciler için 25 adet güzel uygulama. Bağlantı
  • Volkan Görgülü xhtml ve css kodlamayı güzel bir video ders ile anlatmış. Bağlantı
  • WordPress kullanıcıları için çok güzel bir güvenlik yazısı. Güvenliği sağlamanın 11 yolu. Bağlantı
  • Arama motorlarına uygun site hazırlarken dikkat edilecek 10 kural. Bağlantı
  • jQuery’nin internet tarayıcıları ile münasebeti. Bağlantı
  • Jquery ile görsel formlar:ipuçları – hakanersu.com Bağlantı
  • WordPress kullanıcıları için sayfa yüklenme zamanını düşürmenin 5 yolu. Bağlantı
  • Röportaj: Chris Coyier – webdeneyimleri.com Bağlantı

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.