‘important’ etiketi için sonuçlar
!important Tanımı
Ekim 14th, 2010 • 6 yorum CSS, XHTML
Etiketler: Etkinlik, firebug, Firefox, important
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
- 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
CSS Hata Ayıklama Yöntemleri
Ocak 4th, 2007 • 16 yorum CSS, XHTML
Etiketler: Attribute, backslash, CSS, Çocuk-Seçicileri, Firefox, Hata ayıklama, ie-fix, ie-hata, ie6, ie7, important, Opera, owen, XHTML
IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak adlı makalede bahsettiğimiz gibi "CSS ile web sitesi kodlamanın en büyük sorunu CSS’in özelliklerini yorumlayamayan veya yanlış yorumlayan web tarayıcılarıdır. Bu nedenle CSS ile web sitesi kodlarken bu tip hataları ayıklamamız gerekiyor. CSS ile hata ayıklama web tarayıcı gruplarının veya bir kısım web tarayıcısı için kuralları veya bildirimleri gizlemek veya göstermek şeklinde uygulanır." Okumaya devam edin »
CSS’de Tanımlamalar ve Etkinlikleri(Specificity)
Ekim 8th, 2006 • 10 yorum CSS, Web Standartları, XHTML
Etiketler: class, CSS, css2, CSS2.1, id, important, öncelik, özellik, seçici, Specificity, Web Standartları, XHTML
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.
Okumaya devam edin »
Css de kodumuzu İE6′dan gizleme
Mayıs 4th, 2006 • 18 yorum CSS
Etiketler: CSS, düzeltme, Firefox, gizle, hack, ie, ie6, important, internet explorer
Bir kodu İE’den gizlemek istiyorsak
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.
