‘ie8’ etiketi için sonuçlar
Yuvarlak kenarlı kutular(border-radius) oluşturmak
Temmuz 20th, 2010 • 6 yorum CSS, XHTML
Etiketler: border-radius, css3, ie6, ie7, ie8, yuvarlak kenar, yuvarlak kenarlı kutular
Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli alanlar oluşturmak. IE hariç css ile bu yapıyı kurmak çok basittir. Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca IE için javascript çözümlerini ele alacağız.
border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.
Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi. Okumaya devam edin »
İnternet Explorer 8′in CSS Desteği
Mart 31st, 2010 • 8 yorum CSS, Haberler
Etiketler: :active, :after, :before, content, Data URI, display:inline-block, focus, hasLayout, ie8, outline
Biraz geç kalmış bir yazı olacak, ancak İnternet Explorer 8 çıktığından beri ilk defa birinciliği Firefox’dan aldı. Bende bu makaleyi yazmaya gerek duydum. Açıkçası İnternet Explorer 8′e ilgisiz kaldık. İnternet Explorer 6 ile o kadar uğraştık ki serinin 8. sürümü biraz atıl kaldı.
İnternet Explorer 8 yayıldıkça sorunları ortay çıkmaya başladı, yani test potamıza girmeye başladı. Her ne kadar uyumluluk kodu ile İnternet Explorer 7 gibi yorumlamasını sağlayıp test tarayıcı sayısını bire düşürme imkanımız olsada yeniliklerinden yararlanmak için bu kodu kullanmamak gerekebilir. Ayrıca makaleyi geç yazmamızın bir avantajı oldu o da ie8 sorunlarınıda görmeye başladık.
İnternet Explorer 8 ile birlikte CSS2.1 standartlarını tam desteklediğini açıkladı.
İnternet Explorer 8 ile gelen CSS özellikleri listesi; Okumaya devam edin »
IE8 Açılır Menü İçindeki Input Alanı Üzerince Gelince Menü Kapanma Sorunu
Şubat 26th, 2010 • CSS, XHTML, jquery
Etiketler: ie8, input, menü, sorun
Sorun tam olarak şu; açılır bir menü eğer bir resim üzerinde ise menü içindeki input alanı üzerine gelince menü istem dışı olarak kapanıyor. Diğer hiç bir tarayıcıda sorun yokken ie8 bu durumda sorun oluşturuyor.
İnternet Explorer’ın sorunlarına alışmış bu bünye Microsoft’un bu yeni nesil eskimiş tarayıcısından böyle bir sorun olmasını yadırgamadı açıkçası. Soruna ie7 gibi yorumlama kodunu ekleyerek çözmek istedim ama kod sitenin dinamik kısımlarında çalışırken statik kısımlarında çalışmadı.
Bu iş ile bir projede karşılaştım, proje ismini açıklamak sakıncalı olabilir diye ben size benzer bir örnek kodunu vereceğim.
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').hover(function(){
$(this).children(':last').show();
},
function(){
$(this).children(':last').hide();
});
});
</script>
<style type="text/css">
a{ position:relative;}
a div{display:none; padding:20px; background-color:#999; width:250px; position:absolute; top:18px; left:0}
a div input{ background:transparent}
</style>
</head>
<body>
<a href="javascript:;">menu aç
<div><input type="text" /></div>
</a>
<p><img src="http://www.fatihhayrioglu.com/wp-content/ie7_kaydirma_cubugu.jpg" width="450" height="398" /></p>
</body>
</html>
Örneği görmek için tıklayınız.
Bende sorunu araştırmaya başladım ve sonunda buldum. Sorun input‘a atanan background:none veya background:transparent tanımlamalarından kaynaklanıyor. backgorund’a renk veya resim tanımı yapınca sorun çözülüyor.
Ben tasarıma uymak için background’a resim tanımlayarak sorunu aştım.
Kaynak
Dış Hat Çizgilerini(outline) Kaldırmak
Haziran 24th, 2009 • 4 yorum CSS
Etiketler: dış-hat-çizgisi, Firefox 3, ie6, ie7, ie8, klav, klavye-kullanmak, outline
Ben bu konuyu aslında dış hat çizgilerini kaldırmak olarak adlandıracaktım. Sonra bu konudan kitapta bahsettiğim halde sitemde bahsetmediğimi fark ettim ve dış hat çizgisi özellikleri adlı bir önceki makaleyi yazdım. Sonra da bu makaleye geçtim. Ancak biraz araştırınca, aslında dış hat çizgilerini kaldırmayı savunanlar ve karşı çıkanlar diye iki grup var. Kaldıralım diyenler ne için kaldıralım diyor kaldırmayalım diyenler ne için kaldırmayalım diyorlar inceleyip göreceğiz. Bir ara yol bulabilirmiyiz?
Kaldıralım diyenler.
Kaldıralım diyenler genelde dış hat çizgilerinin oluşturduğu kesikli gri çizgiden rahatsız olanlar. Bunda en çok son zamanlarda gelişen metin yerine resim koyma metotlarınında etkisi var. Aşağıda benimde kullandığım metin yerine resim koyma metodunu kullanarak yaptığım örnekler.
- http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/
- http://www.fatihhayrioglu.com/css-ile-menu-olusturmak-v-resimli-menuler/
- http://www.fatihhayrioglu.com/dokumanlar/basit_resimli_menu.html
text-indent:-9999px ile görünmez yaptığımız metinleri outline ile görünür hale getirdiğimizde pek hoş görüntüler ile karşılaşmayız.
Firefoxda böyle bir sorun var iken ie ve google chrome’da sadece elemanın çevreleyen bir çizgi görünmektedir. Opera ve Safari’de ise tab ile sadece sayfa içindeki form elemanlarında gezebiliyoruz.
Bana burada kötü görünen metin yerine resim kullandığımız menü elemanlarını seçince sola doğru uzayarak çıkan kesikli çizgi yoksa ie ve chrome daki gibi elemanı saran kesikli çizgi bence kötü görünmüyor. Firefox’daki bu sorunu çözmek için bir kod var.
a{visibility:hidden}
tanımı ie ve chrome gibi göstermesini sağlıyor.
Bide bu çizgileri hiç görmek istemeyenler var. Bunu engellemenin en kolay yolu outline:none veya outline:0 tanımlarıdır.
a{outline:none}
Bu tanım bir çok css sıfırlama tekniğinde yer almaktadır. Örneğin Eric Meyer‘in sıfırlama tekniğinde. Bu yöntem bir çok yerde çözüm olarak sunulmaktadır. Kaynaklar kısmındaki linkler bunlardan bir kaçı.
Kaldırmayalım diyenler
Kaldırmayalım diyenlerde bu özelliğin erişebilirliği arttırmak için çıkarıldığını ve sadece klavyesini kullanan kullanıcılar için elzem bir özellik olduğunu belirtmektir. Eğer sitelerimizi erişebilir yapacaksak ve bunun için mesai harcayacak isek. Bu özelliği sıfırlamak mantıklı olmayacaktır.
Örneğin cnnturk.com sitesine Firefox ile girince sadece klavye kullanarak siteyi gezmeye çalışın. Bu sizi zorlayacaktır, çünkü tab’a her bastığımızda nerede olduğumuzu kestirmekte zorlanıyoruz. Burada tek yardımcımız alttaki tarayıcı çubuğunda her tab tuşuna bastığımızda bağlantıdan bağlantıya geçişlerde durum çubuğunda bağlantıların gösterilmesidir.
a {color: #004276; text-decoration: none; outline: none; }
tanımı nedeni ile dış hat çizgileri bize yardımcı olmayacaktır.
Şimdi webaim.org/ adresine girince klavyeden siteyi gezin. Bu sitede outline değeri standart bırakılmış ve ayrıca odaklanmalar için ayrı bir tanım yapılmıştır.
a:active, a:focus, a:hover {
background-color:#FFFFCC;
color:#BF1722;
text-decoration:underline;
}
Tanımları yardımı ile odaklanılan bağlantılar daha belirgin hale getirilmiştir. Böylece klavyesi ile siteyi gezmeye çalışan insanlara rahatlık sağlanmış olur.
Biz zaten klavye ile dolaşamıyoruz, faremizle takılıyoruz. Evet bir çok insan web sitelerini gezerken klavye kullanmıyor olabilir, ama bazen fare kullanan insanlar bile kısayol için klavye kullanıyor ve erişebilirlik için sadece klavye kullanan insanları göz ardı edemeyiz. Ayrıca web2.0 ile İnternet ortamına taşınan programlarda(google reader, google dokümanlar vb.) klavye kısa yollarından yararlanılmaktadır. Web mecrasında ileride daha etkin bir klavye kullanım oranlarına ulaşabiliriz.
Sonuç
Sonuçta her iki görüşü savunanlar için bir çözüm üretmeye çalışırsak;
http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/ makalesinde anlattığımı örnek üzerinden devam edelim.
yukarı görüldüğü gibi bir sonuç çıkıyor. Kare olan menülerde o kadar kötü görünmüyor, ama buradaki gibi oval köşeli olunca outlinr çizgileri daha kötü bir görüntüye neden oluyor.
Çözüm önerimiz şu outline’ı kaldıralım, ama klavye kullanan kişiler içinde bir çözüm üretelim. Farenin üzerine geldiği hali(:hover) klavyenin tab’ı ile geldiğinde de uygulayalım. outline’ı kaldıralım tabi.
a.anasayfayaDon {
display: block;
width: 80px;
height: 80px;
background: url(images/degisen_resim.gif) 0 0 no-repeat;
text-decoration: none;
text-indent:-999px;
}
a:hover.anasayfayaDon, a:focus.anasayfayaDon {
background-position: -80px 0;
outline:none;
}
Şeklinde görünecektir. Bu görüntüyü Firefox, Google Chrome ve ie8′de aldım.
:focus desteği olmayan ie6 ve 7′de ise onun yerine :active sözde sınıfını kullanacağız. Buna rağmen olmayacaktır. outline özelliklerini desteklemeyen ie 6 ve ie7′de ise hala outline kesikli çizgilerinin görülmesi ilginç. Bunun içinde şöyle bir çözüm yolu var.
a:hover.anasayfayaDon, a:focus.anasayfayaDon, a:active.anasayfayaDon {
background-position: -80px 0;
outline:expression(hideFocus='true'); outline:none;
}
expression özelliğini sadece ie destekliyor. Daha önce bahsetmiştik. Bu bir bakıma css içinde javascript çalıştırmak gibi bir şeydir. Bu kod sonunda örneğimiz ie de de çalışacaktır.
Örnek çalışmayı görmek için tıklayınız.
Örnek IE 6, IE7, IE8, FF 3, Google Chrome 2′de test edilmiştir.
Kaynaklar
- http://css-tricks.com/removing-the-dotted-outline/
- http://snipplr.com/view/15704/eliminating-the-dotted-line-box-that-appears-around-a-link/
- http://webaim.org/blog/plague-of-outline-0/(kaldırılmamalı)
- http://www.elctech.com/snippets/css-remove-dotted-outline-border-from-active-links
- http://sackclothstudios.com/css/outline-the-neglected-css-property
- http://arjaneising.nl/css/dont-remove-the-outline-from-links (kaldırılmamalı)
- http://www.karlrixon.co.uk/articles/css/remove-button-focus-outline-using-css/
- http://www.456bereastreet.com/archive/200905/do_not_remove_the_outline_from_links_and_form_controls/ (kaldırılmamalı)
- http://jlaine.net/2007/1/23/hidden-css-stuff-the-outline-property
- http://sonspring.com/journal/removing-dotted-links
- http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
- http://www.maratz.com/blog/archives/2006/01/20/outline-property-for-image-replaced-link/
- http://diveintomark.org/archives/2006/04/25/new-focus-indicator (odaklanmayı arttıran firefox eklentisi)
- http://accessites.org/site/2007/05/keyboard-friendly-link-focus/
IE 8 için CSS Düzeltmesi(Hack)
Haziran 8th, 2009 • 16 yorum CSS, XHTML
Etiketler: css-düzelmesi, ie8, ie8-fix, internet explorer, İnternet Tarayıcısı
İnternet Explorer 8 çıktı ve hızla yayılıyor. Sitemi ziyaret edenlerin %5′i İnternet Explorer 8 kullanıcısı imiş. Bir makalede görmüştüm. İnternet Explorer 8′in hızlı yayılması ile alakalı.
Burada ie8′de css düzeltmesi yapmamız gerektiğinde nasıl bir yol izleyeceğimiz konusunda bir ipucu vereceğim.
.uyari { color /*\**/: red\9 }
Bir çok yerde bu kodun tek başına ie8 için yeterli olduğu yazıyor. Ama ben test ettiğimde ie7′de bu kodu görüyor. Bunun için
.uyari{color:blue} /* tum taricilar */
.uyari { color /*\**/: red\9 } /* ie8 ve ie 7 */
*+html .uyari{color:blue} /* ie 7 */
Şeklinde bir çözüm işimize yaracaktır.
Örneği görmek için tıklayınız.
Ayrıca şartlı yorumlar yardımı ile de yapabiliriz.
<!–[if gte IE 8]>
<style type="text/css">
.uyari {
color: red;
}
</style>
<![endif]–>
Ayrıca daha önce bahsettiğimiz ie7 gibi yorumlama kodu var.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Testlerimi ietester ile yaptım.
Internet Explorer 8′i 7 gibi yorumlama kodu
Mart 23rd, 2009 • 23 yorum XHTML
Etiketler: ie7, ie8, internet explorer, İnternet Tarayıcısı
Bildiğiniz gibi Microsoft Internet Explorer 8′i geçen hafta duyurdu. Eğer sitelerimiz IE8′e tam olarak uygun değilse sayfamıza bir satırlık bir kod ekleyerek bu sorunu çözebiliyoruz.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Kodunu sitemize eklememiz yeterli. Bu META etiketi sayesinde Sayfalarımız Internet Explorer 7′de görünüyor gibi yorumlanacaktır.
Bir projede meta’ların ilk başına yazınca olmadı, </head>’in bir öncesine koyunca oldu aklınızda bulunsun.
