Fatih Hayrioğlu'nun not defteri » WebKit

Webkit Tabanlı Tarayıcılar(Chrome ve Safari) İçin Düzeltme(Hack) Sorunu ve Çözümü

fatih.hayrioglu — Wed, 21 Sep 2011 13:52:29 +0000

Genelde tarayıcı düzeltmelerini ie için yaparız. Ancak bu sefer Chrome için bir düzeltme yapmam gerekti(Chrome’un line-height ile olan sorun) araştırdım ve media sorgusu ile bir düzeltme kodu buldum.

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .arama { background-color: #FF0000; }
    #solAlan {color: #0000FF;}
}

Şeklinde bir kod işimi gördü, ancak projeyi yayına atarken sıkıştırıp gönderiyoruz ve sıkıştırılınca

@media screen and(-webkit-min-device-pixel-ratio:0)

Satırındaki and ve ( arasındaki boşluğu sıkıştırma esnasında yok ediyor ve buda bu düzeltmenin uygulanmamasına neden oluyor. Çözüm için araya çakma bir yöntem(/*!*/) ile boşluk bırakmalıyız.

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }

Şeklinde çözüm üretebiliyoruz.

Belki küçük bir ipucu ama lazım olur günün birinde

Kaynaklar

CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma

fatih.hayrioglu — Wed, 01 Sep 2010 12:45:09 +0000

Webkit tabanlı tarayıcılarda(Google Chrome ve Safari) textarea’ların sağ alt köşesinde textarea’yı genişletmeye yarayan bir işaret bulunur bu işretin üzerine mouse ile basıp genişliği ve yüksekliği arttıra biliriz. Bu işlem kullanıcının uzun içerik girdiği durumlar düşünülerek konulmuştur ve yararlı bir özelliktir. Ancak bazen bu işaret ve işlevini kullanmak istemediğimiz durumlar olur ve bu işareti kaldırmak isteriz. Bu durum için çok kısa bir css kodu işimizi görüyor.

textarea{ resize:none}

Sadece bu kod ile istediğimizi elde edebiliriz.

Tek sakıncası bu kodu sadece webkit tabanlı tarayıcılar desteklediği için sayfamızı w3c CSS kontrolünden geçirdiğimizde hata verecek olmasıdır.

Kaynak

CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek

fatih.hayrioglu — Mon, 01 Jun 2009 14:33:16 +0000

css-tricks.com sitesine her girdiğimde metinleri seçince çok hoş bir görüntü ile karşılaşıyorum. Bence çok güzel. Belkide standart renklerden bıktığım için farklı renkler bana hoş geliyor. Metinleri seçince ardalan rengini ve metin rengini değiştirebilmek çok güzel bence. Özelliğin tek kötü yanı Internet Explorer’un(8. sürüm dahil) desteğinin söz konusu olmaması.

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

Tablo Satırına Verilen Ardalan Resminin Tekrarlama Sorunu

fatih.hayrioglu — Mon, 13 Apr 2009 11:29:41 +0000

Tablo satırına ardalan resmi tanımladığımızda Firefox ve Opera’da sorun yok iken Internet Explorer ve Webkit tabanlı tarayıcılarda(Safari ve Google Chrome) sorun çıkarıyor. Biz burada Internet Explorer için nasıl bir çözüm üretebiliriz onu göstereceğiz. Webkit tabanlı tarayıcılar için çözüm bulamadım üzgünüm.

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
}

Örneği görmek için tıklayınız.

tanımlaması Firefox ve Opera da sorunsuz çalışırken IE ve Webkit tabanlı tarayıcılarda sorun çıkaracaktır.

Çözüm için

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
    position:relative;
}

table tr td{
    color:#fff;
    font:12px Arial, Helvetica, sans-serif;
    background:none;
}

tanımlamaları yeterlidir. Örneği görmek için tıklayınız.

Kaynak

http://test.pixelbebop.com/test33/

Google Chrome – Birde benden dinleyin :D

fatih.hayrioglu — Thu, 04 Sep 2008 14:38:22 +0000

Her yeni çıkan tarayıcının ardından inceleme yapıp yazı yazıyorum genelde. Tabi Google Chrome içinde bunu yapacaktım ki baktım çok fazla kaynak var. Beni asıl hayrete düşüren Türkçe kaynaklarında çok fazla olması idi. Sonra bir birinin tekrarı içerik oluşturmamak için gördüğüm linkleri kaynaklar kısmına ekledim. Ben ise sadece CSS ve Web Standartları açısından değerlendirmeye karar verdim.

Google Chrome Safari’nin de alt yapısını oluşturan Webkit alt yapısı ile çalışıyor, buda bize Safari neyi destekliyorsa Google Chrome onu destekler ipucunu veriyor. Bir iki özellik(text-shadow ve @font-face) dışında aynı özellikleri destekliyor. CSS destek listesini görmek içintıklayınız.

Benim gördüğüm tek sorun kısayol background tanımında tanımlanan renkerler gelmiyor. Sayfa yenileme ve 5-10 saniye geçtikten sonra geliyor.

background:#f00 url(../images/ardalan.gif) top left repaet-x;

ardalan rengi olan #f00 gelmiyor.

CSS filtrelemesi olarak Safari için kullanılan filtreleme kullanılabilir.

deneme olarak bunu yazıyorum

Javascript ile yakalamak içinde

var is_chrome = navigator.userAgent.toLowerCase().indexOf(‘chrome’) >
-1;

yeterli oluyor. Ayrıca javascript hata yakalama konsolu için http://www1.qainsight.net:8080/2008/09/04/How+To+View+JavaScript+Errors+In+Google+Chrome.aspxsiteyi incelmenizi öneririm.

Erişilebilirlik açısından karnesi kötü bulunmuş. http://www.paciellogroup.com/blog/?p=92 sitesinde yazdığına göre erişilebilirlik açısından yeterli not alamamış. Tabi bu sitenin testi ne kadar kriter onu bilemem.

Eklentilerinin olmaması görünen en büyük eksiklik gibi. Yakında eklenti desteği geleceğini duymak bizi sevindirdi.

Sonuç olarak tüm işlerini internetten gören Google gibi bir şirket için bir tarayıcı çıkarmak gecikmiş bir olay. Ayrıca benim acayibime giden Google’un Firefox ile arama alanı için 2011′e kadar uzattığı haberinin üzerinden kısa bir süre geçmesinden sonra internet tarayıcısı çıkarması. İşin içinde farklı hesaplar var gibi. 2006′da Firefox’a 56 milyon dolar ödediğini düşünürsek çok da anlamsız gelmiyor.

Her yeni çıkan tarayıcının ardından web kod yazarları acaba bu da sorun çıkarırmı düşüncesi sarar ve hemen kodladığı sitleri kontrol eder ki bende öyle yaptım Allah şükür benim sitem(Üst menü ile resim arasında mesafede sorun var) hariç bir sorun yok. Google Chrome Acid 2 testinden geçerken Acid 3 testinden de mevcut tarayıcıların en yüksek puanı olan 79 alması ve standartlar uyması çok güzel bir gelişme. Böyle tarayıcının başımızın üstünde yeri var deriz.

Kaynaklar

Türkçe kaynak

Genel kaynak

javascript motoru

İnternet Tarayıcıları

fatih.hayrioglu — Mon, 12 May 2008 20:27:47 +0000

İnternet Tarayıcıları diğer bir ifade ile Web Tarayıcıları, İnternet veya lokal alandaki ağlarda web sayfalarındaki interaktif metin, resim, video, müzik vb. göstermek için kullanılan programlardır. “Vikipedia”

Ş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

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/

30 Nisan 2008 web’den seçme haberler

fatih.hayrioglu — Wed, 30 Apr 2008 07:13:11 +0000

jQuery ile veri süzme ve sıralama işlemi yapıla bilen güzel bir uygulama. Bağlantı
WebKit(Safari) geliştiricileri işi biraz da abarttı mı ne? Şimdide resimlere CSS ile alfa maske uygulamışlar. Bağlantı
Javascript ajax ile birlikte çok önem kazandı. Bir çok projede javascript kullanıyoruz, peki kullanıcının tarayıcısının javascript açık mı kapalı mı olduğunu nasıl anlarız. Bağlantı
Arama motorlarına uygun asp.net sayfaları oluşturmak. Bağlantı
Apple firması son zamanalarda bayağı bir atağa geçti. İnternet tarayıcısı Safari’de kendini bayağı geliştiriyor. Niye Safari kullanayım diyenler. Bağlantı
Lightbox ile özel diyalog kutuları oluşturmak. Bağlantı
51′den fazla jQuery uygulaması ve makalesi. Bağlantı
Opera Firefox’un Firebug’u gibi bir hata ayıklama aracı geliştirmiş Dragon fly ve 6 Mayıs’da bizlere sunacakmış. Bağlantı
Genelde günlüklerde kullandığımız tarih alanı için CSS ile yapılmış güzel örnekler. Bu arada bende değiştirmeyi düşünüyordum. Bağlantı
Adım adım web sitesi kodlama. Bağlantı
4 adet güzel CSS tekniği. Bağlantı
30 adet güzel css kodu. Bağlantı
Google Dokümanlara CSS düzenleme seçeneği eklemiş. Bağlantı
Efektif web sayfaları hazırlamak için 5 önemli bilgi. Bağlantı