Tarayıcılar arası farklılıkların hepimizi çıldırması konumuzun sadece minik bir bölümü. Asıl bahsetmek istediğim; tüm popüler tarayıcılar için, sadece kullanılan tarayıcıda geçerli sayılacak CSS kodları.
Yani, kullanıcınız Opera kullanıyorsa, sadece Opera tarayıcısı için bir div'in gizlenmesi veya Firefox 1 kullanıyosa, sadece Firefox 1 kullananların görebileceği bir öğenin yüksekliğinin daha fazla olması gibi hacklerden bahsediyor.
Daha iyi anlamak için şöyle bir HTML yapısı kuralım:
<p id="opera">Opera 7.2 - 9.5</p>
<p id="safari">Safari</p>
<p id="firefox">Firefox</p>
<p id="firefox12">Firefox 1 - 2 </p>
<p id="ie7">IE 7</p>
<p id="ie6">IE 6</p>
Daha sonra tüm tarayıcılarda bu elementleri gizleyelim:
<style type="text/css">
body p
{
display: none;
}
</style>
Şimdi ise her bir tarayıcı için bu divleri nasıl göstereceğimize geçelim.
Internet Explorer
IE için 2 yöntem bulunuyor, ki bunu IE ızdırabı çeken herkes ezbere biliyordur. Birinci yol, IF cümleleri:
<!--[if IE 7]>
<style type="text/css">
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
</style>
<![endif]-->
If cümleleri arasına yazılan her türlü HTML kodu sadece IE tarafından görünebilecek ve çalıştırılabilecektir. Ancak bu işlem dışarıdan bağlanmış .css dosyalarına etki etmediği için onlarda şöyle bir method kullanıyoruz:
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
Firefox
Genellikle IE dışında bir tarayıcı için bu tür hacklere ihtiyaç duymacak olsak da her ihtimale karşı bahsetmekte fayda var.
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-******** url-prefix()
{
#firefox { display: block; }
}
Kodları yukarıdaki paragrafları FF sürümlerine göre gizli olmaktan çıkaracaktır.
Safari
Safari motoru olan Webkit için geçerli hackler ise şöyle:
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
Opera
Opera fanatikleri eminim bu listede Opera'yı görmeselerdi üzüleceklerdi. İşte Opera için geçerli hack. Ancak burada bir sorun var ki, Opera'nın hackinde geçen -min-device-pixel- kodu, bu özelliğin desteklendiği tüm tarayıcılarda görünecek. Yani sadece Opera'ya has olmaktan çıkacak.
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
Üşengeçlere tüm kodlar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<**** http-e****="*******-Type" *******="text/html; charset=utf-8">
<title>CSS Browser Hacks</title>
<style type="text/css">
body p
{
display: none;
}
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-******** url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
</style>
</head>
<body>
<p id="opera">Opera 7.2 - 9.5</p>
<p id="safari">Safari</p>
<p id="firefox">Firefox</p>
<p id="firefox12">Firefox 1 - 2 </p>
<p id="ie7">IE 7</p>
<p id="ie6">IE 6</p>
</body>
</html>
Söz konusu hacklerin hepsi [url=http://www.nealgrosskopf.com/tech/thread.asp?pid=20Neal Grosskopf[/url] tarafından toplanmıştır, ben sadece sizlerle payşalan bir aracı oluyorum. Afiyet olsun.
Bütün tarayıcılar için CSS hackleri hileleri
Konu Sahibi / Yazar
donanma44
Kategori / Forum
CSS (Cascading Style Sheets)
Yorumlar / Cevaplar
0
Okunma / Görüntüleme
6151
Bütün tarayıcılar için CSS hackleri hileleri
Konuyu Okuyanlar: 1 Ziyaretçi