SiberKültür 101: Internet kültürü, web dedikoduları ve web tasarımı ve geliştirme konusundaki tüm açlığınızı giderir.
Tüm tarayıcılar için CSS hackleri
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-document 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>
<meta http-equiv="Content-Type" content="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-document 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 Neal Grosskopf tarafından toplanmıştır, ben sadece sizlerle payşalan bir aracı oluyorum. Afiyet olsun.
Yorumlar
11/10/2008 - 14:27
bu sayede hiç javascript kullanmadan istenmeyen tarayıcılara uyarı mesajı çıkarmak mümkün. güzel olmuş :)
23/12/2008 - 20:45
ya arkadaşlar bunları nereye yazıyoruz söylermisiniz ben firifox kullanıyorum
01/05/2009 - 23:42
Bunların arasında sadece 'IF IE' ve .css dosyasında !important ı kullanıyorum o kadarcık. (:
21/03/2010 - 18:36
Merhabalar çok güzel bir yazı ama içeriği gizleme kısmında sorun yaşamasamda Firefox için açma kodlarını nereye ekliyeceğim ve başka yapmam gereken birşey varmı.
Yorumlama aparatı