Teftiş Et(Inpect Element) Teftiş Et kısmı geliştirilmiş. Artık daha sorunsuz çalışıyor. Quick Info bölümü ile seçilen elemanın bilgileri anında görülebiliyor. Ayrıca Image Map yakalama kısmı eklenmiş.

HTML Paneli: HTML düzenleme kısmı geliştirilmiş. Bir nesneye uygulanan tüm stil atamaları ve etkin stil atamaları artık iki ayrı sekme(Style ve Computed) halinde verilmiş. Sağdaki Layout kısmına position ve z-index değerlerinide gösteriyor artık. MathML ve SVG namespace desteği gelmiş.

CSS Paneli: Css panelde aktif elemanın  sözde-sınıflarının(pseudo) hepsi görünüyor ve bunları değiştirebiliyoruz. Bu özellik iyi olmuş, burada sorun yaşıyorduk açıkçası. 

Sistemden gelen özellikleri artık görebiliyoruz. Sadece okunabilir.

CSS kısayollarını göster ve gizle yapabiliyoruz.

Javascript Paneli: Gelişmiş inceleme-noktaları oluşturabilme özelliği eklenmiş. Bir çok panel artık inceleme-noktası oluşturabiliyoruz. Dondur işaretinin olduğu kısımlarda buraya kadar incele imkanı veriyor.

Net Paneli: Net panelindeki zamanlama hataları giderilmiş ve geliştirilmiş. Net panelin çalışma mantığı değiştirilmiş ve tam sonuçların alınması sağlanmış. Ayrıntılı bilgi için tıklayınız. 

Console ve Net panele Persist özelliği eklenmiş. Eski ile yeniyi karşılaştırma imkanı sağlıyor bu buton bize. Firefox önbelliğini pasifleştirme butonu eklenmiş. 

XHR inceleme noktası oluşturabiliyoruz.

Kolonları çıkarabiliyor ve ekleyebiliyoruz.

Gelen ve giden veriler araç ipuçu içinde gösteriliyor.

Araç Çubuğu ve Menüler: Arama kısmını geliştirilmiş. Küçük büyük harfe duyarlı arama yapabiliyoruz ve ileri doğru ve geriye doğru arama yapabiliyoruz. Kapama düğmesindeki “Off” yazısı kaldırılmış.

Sonuç

Sonuç olarak şunu söyleyebilirim; daha önceki sürümlerde yenilikler ile birlikte bazı sorunlarda beraberinde geliyordu bu sefer daha bir oturmuş gibi bu araç. Daha yapısal değişiklikler ve çözümler üretilmiş. Web geliştiricileri için olmazsa olmaz olan FireBug sorunları olsada bir numaralı yerini kimseye kaptırmıyor.

Kaynaklar

• http://getfirebug.com/wiki/index.php/Firebug_Release_Notes
• http://www.softwareishard.com/blog/
• http://lifehacker.com/5453025/firebug-15-updates-with-new-features-still-a-web-developers-dream
• http://hacks.mozilla.org/2010/01/firebug-1-5-a-closer-look/
• http://hacks.mozilla.org/2010/01/firebug-1-5-released/
• http://www.markwarner2008.com/firebug-1-5-updates-with-new-features-still-a-web-developers-dream-downloads/

CSS Derslerindeki CSS Sorunları ve Çözüm Önerileri kısmındaki birçok yöntemin ana mantığıda budur.

Farklı tarayıcılar için düzenleme(hack) yazarken genel anlamda iki farklı yöntem kullanırız. Farklı css dosyaları hazırlayıp bunları eklerken şartlı yorumlar yardımı ile farklı tarayıcılar için farklı css kodlarını gösteririz, ikinci yöntem ise kod içerisinde o tarayıcının gördüğü kod bloğu içinde ona göre kod yazarız. Burada birinci yöntemi(IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak) daha önce anlatmıştık. Bu yazımızda kod içindeki css düzeltmelerinden bahsedeceğiz.

CSS kodu içinde farklı tarayıcılar için farklı kod yazmanın en kolay yolu, tarayıcılara özel seçiciler içine kod yazmaktır.

Tarayıcılara Özel Seçiciler

IE 6 ve altı

* html {}

IE 7 ve altı

*:first-child+html {} * html {}

sadece IE 7 için

*:first-child+html {}

IE 7 ve yeni nesil tarayıcılar için

html>body {}

Yalnız yeni nesil tarayıcılar için (IE 7 dışında)

html>/**/body {}

sadece IE 8 için

.test { property:value; property: value\9; *property: value; }

Opera 9 ve altı sürümler için

html:first-child {}

Safari

html[xmlns*=""] body:last-child {}

Google Chrome and Safari 3.1

body:nth-of-type(1){}

Firefox 2

.foo, x:-moz-any-link { } 

FireFox 3

.foo, x:-moz-any-link, x:default { }

Firefox 2 ve 3 için yazdığımız kodu ie 7 de yorumluyor bunu engellemek için (Sonradan eklenmiştir.)

	.foo, x:-moz-any-link { }
    .foo, x:-moz-any-link, x:default { }
    *:first-child+html .foo{}/*ie7 icin normali yazin*/

Sadece Firefox 3

html>;/**/body .foo, x:-moz-any-link, x:default { }

Burada önemli olan her tarayıcı farklı görünümünde bu metoda başvurmamak gerekir, çözümü olmayan sorunlarla karşılaştığımızda bu kodları kullanmalıyız.

Bu kodları kullanma gereksinim genelde Internet Explorer 6 ve 7 için oluyor. Ama nadirende olsa diğer tarayıcıların düzeltmeleride lazım oluyor. Bir örnek yapalım

/* Firefox 1 */
.ozelSecici, x:-moz-any-link {
    background-color:#ffd560;
}
/* Firefox 2 */
.ozelSecici, x:-moz-any-link {
    background-color:#ab1b0b;
}
/* Firefox 3 */
.ozelSecici, x:-moz-any-link, x:default {
    background-color:#e6831f;
}
/* Google Chrome and Safari 3.1 */
body:nth-of-type(1) .ozelSecici{
   background-color:#e6f0fa;
}
/* Opera 9 ve altı */
html:first-child .ozelSecici{
    background-color:#a91614;
}
/* ie7 icin */
*:first-child+html .ozelSecici{
    background-color:#0098de;
}
/* ie 7 ve alt sürümler icin */
*:first-child+html .ozelSecici{
    background-color:#d4d0c8;
}
* html .ozelSecici{
    background-color:#d4d0c8;
}
/* ie6 ve alti */
* html .ozelSecici{
    background-color:#996666;
}

HTML kodu

<p class="ozelSecici">Tarayıcı</p>

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

Aynı XHTML kodu için aşağıdaki gibi farklı tarayıcılarda farklı sonuçları alırız.

Sayfa Google Chrome 0.3.154.9, Safari 3.1.2, Firefox 3.0.4/2.0.0.14, Internet Explorer 7/6/5.5, Opera 9.6 ile test edilmiştir.

• http://www.webdevout.net/css-hacks (*****)
• http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
• http://vikaskhera.wordpress.com/2008/08/02/css-hacks-browser-specific-selectors/ (****)
• http://centricle.com/ref/css/filters/ Önemli bir liste(****)
• http://www.siberkultur.com/?q=css-hackleri (***)
• http://www.sitepoint.com/article/browser-specific-css-hacks/ (***) sürümler eski
• http://www.artypapers.com/csshelppile/category.php?2
• http://rafael.adm.br/css_browser_selector/
• http://css-discuss.incutio.com/?page=CssHack
• http://snipplr.com/view/7043/firefox-3-css-hack/
• http://pornel.net/firefoxhack
• http://www.nealgrosskopf.com/tech/thread.asp?pid=20
• http://snipplr.com/search.php?q=CSS+hack&btnsearch=go
• http://fu2k.org/alex/css/hacks/fuzzyspecificity
• http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/ (ie6, ie7, ie8 ve ie9)