‘WebKit’ etiketi için sonuçlar
CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek
Haziran 1st, 2009 • 9 yorum CSS, XHTML
Etiketler: css3, Firefox, Google-Checkout, internet explorer, Opera, safari, seçili-metin, WebKit
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
Nisan 13th, 2009 • 4 yorum CSS, Web Standartları, XHTML
Etiketler: hata, internet explorer, sorun, tablo, tablo-satırı, tr, WebKit
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
Google Chrome – Birde benden dinleyin :D
Eylül 4th, 2008 • 15 yorum Haberler
Etiketler: Google Chrome, İnternet Tarayıcısı, safari, Web Standartları, web tarayıcısı, WebKit
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.
- <html>
- <head>
- <style>
- body:nth-of-type(1) p{
- color: #ff0000; // sadece safari ve chrome görecek
- }
- </style>
- </html>
- <body>
- <p>deneme olarak bunu yazıyorum</p>
- </body>
- </html>
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.
İnternet Tarayıcıları
Mayıs 12th, 2008 • 9 yorum Haberler
Etiketler: firebug, Firefox, ie, İnternet Tarayıcısı, Opera, safari, web tarayıcısı, WebKit
sayfanın çıktısını al || 
pdf olarak indir
İ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 Okumaya devam edin »
30 Nisan 2008 web’den seçme haberler
Nisan 30th, 2008 • 2 yorum Haberler
Etiketler: adım adım kodlama, arama motoru, CSS maskeleme, css teknikleri, Dragon Fly, efektif web sayfaları, javascript desteği, jquery, lightbox, mesaj popupları, Opera, safari, WebKit
- 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ı
