Bazen kullandığım programların alternatiflerini araştırıyorum. Amacım eğer daha güzel ve daha kullanışlı özellikleri varsa onlardan yararlanmak.

Opera 10.50 çıkınca bir inceleyeyim dedim. Gayet hoş, güzel, hızlı. Birde beni Firefox’a bağlayan en büyük etken olan FireBug’ın Opera’daki alternatifi DragonFly’ı inceleyeyim dedim.

DragonFly ilk çıktığından buyana bayağı bir yol kat etmiş açıkçası. Aslında FireBug’ı taklitten başka bir şey değil ama olsun oda bir marifet. Microsoft gibi bir firma bile beceremediğine göre büyük bir şey olsa gerek.

DragonFly gerçekten güzel. FireBug’a alternatif bir kaç görsel güzellikleri var.

Gelelim küçük ipucumu yazmama neden olan kısıma. FireBug’da beni cezbeden şey, ayrıntılarında bir çok avantajın gizli olması. Bunlardan biri seçtiğimiz elemanı etkilyen tanımların hangi doküman içinde yer aldığını göstermesi ve hangi satırda olduğunu belirtmesi. Belki küçük bir ayrıntı ama benim çok işime yarıyor. Hemde çok.

4-5 ay önce ben css kodlarımı her tanım bir satıra gelecek şekilde yazıyordum. Sebebi çok açık kodların okunabilirliği artıyordu böylece. Sonra fark ettim ki ben kodları okumuyorum artık FireBug ile yakalıyorum ve satır numarasından ilgili dokümanı açıp müdahele ediyorum. Bununda etkisi ile her satırda bir tanım yerine her satırda bir seçici şeklinde css dosyalarımı yazmaya başladım ve bu bana çok büyük bir yer kazandırdı.

Evet bazı küçük özellikleri fark etmesekde bize çok büyük faydalar sağlayabiliyor.

Sağol FireBug. Sen olmasan bu iş gerçekten zor olurdu.

Kodlama çok basit

::-moz-selection {
    background:#c00;
    color:#fff;
}
::selection {
    background:#c00;
    color:#fff;
}

Kodlamanın birinci kısmı(::-moz-selection) mozilla tabanlı yani Firefox için ikinci kısmı ise normal CSS 3 ile birlikte gelen koddur. Webkit tabanlı tarayıcılar ve Opera 9.5 bu kodu destekliyor.

Ayrıca diğer seçicilerede bunu uygulayabiliyoruz. Bağlantılar için farklı bir renk tanımlayalım mesela

a::-moz-selection {
    background:#1259C7;
    color:#fff;
}

a::selection {
    background:#1259C7;
    color:#fff;
}

Örnek olarak bu sitede herhangi bir metni seçince göreceksiniz.

Internet Explore desteklemiyor. Bunun haricinde Firefox 2, Safari, Opera 9.5 ve Google Chrome destekliyor.

Kaynaklar

• http://www.quirksmode.org/css/selection.html
• http://css-tricks.com/overriding-the-default-text-selection-color-with-css/
• http://www.w3.org/TR/css3-selectors/

Görünüm

Opera 9.5′ın görünümü değişmiş. Daha az seçeneklerin olduğu daha sadece bir görünüm var. Tabi bunu değiştirebiliyoruz.

Sağ altta Genişliği uydur ve Resim seçenekleri bölümü eklenmiş. Aslında bular vardıda buraya kaydırılmış ve biraz düzenlemiş gibi.

Ayrıca temalardan kendimize listede yer alan temalardan birini seçebiliyoruz.  Tem kısmındaki temalar Firefox’un kilere çok benziyor.

Speed Dial ile en sık kullanılan web sitelerini küçük resimleri ile birlikte listeleyebiliyoruz.

Hızlı Bulma

Opera adres barda çok hızlı bir arama söz konusu yazdığınız adrese çok hızlı erişmemizi sağlıyor. Bu özelliği çok sevdim. Ayrıca site içeriklerinide daha fazla ön bellekte tutuyor ve hızlı açmasına neden oluyor.

Standartlara Tam destek

Mevcut kullanılan standartları (X)HTML, XML, XSLT, CSS 2.1, SVG 1.1 ve JavaScript tam olarak desteklemenin yanında yeni özelliklerin (HTML5 ve CSS3) de desteğini barındırıyor. Acid testlerinden geçen Opera 9.5 Acid 3 testinden 83 puan alıyor.

Web Kod Yazarları için DragonFly

Firefox’un web kod yazarları için en büyük avantajı olan FireBug’ın önemini anlayan tarayıcı üreticileri kendi araçlarını üretmeye başladı. Opera için DragonFly bu işi görüyor. Ama daha geliştirlme aşamasında

Daha Hızlı

Opera 9.2′ye göre javascript ve Html yorumlamada 2 kat daha  hızlı.  Ayrıca eklentileri daha hızlı kullanmamıza olanak sağlıyor. Bellek kullanım oranıda çok düşük seviyede.

Güvenlik

Oltalama yöntemi(phishing) ve kötü yazılımlara karşı güvenlik ayarları yükseltilmiş bir Opera ile karşı karşıyayız.

Sonuç

Snuç olarak diyebilirm ki Opera’nın bu Firefox 3′e karşı çıkardığı bir sürüm. Bir şeyi kovalıyorsanız onun gerisinde kalırsınız. Opera’da bu duruma düşmüş gibi. Hızı ile beni etkileyen Opera benim için yine test edeceğim bir tarayıcı niteliğinde olacak

• http://www.opera.com
• http://www.css3.info/opera-95-launches-with-lots-of-css-improvements/
• http://css.dzone.com/announcements/opera-95-now-available-downloa-0
• http://nontroppo.org/timer/kestrel_tests/

Şu an genelde kullanılan tarayıcılar: Internet Explorer, Mozilla Firefox, Opera ve Safari

http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg

İnternet tarayıcılarının gelişimini anlaya bilmek için güzel bir resim bence.

İnternet tarayıcıları hakkında makale yazma ihtiyacım iki nedenden dolayı oldu. Birinci neden internet tarayıcıları arasındaki rekabetin iyice kızışması. Asıl olan ve ikinci neden, insanların CSS ile web sayfası yapmalarından alı koyan düzenlemelerden(fix) kaçmaları. İnsanlar CSS ile kod yazarken farklı tarayıcılarda farklı görüntüler aldığında, bu sorunu CSS’e yüklüyorlar. Bir çok makalemde belirttiğim gibi aslında bu sorun CSS’in değil İnternet Tarayıcılarından kaynaklana sorunlardır. Bu sorunlar bizi yıldırmamalı.

İnternet tarayıcılarındaki gelişmeler ümit verici. İnternet tarayıcıları web standartlarına uyumluluk açısından rekabet etmeleri en çok biz kod yazanlara yarayacaktır. Bu rekabet her ne kadar şu an bizi etkilemese de gelecekte işimizi daha kolay hale getireceklerdir. Yeni nesil tarayıcılar veya standartlara uyan tarayıcılardan kastımız; HTML ve XHTML, CSS, ECMAScript ve DOM destekleridir.

Bir çok yeni nesil tarayıcı Acid testini dikkate alıp kendilerini bu testten geçirmeleri standartlar açısından güzel bir gelişme. Acid testi web standartları bakımından İnternet tarayıcıları nı test eden çevrimiçi bir kontroldür.

Ben kodumu yazarken daha önce yazdığım gibi Firefox ve Internet Explorer(6-7) ile test ediyorum. Önceleri ie’nin 5.5 versiyonuna görede test ediyordum ama son 4-5 aydır ie5.5 testlerimi sonlandırdım. Şu an için konuşursam beni en çok zorlayan ie6 sorunları. Microsoft her ne kadar sorunlarını giderdiğini söylese ie7′de bazı sorunlar yaşamıyor değiliz. Ancak ie7 bizi ie6 kadar zorlamıyor, burada Microsoft’un ie7′yi sunuş stratejisi yanlıştı bence. Neyseki sonra bu stratejisinden vazgeçti. İnternet Explorer 8 ile birlikte web standartlarına tam uyumlu bir tarayıcı çıkarma niyetin olmaları güzel bir gelişme. Beta versiyon ile birlikte bunu gerçekleştirmeye yakınlar. Hala bazı sorunlar olsa da kararlı sürüme kadar bunların düzeltileceğine inanıyorum.

Popüler Tarayıcılara bir göz atalım:

Firefox

Mozilla alt yapısını kullanan Firefox, açık kaynak kodlu olması, web standartlarına uyumluluğu ve web geliştiricilere güzel seçenekler(eklentiler) sunması nedeni ile popülerliğini arttırıyor. Kullanım yüzdesini arttırmasında her ne kadar Microsoft’un katkısıda olsa Firefox emin adımlarla zirveye doğru ilerliyor. Fireofx 2.0 ile Microsoft’un ie 7′sine iyi bir cevap veren Firefox 3′üncü sürümü ile birlikte daha kuvvetli geleceğe benziyor. Bakalım ie8 ve ff3 yarışından kim galip çıkacak.

Bir çok yerde farklı yüzdeler verilmekte Firefox’un kullanım yüzdesi olarak. % 15-35 arasında rakam veriyor istatistikler.

Benim için en önemli artısı FireBug gibi bir aracı barındırması, standartlara uyumluluğu ve güvenlik açıklarına hızlı cevap vermesi bakımından güzel bir tarayıcı.

İnternet Explorer

Hala dünya üzerinde en çok kullanılan internet tarayıcısı olma özeliğini koruyor. Tabi bunun en önemli nedeni windows işletim sistemi ile birlikte gelmesi. Microsoft netscape’ten liderliği aldıktan sonra İnternet tarayıcı olan İnternet Explorer’a pek önem vermedi. Bunu iyi değerlendiren Firefox iyi bir pazar payı yakalım. Bunun üzerine Microsoft atağa geçti ve yeni sürümler üzerinde çalışmalarına başladı. 7. sürümden bir çok sorunları gidersede hala yapısal bir çok sorunu var ie’nin. Bunun farkında olan Microsoft ie8 ile birlikte atağa geçmeye niyetinde bakalım bunun ne kadarını gerçekleştirecek.

Hala piyasada olan ie6′nın bir çok sorunu ile uğraşan biz web kodlayıcılarını zorlayan bir çok sorunu var. Microsoft’un ie7 deki yanlış strateji nedeni ile bizim bu çilemiz 1-2 sende daha sürecek gibi. Ne diyelim ie 7 ve 8 hızlı yayılsada bizde bu dertlerden kurtulsak. Yada Firefox ve diğerlerine mi ümit bağlasak bilemiyorum.

CSS Dersleri bölümündeki problemler ve çözüm önerileri bölümünü dolduran internet explorer umut ediyoruz ki bu sorunları halledip bize daha iyi tarayıcılar sunacaktır.

Opera

Diğer bir popüler internet tarayıcısıda Opera’dır. Opera her ne kadar hızlı erişim ve kullanışlı özellikleri olsada hiç bir zaman yeterli ilgiyi kazanmadır. Daha çok mobil araçlarda kullanılan Opera mini ile adını duyuran Opera güzel bir alternatif olarak kalmaya devam ediyor.

Safari

Apple firması son zamanlarda geçtiği atak ile bir çok yenilikler sunuyor kullanıcılara. Mac her nekadar fazla tercih edilen bir işletim sistemi olmasada, belli bir kitleye hitap eden bir sistem. Safari her ne kadar MacOs için çıktı isede 3. sürüm ile birlikte Windows sürümünüde çıkardı. Son zamanlarda CSS’e yeni özellikler kazandırmaya çalışan Safari geliştiricileri(WebKit) bizlere yeni özellikler kazandırmaya niyetliler. Ancak standartlara girmedikten sonra bunların uygulanabilirliği kalmayacaktır.

Sonuç

Sonuç olarak şunu söyleyebilirim ki. Web site ara yüzlerini kodlarken bir çok sorunlarla karşılaştığımız internet tarayıcıları yakın gelecekte bizleri mutlu edecek sürümler çıkaracaktır. Her ne kadar iyimser olsak da sonucun ne olacağını tam olarak kestirmek zor. Daha az düzeltme kodu yazdığımız bir internet alemi istiyoruz. Bunu sağlayabilmek için rekabet olması şart bence.

Kaynaklar

• http://www.fatihhayrioglu.com/?p=470
• http://www.fatihhayrioglu.com/?p=259
  
• http://www.bilgisayartoplulugu.com/index.php?option=com_content&view=article&id=16:hangi-internet-taraycs-daha-iyi&catid=6:web&Itemid=11
• http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
  

not: Son olarak Nisan 2008′da tarayıcı kullanım oranları. http://www.favbrowser.com/internet-explorer-opera-mini-gains-firefox-and-safari-loses-april-08/

Biz CSS’de hata ayıklamak için bir çok yöntem kullanırız. Bunların en çok kullanılanları aşağıda anlatılmıştır.

Çocuk Seçicileri Kullanarak Hata Ayıklamak

Çocuk seçicilerini incelemek için tıklayınız. Çocuk Seçicileri CSS hata ayıklama yöntemi olarak kullanılabilir. Çocuk Seçicileri Windows sistemlerinde kurulu olan IE6 ve alt versiyonlarında görüntülenmeyecektir, bu nedenle IE6 ve altı versiyonlarda görünmesi istenmeyen tanımlar Çocuk Seçicileri kullanarak gizlenebilir.

Her tanımlamadan sonra ikinci bir tanımlama olarak kullanılır. İkinci tanımlama çocuk seçicisi olmalıdır.

.icerik h3 {height:21px;}
.icerik > h3 {height:auto; min-height:21px;}

IE 7 Çocuk Seçicilerini desteklemektedir. Bu metot uygulanırken bu dikkate alınmalıdır.

Özellik(Attribute) Seçicileri Kullanarak Hata Ayıklamak

Diğer bir hata ayıklama yöntemi Özellik Seçicileri kullanarak hata ayıklamaktır. Bir çok yeni nesil web tarayıcısı (FF ve Safari) bu kullanımı destekler, ancak IE6 ve altı versiyonlar bu özelliği desteklemez. IE7 bu kullanımı desteklemektedir. Bu hata ayıklama yöntemi yukarıda bahsettiğimiz “Çocuk Seçicileri ile Hata ayıklama” yöntemi gibi kullanılır.

Özellik Seçicileri kullanarak elementlerin id’lerine göre atamalar yapabiliriz. Bu bize bir çok avantaj sağlar. Bu avantajları hata ayıklamak içinde kullanabiliriz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
	<style type="text/css">
    p{background: red; /* Tüm web tarayıcılarında görünür */}
    body[class|="sayfaYapisi"] p{ background: green; /* IE 7 ve Yeni web tarayıcılarında görünür Opera hariç */}
    </style>
</head>
<body class="sayfaYapisi">
	<p>Test</p>
</body>
</html>

Genel Seçicileri (*) Kullanarak Hata Ayıklamak

Her ne kadar bu hata IE7 ile birlikte düzeltildiyse de çok kullanışlı bir hata ayıklama metodudur. Kullanımı çok basittir.

a:hover {border: 1px dotted black;}
* html a:hover { // bu tanımlamayı ie6+ ve altı versiyonlarda görünmeyecektir.
	border-style: solid;
}

Ters Bölü İşareti(\) İle Hata Ayıklama

IE5x/Win versiyonları bu karakteri yorumlamazlar bu nedenle IE5x/win versiyonlarından kodumuzu gizlemek için bu yöntemi kullanabiliriz. CSS kodu yazarken en çok ihtiyacımız olan genişlik tanımının IE5x versiyonlarda yanlış algılanmasıdır. bu hatayı düzeltmek için bu yöntem kullanılabilir.

#icerik {
  width: 770px;
  wid\th: 750px; /* ie5x - win bu kodu görmeyecek */
}

Ben şahsen kutu modelinde hata ayıklamak için tantek‘in kullandığı metodu kullanıyorum, daha sağlıklı ve tüm web tarayıcıları göze alınarak hazırlanmış bir hata ayıklama metodudur tavsiye ederim. Ama bu yönteminde kullanıldığını bilelim.

Alt Çizgi (_) ile Hata Ayıklama

Bu yöntemde IE4-6 versiyonlarda hata düzeltmek için kullanılabilir.

#menu {
  position: fixed;
  _position: static;
}

Burada yeni nesil web tarayıcıları ikinci tanımlamayı görecek ve buna göre yorumlama yapacaktır. Ancak IE4-6/win versiyonları (_) anlayamadığı için bu kodu yorumlamayacak ve ilk koda göre hareket edecektir.

Owen Yöntemi ile Hata Ayıklama

şžimdiye kadar ki tüm yöntemler Internet Explorer içindi. Bunun nedeni bir çok hatanın IE’den kaynaklanmasıdır tabi. şžimdi kullanacağımız metod ise Opera için bir hata ayıklamasıdır.

.solAlan {
	background-image: none
}
/*  Asagidaki bolum Opera 6 ve altı veya IE6/win görünmeyecek */
head:first-child+body .solAlan {
	background-image: url(menu.png);
	background-attachment: fixed;
}

Bu yöntem hem Opera 6 ve altı hem de IE6 ve altı versiyonlar için geçerlidir. Sadece Opera 6 ve altı versiyonlar için kod yazmak istersek

html>body div.alt {
	c\olor: red; /* sadece Opera 6 için */
}
head:first-child+body div.alt {
	color: black;
}

Yorum Kodları içinde (\) Kullanımı ile IE/Mac’de Hata Ayıklama

IE/Mac versiyonlarında yorum satırı içindeki ters bölme işaretini(\) yorumlamamaktadır. Bu nedenle IE/Mac versiyonlarında hata ayıklamak için bu yöntem kullanılabilir.

/* bu alani IE5/Mac den gizleyelim \*/
* html {
	height: 1px;
}
/* hata ayiklama sonu */

Bunların dışında kutu modeli hata ayıklaması için kullandığımız tantek‘in yöntemi, Css de kodumuzu İE’den gizleme adlı makalede kullandığımız !important yöntemi ve IE’da min-width, min-height,max-width, max-height Kullanmak makalesinde kullandığımız expression() yöntemleride vardır. Bunlardan daha önce bahsettiğimiz için değinmedik. Bunların dışında kullanılan diğer bazı yöntemler olsa da biz burada genel kabul görmüş yöntemleri yazmayı uygun bulduk.

Kaynaklar

• http://www.webdevout.net/articles/css_hacks.php
• http://swik.net/CSS/CSS+Hacks
• http://css-discuss.incutio.com/?page=CssHack
• http://www.quirksmode.org/css/csshacks.html
• http://tantek.com/CSS/Examples/boxmodelhack.html
• http://www.albin.net/CSS/OwenHack.html

• Widgets – Küçük web uygulamalarını (multimedya, anlık haber, oyunlar ve daha fazlası) masaüstünüze getiren eğlenceli bir teknoloji. Bir çok web geliştiricisi kendi widgets’ini geliştirip paylaşıma sunmakta bunun için işlemtim sistemi sınırlaması da yok. Opera bunu bize sunuyor (kısa yol – F6). İleri bir çok geliştirici Opera da widgets lerini yayınlayacklar diye bir iddası var.
• BitTorrent : Çok bilinen dosya paylaşım programı BitTorrent’i kendine eklemiş Opera. Yüksek boyutlu dosyaları kolay yoldan indirmek için güzel bir şey.
• İçerik Sabitleyici: Web sayfasındaki resim ve reklam gibi öğerleri kaldırıp sadece içeriğe odaklanmak isteyenler için birebir.
• Zengin Metin Düzenleyecisi geliştirilmiş.
• Arama kutusundaki arama motorlarını kendinize göre ayarlayabiliyorsunuz.
• Tab teknolojisine Thumbnail önizlemesi ile daha fazla erişebilrilik katılmış. Sadece tab üzerine farenizin imlecini getirmeniz yeterli
• Siteye özel ayarlamalr yapmanıza olanak sağlıyor. Çerez kullanımına izin vermek, popuplarını göstermek veya engellemek gibi

Gerçekten çok güzel özelliklerle geliyor Opera 9, İnternet Tarayıcısı savaşları kızışacağı benziyor. Bu durum web geliştircilerin her ne kadar hoşuna gitmese(tarayıcı farklılıkları ile uğraşmakatan gına geldi) de kullanıcı için güzel olanaklar.

Download için:http://www.opera.com/download/index.dml?ver=9.0b