Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj11.09.2009, 19:05 (UTC)    
Mesaj konusu: CSS(Hack)Tüm css hileleri burada....

Tüm tarayıcılar için CSS Düzeltmeleri(Hack)

Tüm tarayıcılar için CSS Düzeltmeleri(Hack)
CSS ile web sayfası kodlarken bizi en çok zorlayan konulardan biri daha önceki yazılarımda bahsettiğim gibi farklı tarayıcı sürümlerine göre kod yazmaktır. CSS ile kod yazarken bazı durumlarda kodumuz bir tarayıcı grubunda düzgün görünürken başka bir tarayıcı grubunda farklı görüntülenir, tabi biz yaptığımız sitelerin kullanıcılar tarafından tarayıcısı ne olursa olsun aynı görünmesini isteriz. Bu gibi durumlarda kullandığımız yöntem aslında çok basit bir tekniktir. Hangi tarayıcıda farklı görünüyorsa onun için farklı kod yazarız ve bunu diğer tarayıcıların görmeyeceği kod bloğu içinde yazarız.

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ı

Kod:

Kod:
1.* html {}



IE 7 ve altı

Kod:
Kod:

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



sadece IE 7 için

Kod:

Kod:
1.*:first-child+html {}



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

Kod:

Kod:
1.html>body {}



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

Kod:

Kod:
1.html>/**/body {}



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

Kod:

Kod:
1.html:first-child {}



Safari

Kod:

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



Google Chrome and Safari 3.1

Kod:

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



Firefox 2

Kod:

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



FireFox 3

Kod:

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



Sadece Firefox 3

Kod:

Kod:
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

Kod:
[code][code]01./* Firefox 1 */
02..ozelSecici, x:-moz-any-link {
03.
background-color:#ffd560;
04.}
05./* Firefox 2 */
06..ozelSecici, x:-moz-any-link {
07.
background-color:#ab1b0b;
08.}
09./* Firefox 3 */
10..ozelSecici, x:-moz-any-link, x:default {
11.
background-color:#e6831f;
12.}
13./* Google Chrome and Safari 3.1 */
14.body:nth-of-type(1) .ozelSecici{
15.
background-color:#e6f0fa;
16.}
17./* Opera 9 ve altı */
18.html:first-child .ozelSecici{
19.
background-color:#a91614;
20.}
21./* ie7 icin */
22.*:first-child+html .ozelSecici{
23.
background-color:#0098de;
24.}
25./* ie 7 ve alt sürümler icin */
26.*:first-child+html .ozelSecici{
27.
background-color:#d4d0c8;
28.}
29.* html .ozelSecici{
30.
background-color:#d4d0c8;
31.}
32./* ie6 ve alti */
33.* html .ozelSecici{
34.
background-color:#996666;
35.} [/code]


HTML kodu

Kod:
[code]1.<p class="ozelSecici">Tarayıcı</p> [/code]
______________
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu