‘safari’ etiketi için sonuçlar
Webkit Tabanlı Tarayıcılar(Chrome ve Safari) İçin Düzeltme(Hack) Sorunu ve Çözümü
Eylül 21st, 2011 • CSS
Etiketler: chrome, css düzeltme, media, safari, WebKit
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
CSS3 ile yuvarlak kenarlı resim yapmak
Şubat 2nd, 2011 • 2 yorum CSS, HTML5
Etiketler: border-radius, css3, Firefox, Google Chrome, problem, safari
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
CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma
Eylül 1st, 2010 • 9 yorum CSS
Etiketler: Google Chrome, safari, textarea, textarea genişletme, WebKit
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
Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım
Temmuz 24th, 2009 • 7 yorum CSS, XHTML
Etiketler: dış-hat-çizgisi, Google Chrome, outline, özel-metin-girdi-alanları, safari, textbox
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.
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://gandamanurung.com/css/how-to-get-rid-textinput-blue-border-in-safari/ (google chrome safari de mavi kenarları yok etmek)
- http://forums.devshed.com/css-help-116/safari-input-focus-blue-border-477819.html
- http://dev.markhaus.com/blog/2009/03/how-to-annul-safaris-outline-effect-in-input-fields-and-friends/
- http://www.usabilitypost.com/2008/10/15/css-tip-remove-mac-osx-glowing-blue-outlin-for-custom-styled-input-fields/
- http://www.infoqu.com/dev/css-help/safari-input-fields-142336-1/
CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek
Haziran 1st, 2009 • 14 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
sIFR, Flash Player10 ve Firefox sorunu
Ocak 7th, 2009 • 12 yorum CSS, Javascript, Web Standartları, XHTML
Etiketler: Firefox, Flash Player, safari, sIFR
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.
