Bilisim
tarayicilar
Webkit, benim pek bir sevdiğim Safari ve Chrome'un alt yapısını oluşturan tarayıcı mimarisi, geçenlerde Microsoft'un CEO'su Steve Ballmer tarafından ilgi çekici olarak yorumlanmıştı.
E doğal olarak yüreklerimiz hopladı, acaba Microsoft tüm dertlerini bir kenara koyup adam gibi bir tarayıcı mimarisini, Webkit'i mi tercih edecek diye. İlgiliyizden öte "düşünebiliriz" diye bir söylemde de bulununca webcilerin gözleri parladı, içini umut kapladı. Düşünsenize, artık IE için saç baş yolmaya gerek kalmayacaktı. Hatta neredeyse artık tarayıcı derdi diye birşey kalmayacaktı ki...
Ballmer yine açıklama yaptı ve Webkit ile ilgili öyle bir düşünceleri olmadığını söyledi. Hevesimiz kursağımızda kaldı, gerçek hayata geri döndük.
Firefox 3.1 GeoLocation ve @font-face desteğiyle geldi
Hatırlarsanız Webkit destekli Safari'nin @font-face desteğinden bahsetmiş, bunun webde istediğimiz yazı tipini kullanabilmemiz için ne kadar önemli bir adım olduğundan söz etmiştim.
Firefox da 3.1 betasıyla artık @font-face desteğini veren tarayıcılardan. Henüz @font-face'in faydaları/zararları tam olarak kesinleşmemiş, bir standarta bağlanmamış olsa da bu tür gelişmeler ileride webde kısıtlamaların daha az olacağına işaret. Ancak yine de Firefox'un yazı tiplerini yumuşak kenarlı göstermemesinden dolayı bu özellikten Safari kadar keyif alıp alamayacağımızı merak ediyorum.
Yeni beta ile gelen bir diğer özellik ise GeoLocationverisi sağlayan Geode eklentisi. Geode basit olarak bir GPS gibi çalışıyor ve sunucuya sizin bulunduğunuz lokasyonun bilgisini gönderiyor, aynen mobil uygulamalarda olduğu gibi.
Geode sayesinde kullandığınız web uygulamaları sizin yerinizi bileceği için size daha anlamlı sonuçlar vermeye çalışacaklar. Yani GeoLocation anlamlı webin bir parçası. Örneğin Google'ın hangi şehirde/mahallede olduğunuzu bilmesi (sanki bilmiyor mu?) ve arama sonuçlarınızı daha da özel hale getirmesi gibi.
Web uygulamalarında önbellek sorununu aşmak
Eğer bir web sitesi/uygulaması geliştiriyorsanız özellikle geliştirme aşamasında CSS / JS dosyalarında önbellek sorunları yaşıyor olabilirsiniz. Bu sorun basit olarak, yaptığınız değişikliğin tarayıcıya yansımamasıdır. Değişiklik sunucuda bulunur lakin tarayıcı önbelleğine aldığı için görünemez. Aşmanın yolu ise genellikle Ctrl + F5 tuşudur.
Ancak böyle bir durumda ziyaretçilerinize Ctrl + F5 yapın demek kullanışsız olacağı için bunu kendi tarafınızda çözmeniz en uygunu olacaktır. Bunun için bu tür dış dosyaları çağırdığınız satırlara bir sürüm numarası ekleyebilirsiniz. Örneğin:
<link type="text/css" rel="stylesheet" media="all" href="/aywebs.css" />
Olan satırınızı,
<link type="text/css" rel="stylesheet" media="all" href="/aywebs.css?v=1" />
Olarak değiştirirseniz tarayıcı bunu yeni bir dosya olarak algılayacak ve yeniden çekecektir. Bu şekilde her major değişikliğinizi versiyonlarsanız kullanıcılarınız değişikliği anında görebileceklerdir. Uygulamanın bir başka alanı da arkadaşlık siteleri için kullanıcı profil fotoğraflarında olabilir.
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.
Kaynak: www.siberkultur.com