Fatih Hayrioğlu'nun not defteri » Google Chrome http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 CSS3 ile yuvarlak kenarlı resim yapmak http://www.fatihhayrioglu.com/css3-ile-yuvarlak-kenarli-resim-yapmak/ http://www.fatihhayrioglu.com/css3-ile-yuvarlak-kenarli-resim-yapmak/#comments Tue, 01 Feb 2011 22:45:11 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=2022 Bir resminize kenar çizgisi tanımı yapıp daha sonrada köşelerini ovalleştirmek istediğinizde köşelerdeki kenar çizgilerinde sorun yaşıyoruz. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
img{ border:2px solid #999; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
</style>
</head>
<body>
<img src="gudi.jpg" width="75" height="75" />
</body>
</html>

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

Kırmızı ile işaretlediğim yere dikkat ederseniz sorunlu gözüken kısımalar var. Bu sorun tarayıcıların bir sorunu gibi duruyor. Eğer ie’nin sorunları ile bu kadar zaman kaybetmemiş olsa idik şimdi böyle güzel sorunlarla uğraşacaktık ve tarayıcılar bu sorunları düzletmek için uğraşacaktı.

Çözüm1:

Çözüm için dışa bir kapsayıcı div atayıp kenar çizgisi tanımını bu katmana yaparak çözebiliyoruz. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu"><img src="gudi.jpg" width="75" height="75" /></div>
</body>
</html>

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

Kodunu aldığım sitede resim ve kapsayıcı katmana aynı border-radius değeri verilmiş, ancak ben öyle yapınca Chrome’da beyazlıklar ortaya çıktı bu nedenle bende kapsüle 12px verirken resme 10px border-radius verdim.

Örnek Safari ve Chrome’da çalışırken Firefox3.6 ve Opera11’de çalışmıyor.

Firefox4 ve yeni webkit tabanlı tarayıcılarda bu sorun ise kökten çözülmüş, tanımı direk resme verebileceğiz.

Çözüm2:

Firefox3.6 ve Opera için CSS3 Rounded Image With jQuery makalesindeki yöntemden yaralanabiliriz.

HTML kodumuzu şöyle değiştirelim

  • <div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
  •    <img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
  • </div>

Resme saydamlık verilip görünmez yapılıyor ve satır için css kodları tanımlanıyor, amaç buradaki kodları jquery yardımı ile bg olarak tanımlamak .

jQuery kodumuz 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {

	$(".resimKapsulu").load(function() {
		$(this).wrap(function(){
			return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
		});
		$(this).css("opacity","0");
	});

 });
</script>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
	<img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
</div>
</body>
</html>

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

Ben bu çalışmayı iphone ve ipad için kod geliştirirken denk geldiğim için diğer tarayıcıların benim için pek önemi yoktu açıkçası. iphone ve ipad için ilk çözümü uygulayıp geçtim açıkçası, ama lazım olanlar için ikinci yöntem de kullanılabilir.

Kaynaklar

]]> http://www.fatihhayrioglu.com/css3-ile-yuvarlak-kenarli-resim-yapmak/feed/ 2 CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma http://www.fatihhayrioglu.com/css-ipucu-27-chrome-ve-safaride-textarea-genisletme-islevini-kaldirma/ http://www.fatihhayrioglu.com/css-ipucu-27-chrome-ve-safaride-textarea-genisletme-islevini-kaldirma/#comments Wed, 01 Sep 2010 12:45:09 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1829 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

]]> http://www.fatihhayrioglu.com/css-ipucu-27-chrome-ve-safaride-textarea-genisletme-islevini-kaldirma/feed/ 9 Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım http://www.fatihhayrioglu.com/safari-ve-chromeda-metin-girditextbox-alanlarini-kenar-cizgileri-kaldiralim/ http://www.fatihhayrioglu.com/safari-ve-chromeda-metin-girditextbox-alanlarini-kenar-cizgileri-kaldiralim/#comments Fri, 24 Jul 2009 07:54:51 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1282 Safari ve Google Chrome tarayıcıları her hangi bir metin girdi alanına(text input) odaklandığında bu elemanın etrafını bir şerit ile belirliyor.


Google Chrome Normal Hali

Google Chrome Odaklanmış Hali

Safari Normal Hali

Safari Odaklanmış Hali

Bu normalde güzel bir özellik, ancak biz eğer standart metin girdi alanı yerine kendi tasarladığımız bir metin girdi alanı koydu isek bu odaklanma çizgileri sorun çıkarıyor. Bir örnek yapalım.

En son projelerimden bonus.com.tr’de böyle bir sorun ile karşılaştığımda buna bir çözüm aradım. İlk kodum şöyle idi. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background-color:#52c520;}

.aramaMetinKutusu{
	background:url(images/arama_zemini.gif) 0 0 no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusuOdak{
	background:url(images/arama_zemini.gif) 0 -31px no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusu input{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
}

.aramaMetinKutusuOdak input:focus{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
	background-color:#F6FFD4
}

</style>
</head>

<body>
<div class="aramaMetinKutusu">
    <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />
</div>
</body>
</html>

Bu kodlarım Firefox ve IE’de sorunsuz çalıştı. Daha sonra sayfayı Google Chrome’da test ettiğimde aşağıdaki gibi bir sorun ile karşılaştım.

chrome_odak

Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.  

input{
outline:0
}

tanımı bizi çözüme ulaştırdı.

Örnek kodu görmnek için tıklayınız.

Peki dış hat çizgisini kaldrımayalım demiştik şimdi ise kaldırdık, ne olacak şimdi? Burada odaklanma durumu için bir sınıf atayıp ona ayrı bir tanım yaptığımız için klavye kullananlar için sorun olmayacaktır.

Kaynaklar

]]> http://www.fatihhayrioglu.com/safari-ve-chromeda-metin-girditextbox-alanlarini-kenar-cizgileri-kaldiralim/feed/ 7 11 Eylül 2008 web’den seçme haberler http://www.fatihhayrioglu.com/11-eylul-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/11-eylul-2008-webden-secme-haberler/#comments Thu, 11 Sep 2008 11:59:28 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=605
  • jQuery ile yapılmış güzel bir efekt. Bağlantı
  • FireFox, Opera ve Webkit’den sonra Internet Explorer’da kendi özel ön ekini CSS özelliklerine eklemiş. Bağlantı
  • Partilerin İnternet Stratejileri – hasanyalcin.com Bağlantı
  • TechCrunch50′den ilk gün izlenimleri – webrazzi.com Bağlantı
  • CSS ile Konumlandırma ilgili güzel bir ipucu uyugulama. Bağlantı
  • WordPress 2.6.2 sürümü çıkmış yükselttim. Yaklaşık 5 dakikamı aldı. Bir sorun görünmüyor.
  • Form girdi alanlarını maskelemk için jquery ile yapılmış bir script. Bağlantı
  • CSS sıfırlama teknikleri hakkında güzel bir makale. Bağlantı
  • Google Chrome’dan beklenen 10 şey. Bağlantı
  • Web kod yazarları için 20 Firefox eklentisi. Bağlantı
  • Güzel <hr> örnekleri. Bağlantı
  • Neden Webkit yükselirken Mozilla düşüşe geçti. Bağlantı
  • CSS 3.0 çalışmalarını sürdüren grup kenarlık(border) ve ardalan(background) üzerine son çalışmalarını tamamlamış. Bağlantı 
  • Tek tıklama ile dosya göndermek için jquery eklentisi. Bağlantı 
  • jQuery ile menü elemanlarına efekt vermek. Bağlantı 
  • WordPress Temanızdan Silebileceğiniz 13 Etiket – alemsite.com geçen haberlerde bahsettiğim konuyu Selman Kara Türkçeye çevirmiş. Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/11-eylul-2008-webden-secme-haberler/feed/ 0     09 Eylül 2008 web’den seçme haberler http://www.fatihhayrioglu.com/09-eylul-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/09-eylul-2008-webden-secme-haberler/#comments Tue, 09 Sep 2008 11:21:47 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=593
  • Özel form elemanları tasarlamak. Bağlantı
  • Google Chrome ipuçları. Bağlantı
  • Google Chrome javascript hata konsolu kodları. Bağlantı
  • WordPress temasını geliştirmek ve yenilemek Bağlantı
  • WordPress Kurulumu Sonrası Yapılacaklar Listesi – webdeneyimleri.donanimhaber.com Bağlantı
  • WordPress sitenizde silmeniz gerek 13 kod. Bağlantı
  • gameQuery ile oyun kodlamak. jQuery alt yapısını kullana gameQuery bize oyun kodlamak için kolaylıklar sağlıyor Bağlantı
  • Şehriderya WordPress Teması Huzurlarınızda… – sehriderya.net Bağlantı
  • Web tasarımcıları için posterler. Bağlantı
  • jQuery öğrenmeye başlamak için. Bağlantı
  • Internet Explorer 6 bloklamak için. Bağlantı
  • İnternet Tarayıcıları savaşı 2.0 Bağlantı
  • eBurhan Fix Feed v1.1 yayınlandı… – eburhan.com Bağlantı
  • Internet Explorer 8′deki CSS gelişmeleri. Bağlantı
  • Google Chrome’un bilinmeyen yanları. Bağlantı
  • SmashingMagazine’den güzel bir WordPress teması daha Agregado. Bağlantı
  • 12 adet WordPress RSS eklentisi. Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/09-eylul-2008-webden-secme-haberler/feed/ 2     05 Eylül 2008 web’den seçme haberler http://www.fatihhayrioglu.com/05-eylul-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/05-eylul-2008-webden-secme-haberler/#comments Fri, 05 Sep 2008 12:35:10 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=591
  • Google Chrome’un kızıştırdığı pazarda Firefox yeni javascript motorunun daha hızlı olduğunu idda ediyor. Bağlantı
  • Google Chrome bir çok özelliğinin yanında beni en çok etkileyen javascript yorumlama hızı. test sonuçları ortada. Firefox’un uzun süredir üzerinde çalıştığı yeni javascript yorumlama sistemide bundan daha iyi bir performans veriyorumuş. Firefox 3.1 ile birlikte gelecekmiş. Ne diyelim stadartlara uyduktan sonra bizim için rekabet her zaman iyidir. Bağlantı
  • Freelance iş yapanlara bilgi linkleri. Bağlantı
  • 40 güzel web sitesi. 2 ve 3 kolonlu yapılar ve güzel örnekler. Kodlarını incelemenizi öneririm Bağlantı
  • WordPress Türkiye yenilenmiş. Bağlantı
  • Google’dan 101 ipucu. Bağlantı
  • Web sitesi oluştururken dikkat edeceğimiz konuların listesi. Bağlantı
  • WordPress istatistiklerini takip edebilieceğimiz 10 araç. Bağlantı
  • John Resig Google Chrome ile alevlenen javascript motorları hakkında bir yazı yazmış. Bağlantı
  • Safari’nin metinleri kötü taramasını engellemek. Bağlantı
  • Apple.com’dan alacağımız 5 CSS dersi. Bağlantı
  • Sayfa ardalan resminin ilk yüklenmesini istersek. Bağlantı
  • İnternet Explorer 8 ile birlikte FireBug alternatifi Web Developer Tool’unu geliştirmiş. Bağlantı
  • jQuery ile sayfa içinde animasyonlu kaydırma yapmayı anlatan güzel bir video ders. Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/05-eylul-2008-webden-secme-haberler/feed/ 0     Google Chrome – Birde benden dinleyin :D http://www.fatihhayrioglu.com/google-chrome-birde-benden-dinleyin-d/ http://www.fatihhayrioglu.com/google-chrome-birde-benden-dinleyin-d/#comments Thu, 04 Sep 2008 14:38:22 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=584 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.

    1. 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.

    1. <html>
    2. <head>
    3. <style>
    4. body:nth-of-type(1) p{
    5.    color: #ff0000; // sadece safari ve chrome görecek
    6. }
    7. </style>
    8. </html>
    9. <body>
    10. <p>deneme olarak bunu yazıyorum</p>
    11. </body>
    12. </html>

    Javascript ile yakalamak içinde 

    1. 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 

    ]]>     http://www.fatihhayrioglu.com/google-chrome-birde-benden-dinleyin-d/feed/ 15     03 Eylül Web’den seçme haberler http://www.fatihhayrioglu.com/03-eylul-webden-secme-haberler/ http://www.fatihhayrioglu.com/03-eylul-webden-secme-haberler/#comments Wed, 03 Sep 2008 08:32:15 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=582
  • Hasan Yalçın sitesini yenilemiş. Hayırlı olsun. Bağlantı 
  • Bu aralar yazı tipi gömme işleri üzerine bayağı bir çalışma var. Bence çok gecikmiş bir özellik umarım tüm tarayıcılar anlaşırlarda iş tatlıya bağlanır. Bağlantı 
  • Internet Explorer 8.0 Beta 2 yayınlanmış. Bağlantı 
  • Internet Explorer 8.0 Beta 2 ile gelen güvenlik yenilikleri – daron.yondem.com Bağlantı 
  • display-inline:block hakkında güzel bir makale. Bağlantı 
  • Ağustos ayında yayınlanmış güzel makaleler. Süper derleme Bağlantı 
  • Web tasarımlarınızın erişebilirliğini ölçebileceğimiz 10 araç. Bağlantı 
  • 30 günde mootools öğrenmeyi anlatan güzel bir site. Bağlantı 
  • Birebir tasarıma uygun kod yazmak için güzel bir yöntem. Bağlantı 
  • Internet Explorer 6′yı engelleyelim. Bağlantı 
  • FireFox, Internet Explorer, Safari ve Opera’ya göre filtreleme yapmak. Bağlantı
  • Google internet tarayıcı sektörünede girdi. Google Chrome adlı yeni tarayıcı rekabeti kızıştıracak gibi. Bağlantı 
  • Google Chrome çıktı. Hızlı, sade ve güven veriyor. Stadandartları destekliyor. Acid 2 testinden tam puan aldı. İndirmek için tıklayınız. Özelliklerini incelemek için tıklayınız  Bağlantı
  • Html elemanlarının CSS testini sağlamak için hazırlanmış güzel bir html dosyası. Bağlantı 
  • jQuery’nin güzel bir eklentisi jParallax. Bağlantı 
  • Profoyonel sitelerden temel olarak nasıl yardım alabilriz. Bağlantı 
  • Modern web sitelerinde javascript’in yeri. Bağlantı 
  • Çok kademeli sitler için güzel bir menü örneği. Bağlantı 
  • Google Analitics ipuçları. Bağlantı 
    • ]]>     http://www.fatihhayrioglu.com/03-eylul-webden-secme-haberler/feed/ 0