‘safari’ etiketi için sonuçlar

Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım

Temmuz 24th, 2009 • 5 yorum CSS, XHTML
Etiketler: , , , , ,

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

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

Haziran 1st, 2009 • 9 yorum CSS, XHTML
Etiketler: , , , , , , ,

metin_secme_rengicss-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

sIFR, Flash Player10 ve Firefox sorunu

Ocak 7th, 2009 • 12 yorum CSS, Javascript, Web Standartları, XHTML
Etiketler: , , ,

Bir çok projemde sIFR kullanıyorum. Yaklaşık 1-2 ay önce Flash Player 10 çıktıktan sonra sIFR kullandığım başlıklarımda sorun çıkmaya başladı.

İlk başta anlayamadım. Biraz araştırınca sIFR’ın bazı tarayıcılarda(Firefox ve Safari) Flash Player’ı tespit edemediği için böyle bir sorun ile karşılaşıldığı söyleniyor.

Çözüm için yapmamız gerek sifr.js dosyamızı güncellemek ve eğer sIFR 2.0.4′den önceki sürümleri kullandı isek yeni sürümü indirip sifr.fla dosyamızı yeniden export ederek oluşan .swf dosyasını atmak.

sIFR’ın yeni sürümü sIFR3 beta’da böyle bir sorun yok.

Bu kadar basit bir çözüm. Ama içimdeki sIFR sevgisini biraz daha azaltan bir gelişme oldu bu benim için.

Kaynak: http://novemberborn.net/sifr/2.0.7

Google Chrome – Birde benden dinleyin :D

Eylül 4th, 2008 • 15 yorum Haberler
Etiketler: , , , , ,

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.

Okumaya devam edin »

27 Ağustos – 2 Eylül web’den seçme haberler

Eylül 2nd, 2008 • 1 yorum Haberler
Etiketler: , , , , , , ,

  • Javascript ile resim bilgilerini elde etmek. Bağlantı
  • Web uygulamalarını hızlandırmak için çözüm yolları. Bağlantı
  • FireBug 1.2 sürümü yani Firefox 3 içi olanı kararlı sürümü yayınlanmak üzereymiş. Bağlantı
  • 11 WordPress uygulaması ipucu. Bağlantı
  • CSS ile nasıl gölgeli menü yapılır. Bağlantı
  • 10 ünlü CSS geliştiricisinden CSS teknikleri. Bağlantı
  • 40 adet CSS sayfa planlama tekniği bağlantısı. Bağlantı
  • Fireox 3 ile birlikte gelen CSS destekleri. Bağlantı
  • CSS ve javascript ile yapılmış güzel bir garaj kapısı efektli menü örneği. Bağlantı
  • Safari 4 Geliyor (2): 40A12 – macosxpc.com Bağlantı
  • 10 adet jQuery plugini. Bağlantı
  • 30 ücretsiz yüksek kaliteli WordPress teması. Bağlantı
  • Firefox javascript okuma motorunu yeniliyor. Daha hızlı bir Firefox 3.1 kullanacağız. Bağlantı
  • hr kullanımı ve örnekleri. Bağlantı
  • Mutant Web Uygulamalari – azer.r92.org Bağlantı
  • Siteme son zamanlarda çok fazla gereksiz yorum ve geriizleme geliyor. Akismet’i kurdum. İnşallah sorunları gideririz.

19 Haziran 2008 web’den seçeme haberler

Haziran 19th, 2008 • 3 yorum Haberler
Etiketler: , , , , , , , ,

  • CSS ile Vista Aero düğmelerine benzer düğme oluşturmak Bağlantı 
  • Web kod yazarları için 40 adet Firefox eklentisi. Bağlantı 
  • 40 adet WordPress uygulması ve ipucu. Bağlantı 
  • Firefox’un gelişim süreci ekran görüntüleriyle. Bağlantı 
  • jQuery IU 1.5 ile birlikte gelen ThemaRoller anlatan güzel bir video. Bağlantı 
  • Web tasarımcılarının izlemesi gereken 12 süper site. Bağlantı 
  • Safari’nin metin yorumlamasını normale çevirmek. Bağlantı
  • En çok aranan Wordpress ipuçları – dmry.net Bağlantı 
  • Güzel bir animasyonlu(gif) menü örneği. Bağlantı 
  • Aria slider örnekleri. Kullanışlı örnekler. Bağlantı 
  • Firefox Ebeveyn Eklentisi : Glubble – nucro.org Bağlantı 
  • Liste etiketi ile yapılmış takvim uygulaması. Bağlantı 
  • Firefox3 1 günde 8.3 milyon kişi tarafından indirilmiş. Bağlantı 
  • Site Kapatmaları Abant’ta Masaya Yatırıldı – turk.internet.com Bağlantı 

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.