!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

• http://bytesizecss.com/blog/post/ie6-and-the-important-rule/
• http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
• http://www.electrictoolbox.com/using-important-css/
• http://www.webcredible.co.uk/user-friendly-resources/web-dev/css-important.shtml
• http://www.yellowjug.com/web-design/the-importance-of-important-in-css/
• http://friendfeed.com/arayuz-gelistiriciler/120084de/css-yazarken-ustten-gelen-degerleri-ezmek-icin

Biz CSS’de hata ayıklamak için bir çok yöntem kullanırız. Bunların en çok kullanılanları aşağıda anlatılmıştır.

Çocuk Seçicileri Kullanarak Hata Ayıklamak

Çocuk seçicilerini incelemek için tıklayınız. Çocuk Seçicileri CSS hata ayıklama yöntemi olarak kullanılabilir. Çocuk Seçicileri Windows sistemlerinde kurulu olan IE6 ve alt versiyonlarında görüntülenmeyecektir, bu nedenle IE6 ve altı versiyonlarda görünmesi istenmeyen tanımlar Çocuk Seçicileri kullanarak gizlenebilir.

Her tanımlamadan sonra ikinci bir tanımlama olarak kullanılır. İkinci tanımlama çocuk seçicisi olmalıdır.

.icerik h3 {height:21px;}
.icerik > h3 {height:auto; min-height:21px;}

IE 7 Çocuk Seçicilerini desteklemektedir. Bu metot uygulanırken bu dikkate alınmalıdır.

Özellik(Attribute) Seçicileri Kullanarak Hata Ayıklamak

Diğer bir hata ayıklama yöntemi Özellik Seçicileri kullanarak hata ayıklamaktır. Bir çok yeni nesil web tarayıcısı (FF ve Safari) bu kullanımı destekler, ancak IE6 ve altı versiyonlar bu özelliği desteklemez. IE7 bu kullanımı desteklemektedir. Bu hata ayıklama yöntemi yukarıda bahsettiğimiz “Çocuk Seçicileri ile Hata ayıklama” yöntemi gibi kullanılır.

Özellik Seçicileri kullanarak elementlerin id’lerine göre atamalar yapabiliriz. Bu bize bir çok avantaj sağlar. Bu avantajları hata ayıklamak içinde kullanabiliriz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
	<style type="text/css">
    p{background: red; /* Tüm web tarayıcılarında görünür */}
    body[class|="sayfaYapisi"] p{ background: green; /* IE 7 ve Yeni web tarayıcılarında görünür Opera hariç */}
    </style>
</head>
<body class="sayfaYapisi">
	<p>Test</p>
</body>
</html>

Genel Seçicileri (*) Kullanarak Hata Ayıklamak

Her ne kadar bu hata IE7 ile birlikte düzeltildiyse de çok kullanışlı bir hata ayıklama metodudur. Kullanımı çok basittir.

a:hover {border: 1px dotted black;}
* html a:hover { // bu tanımlamayı ie6+ ve altı versiyonlarda görünmeyecektir.
	border-style: solid;
}

Ters Bölü İşareti(\) İle Hata Ayıklama

IE5x/Win versiyonları bu karakteri yorumlamazlar bu nedenle IE5x/win versiyonlarından kodumuzu gizlemek için bu yöntemi kullanabiliriz. CSS kodu yazarken en çok ihtiyacımız olan genişlik tanımının IE5x versiyonlarda yanlış algılanmasıdır. bu hatayı düzeltmek için bu yöntem kullanılabilir.

#icerik {
  width: 770px;
  wid\th: 750px; /* ie5x - win bu kodu görmeyecek */
}

Ben şahsen kutu modelinde hata ayıklamak için tantek‘in kullandığı metodu kullanıyorum, daha sağlıklı ve tüm web tarayıcıları göze alınarak hazırlanmış bir hata ayıklama metodudur tavsiye ederim. Ama bu yönteminde kullanıldığını bilelim.

Alt Çizgi (_) ile Hata Ayıklama

Bu yöntemde IE4-6 versiyonlarda hata düzeltmek için kullanılabilir.

#menu {
  position: fixed;
  _position: static;
}

Burada yeni nesil web tarayıcıları ikinci tanımlamayı görecek ve buna göre yorumlama yapacaktır. Ancak IE4-6/win versiyonları (_) anlayamadığı için bu kodu yorumlamayacak ve ilk koda göre hareket edecektir.

Owen Yöntemi ile Hata Ayıklama

şžimdiye kadar ki tüm yöntemler Internet Explorer içindi. Bunun nedeni bir çok hatanın IE’den kaynaklanmasıdır tabi. şžimdi kullanacağımız metod ise Opera için bir hata ayıklamasıdır.

.solAlan {
	background-image: none
}
/*  Asagidaki bolum Opera 6 ve altı veya IE6/win görünmeyecek */
head:first-child+body .solAlan {
	background-image: url(menu.png);
	background-attachment: fixed;
}

Bu yöntem hem Opera 6 ve altı hem de IE6 ve altı versiyonlar için geçerlidir. Sadece Opera 6 ve altı versiyonlar için kod yazmak istersek

html>body div.alt {
	c\olor: red; /* sadece Opera 6 için */
}
head:first-child+body div.alt {
	color: black;
}

Yorum Kodları içinde (\) Kullanımı ile IE/Mac’de Hata Ayıklama

IE/Mac versiyonlarında yorum satırı içindeki ters bölme işaretini(\) yorumlamamaktadır. Bu nedenle IE/Mac versiyonlarında hata ayıklamak için bu yöntem kullanılabilir.

/* bu alani IE5/Mac den gizleyelim \*/
* html {
	height: 1px;
}
/* hata ayiklama sonu */

Bunların dışında kutu modeli hata ayıklaması için kullandığımız tantek‘in yöntemi, Css de kodumuzu İE’den gizleme adlı makalede kullandığımız !important yöntemi ve IE’da min-width, min-height,max-width, max-height Kullanmak makalesinde kullandığımız expression() yöntemleride vardır. Bunlardan daha önce bahsettiğimiz için değinmedik. Bunların dışında kullanılan diğer bazı yöntemler olsa da biz burada genel kabul görmüş yöntemleri yazmayı uygun bulduk.

Kaynaklar

• http://www.webdevout.net/articles/css_hacks.php
• http://swik.net/CSS/CSS+Hacks
• http://css-discuss.incutio.com/?page=CssHack
• http://www.quirksmode.org/css/csshacks.html
• http://tantek.com/CSS/Examples/boxmodelhack.html
• http://www.albin.net/CSS/OwenHack.html

Bir XHTML sayfamıza iki adet stil dosyası eklediğimizi düşünelim. Fakat bu stil dosyalarımızdan birinde h1 elementine bold özelliği atanmışken diğer stil dosyamızda italiktik özelliği atanmış. Bu durumda web tarayıcıları hangisini uygulayacaktır. Hangisinin etkin olduğunu bulup ona göre sayfayı yorumlayacaktır.

Burada iki tanımlamanın yakınlık dereceleri aynı. O zaman hangisi uygulanacak. Böyle durumlarda web tarayıcıları kendilerine has garip bir hesaplama sistemi kullanırlar. Kuralları aşağıdaki gibidir.

• Kod içinde tanımlama yapılmışsa (inline-kod)
• Stil dosyasındaki tanımlı ID’lerin sayısına
• Sınıf tanımlalarının sayısına
• Seçicilerin sayısına bakar

Web tarayıcısı bu sayıları toplamaz. Yalnızca rakamları yanyana sıralar. Bu web tarayıcılarına özel bir aritmetik işlemdir. Bir örnek verecek olursak id değeri 2, sınıf değeri 3 ve seçici değeri 0 olan bir tanımlamada

0 (kod içinde değil), 2 (id), 3 (class), 0(seçici) = 0230

Değerini elde ederiz. Burada id değeri 100′ler basamağına sınıf değeri 10′lar basamağına yazılarak hesaplama yapılır ve ikiyüz otuz değeri elde edilir.

ul h1 li.secili {
	color: yellow;
}

Yukarıdaki tanımlama da 0013 değerini elde ederiz.

0 (kod içinde değil), 0 (id), 1 (secili sınıfı), 3 (ul h1 li seçicileri) = 0013

h1 {
	color: blue;
}

Bu tanımlamanın değeri 0001 dir. CSS belirlemeye göre yüksek değer alanın özelliği uygulanır. Her ikisinde de h1′e bir tanımlama yapılmıştır. Ancak tanımlama sistemleri farklıdır. XHTML kodumuzdaki h1 elementimizi mavi değil sarı(yellow) olarak gösterecektir.

Bide öncelik için!important tanımlaması vardır. Eğer yukarıdaki koda !important eklersek

h1 {
	color: blue !important;
}

Tanımlama yukarıdaki gibi değiştirildiğinde h1 elementimiz mavi renkde görünecektir.

Eğer değer aynı olursa(mesela 0013 e 0013) ne olur, bu durumda son yapılan tanımlamanın özellikleri uygulanır.

p{
	color:red !important; /* bu kısmı ie6 görmeyecek*/
	color:blue;
}

sayfa için kullandığımız paragraflar ie6 mavi ff kırmızı görünecektir.

!important css ile etkinlik için kullanılan bir etikettir. !important tanımlı özellik daha önce yapılmış aynı özelliğin üzerine çıkar. CSS ile etkinlik hakkında daha fazla bilgi için tıklayınız.