Tarayıcılar için CSS Hileleri

Bazı durumlarda tarayıcılara özel kodlar yazmamız gerekir.. İşte bu gibi durumlarda nasıl yazacağımızı bu makalede sizlere aktaracağım.. Öncelikle seçici ve nitelik olmak üzere 2'ye ayırdığımız bu durumda ilk olarak seçici hilelerini görelim..

Seçici Hileleri

IE6 ve Alt Sürümleri İçin

Bunun için seçici başına * html koymamız yeterlidir.

* html #prototurk  { margin-left: 10px }

1

IE7 İçin

Bunun için seçici başına *:first-child+html koymamız yeterlidir.

*:first-child+html #prototurk  { margin-left: 10px }

1

Ya da bunun için diğer bir yöntem;
Seçici başına *+html koymanız;

*+html #prototurk  { margin-left: 10px }

1

IE7, Firefox, Safari ve Opera İçin

Bunun için seçici başına html>body koymamız yeterlidir.

html>body #prototurk  { margin-left: 10px }

1

IE8, Firefox, Safari ve Opera İçin

Bunun için seçici başına html>/**/body koymamız yeterlidir.

html>/**/body #prototurk  { margin-left: 10px }

1

Opera 9.27 ve öncesi ve Safari 2 İçin

Bunun için seçici başına html:first-child koymamız yeterlidir.

html:first-child #prototurk  { margin-left: 10px }

1

Safari 2 ve 3 İçin

Bunun için seçici başına html[xmlns*=""] body:last-child koymamız yeterlidir.

html[xmlns*=""] body:last-child #prototurk  { margin-left: 10px }

1

Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+ İçin

Bunun için seçici başına body:nth-of-type(1) koymamız yeterlidir.

body:nth-of-type(1) #prototurk  { margin-left: 10px }

1

Ya da bunun için diğer bir yöntem;
Seçici başına body:first-of-type koymanız;

body:first-of-type #prototurk  { margin-left: 10px }

1

Safari3+ ve chrome1+ İçin

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #prototurk { margin-left: 10px }
}

123

Safari 2 ve 3.1 İçin

Bunun için seçici başına html[xmlns*=""]:root koymamız yeterlidir.

html[xmlns*=""]:root #prototurk  { margin-left: 10px }

1

Safari 2 - 3.1 ve Opera 9.25 İçin

Bunun için seçici başına *|html[xmlns*=""] koymamız yeterlidir.

*|html[xmlns*=""] #prototurk  { margin-left: 10px }

1

IE6, IE7, IE8 Hariç Tümü İçin

Bunun için seçici başına :root *> koymamız yeterlidir.

:root *> #prototurk  { margin-left: 10px }

1

Yalnızca Firefox 1+ İçin

Bunun için seçiciden sonra bir virgül atıp x:-moz-any-link yazmanız yeterlidir.

#prototurk, x:-moz-any-link  { margin-left: 10px }

1

Firefox 3.0+ İçin

Bunun için seçiciden sonra bir virgül atıp x:-moz-any-link, x:default yazmanız yeterlidir.

#prototurk, x:-moz-any-link, x:default  { margin-left: 10px }

1

IE10+ İçin

Bunun için seçici başına _::-ms-reveal, koymamız yeterlidir.

_::-ms-reveal, #prototurk  { margin-left: 10px }

1

Nitelik Hileleri

IE6 İçin

Bunun için özellik başına _ koymamız yeterlidir.

#prototurk  { _padding: 0 }

1

IE6 ve IE7 İçin

Bunun için özellik başına * ya da # koymamız yeterlidir.

#prototurk  { *padding: 0 }
/* ya da */
#prototurk  { #padding: 0 }

123

IE6 hariç Hepsi İçin

Bunun için özellik sonuna noktalı virgülden hemen önce /**/ koymamız yeterlidir.

#prototurk  { padding/**/: 0 }

1

IE6, IE7 ve IE8 İçin

Bunun için özellik değeri sonuna \9 koymamız yeterlidir.

#prototurk  { font-family: Arial\9 }

1

IE7 ve IE8 İçin

Bunun için özellik başına noktalı virgülden hemen önce /*\**/ ve özellik değeri sonuna \9 koymamız yeterlidir.

#prototurk  { font-family/*\**/: Arial\9 }

1

IE6 ve IE7 İçin

Bunun için özellik değeri sonuna ünlem işaretinden sonra herhangi bir şey koymamız yeterlidir. 

#prototurk  { font-family: Arial!ie }

1

Daha fazla ve güncel css hileleri için;
http://browserhacks.com/

Bu makale css-tricks'ten alıntıdır!
http://css-tricks.com/snippets/css/browser-specific-hacks/

Ayrıca bkz: http://rafael.adm.br/css_browser_selector/