İ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;

Float

Float uygulamalarındaki hasLayout‘dan kaynaklanan bir çok sorunun giderildiği söyleniyor. İşin aslı hasLayout işleyişi tamamen kaldırılmış ie8′de. Bu sürümdeki en büyük gelişme budur.

Margin Çökme Sorunu

Margin çökme sorunu giderilmiş.

:focus Sözde Sınıfı

Klavyeden elementlere odaklanmamızı sağlayan ve erişebilirlik için önemli olan bu özellik İnternet Exploerer 8 ile geldi

a:focus {
	border: solid 1px red;
}

:before and :after Sözde Elementleri

Bir elemanın öncesine ve sonrasına content özelliği ile birlikte içerik eklememizi sağlayan bu özellik ie8 ile birlikte geldi.

#box:before {
	content: "Not:";
}

#box:after {
	content: "son";
}

:lang() Sözde sınıfı

Sayfa içeriğinde farklı dilde kullanılan içeriği yakalamak için kullanılan bir seçicidir.

:lang(fr) {
	tanimlar
}

:active Sözde sınıfı işlevselliği arttı

Eskiden sadece a bağlantıya verilen özellikleri tanımlayan ie8 şimdi tüm HTML elementlerini kapsıyor artık.

list-style-type Özelliğine ek değerler eklenmiş

list-style-type özelliğinin bir çok değeri var. İnternet Explorer 8 öncesi bunların yarısını destekliyordu 8 ile birlikte hepsini destekliyor.

content özellikleri destekliyor

• content
• counter-increment
• counter-reset
• quotes

:after, :before sözde seçicileri ile birlikte content özelliklerini destekliyor artık ie8

Tablo Özelliklerinin tamamını destekliyor artık

• caption-side 
• border-spacing

özelliklerini destekliyor. Ayrıca

• border-collapse
• border-style
• empty-cells

özelliklerinide tam destekliyor, yani bu özelliklerin tüm değerlerini destekliyor. Eskiden kısmen desteklediği bu özellikleri şimdi tammen destekliyor.

Yazı ve Metin Özellikleri

• font-weight
• white-space (pre-wrap ve pre-line değerleri destekleniyor)
• word-spacing

Ayrıca text-decoration özelliğinin overline değeride destekleniyor.

Yazdırma Özellikleri

@page özellikleri tam olarak destekleniyor.

• page-break-inside
• widows
• orphans

Dış Hat çizgisi(Outline) Özellikleri

Dış hat çizgisi özellikleri desteği geldi.

• outline
• outline-color
• outline-style
• outline-width

Data URI Desteği

Internet Explorer 8 ile birlikte DATA URI desteği geliyor. DATA URI kısaca html dosyasından ayrı yapıların yani resimlerin html içine gömme imkanı verir bize. internet Explorer 8 sadece css dosyalarına eklenmesine izin veriyor ayrıca bir kısıtlama var ie8 en fazla 32kb boyutuna kadar destekliyor.

Özel uzantılar ile yeni özellik desteği

Firefox, webkit ve Opera’dan sonra Microsoft’da özel uzantılar ile yeni özellik desteğini getirdi. Aşağıda özellikler listelendi;

• -ms-accelerator
• -ms-background-position-x
• -ms-background-position-y
• -ms-behavior
• -ms-filter
• -ms-ime-mode
• -ms-layout-flow
• -ms-layout-grid
• -ms-layout-grid-char
• -ms-layout-grid-line
• -ms-layout-grid-mode
• -ms-layout-grid-type
• -ms-overflow-x
• -ms-overflow-y
• -ms-scrollbar-3dlight-color
• -ms-scrollbar-arrow-color
• -ms-scrollbar-base-color
• -ms-scrollbar-darkshadow-color
• -ms-scrollbar-face-color
• -ms-scrollbar-highlight-color
• -ms-scrollbar-shadow-color
• -ms-scrollbar-track-color
• -ms-text-align-last
• -ms-text-autospace
• -ms-text-justify
• -ms-text-kashida-space
• -ms-text-overflow
• -ms-text-underline-position
• -ms-word-break
• -ms-word-wrap
• -ms-writing-mode
• -ms-zoom

Sonuç

Tüm bu özellikleri sıraladıktan sonra beni sevindiren üç özellik var. Birincisi hasLayout’un kaldırılması, ikincisi DATA URI desteğinin gelmesi ve display:inline-block özelliğinin tam desteğidir.

Ayrıca ie8 sorunları hakkında bilgi edinmek isteyenler kaynaklar kısmında hata linklerinden gerekli bilgiyi alabilirler. Ben sorunlarla karşılaştıkça sitemde yayınlayacağım hataları.

Hoşçakalın.

Kaynaklar

• http://msdn.microsoft.com/en-us/library/cc304082%28VS.85%29.aspx
• http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
• http://www.howtocreate.co.uk/ie8.html
• http://reference.sitepoint.com/css
• http://www.evotech.net/blog/2009/03/ie8-css-support/
• http://css-discuss.incutio.com/wiki/IE8#CSS3_selectors (ie8 sorunları)
• http://jhop.me/ie8-bugs (ie8 hataları)
• http://www.gtalbot.org/BrowserBugsSection/
• http://techblog.procurios.nl/k/news/view/33224/14863/Testing-Internet-Explorer-8-CSS3-for-Web-Design.html (CSS3 desteği)

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/

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/

Outline özelliği kullanıcının o an nereye odaklandığını belirlemek için kullanılır. Tarayıcı arayüzünde kullanıcının nereye odaklandığını bilmek bize birçok avantajlar sağlayacaktır. Erişebilirlik açısından önemli bir özelliktir. 

Klavyeden web sitelerini gezen kullanıcılar için önemli bir özelliktir. Bu durumu şöyle anlatırsak daha iyi anlaşılacaktır. Bir site düşünün metin içeriğindeki bağlantıların rengi ve tipi metinler ile aynı olduğunu bağlantıları metinden ayıran hiç bir belirtinin olmadığı durumu, bu durum kullanıcıyı ne kadar zorlayacağını düşünün. Bu gibi durumları engellemek için biz sayfa içindeki bağlantılara, düğmelere ve gezinti elemanlarına normal içerikten ayrı stiller tanımlarız. Benzer şeyleri sadece klavyeden interneti gezmeye çalışan insanlar içinde outline tanımları sağlar.

Şu aklımıza gelebilir; kim sadece klavye kullanarak  internette gezer ki. Ama erişebilirlik demek zaten bir sayfaya en fazla kişinin erişmesini sağlamak değil mi?

Şimdi dış hat çizgileri(outline) özelliklerine bir göz atalım.

Dış hat çizgisi biçemi (outline-style)

Dış hat çizgisinin biçemini belirlemek için kullanırız.

Yapısı: outline-style: <deger>
Aldığı değerler: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: none
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Dış hat biçemi none değeri haricindeki değerler için görüntülenir.

• none: Dış hat görünmesin anlamındadır.
• dotted: Dış hat belirli aralıklarla dizilmiş noktalardan oluşur.
• dashed: Dış hat belirli aralıklarla dizilmiş çizgi parçalarından(tire) oluşur.
• solid: Dış hat bir çizgi olarak görünür
• double: iki çizgi seklinde görünür. İki çizginin kalınlıkları ile aralarındaki boşluğun genişliğinin toplamı outline-width değerine eşittir.
• groove: Dış hat tuvale oyulmuş gibi görünür.
• ridge: groove’un zıddı; Dış hat çizgisi kabartma gibi görünür.
• inset: Dış hat çizgisinin kutunun tamamını tuvale gömülü gibi görünmesine sebep olur.
• outset: inset’in zıddı; Dış hat çizgisi kutunun tamamının kabartma gibi görünmesine sebep olur.

Dış hat çizgisi genişliği (outline-width)

Atandığı elemanın dışına çizilen hattın kalınlığını belirlemek için kullanırız.

Yapısı: outline-width: <deger>
Aldığı değerler: thin | medium | thick | length | inherit
Başlangıç değeri: Medium
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Dış hat çizgisi genişliği border-width gibi CSS uzunluk değerlerini (px, pt, em) ve anahtar kelimeler(thin <= medium <= thick) alır, ancak yüzde değer ve eksi değer almaz.

Dış hat çizgisi rengi (outline-color)

Atandığı elemanın dışına çizilen hattın rengini belirlemek için kullanırız.

Yapısı: outline-color: <deger>
Aldığı Değerler: color | invert | inherit
Başlangıç değeri: invert
Uygulanabilen elemanlar: tüm elemanlara
Kalıtsallık: Yok

CSS’in desteklediği renk değerlerini kullanabiliriz, hatta invert değerinide kullanabiliriz. invert, rengi tersine çevirir.

Dış hat çizgisi (outline)

Dış hat çizgisi(outline) özelliği yukarıda gördüğümüz özelliklerin tek seferde kullanılmasını sağlayan bir kısa yoldur.

Yapısı: outline: <deger>
Aldığı Değerler: [ <outline-color> || <outline-style> || <outlinewidth>] | inherit
Başlangıç değeri: Tanımlı değildir
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Kenar çizgisi(border) özelliğine benzer bir yapısı vardır. Ancak ayrıldıkları kısım kenar çizgisinde(border) her kenar için bir atama(border-right, border-bottom, vd.) yapılmasına karşın dış hat çizgisinde(outline) böyle bir özellik yoktur. Dış hat çizgisinin(outline) tüm kenarları aynı özellikleri taşır.

Dış hat çizgileri(outline) normal akıştaki boşlukları tamamlamaz. (taşma yapmaz.) diğer elemanların üzerini örter. Dış hat çizgisinin(outline) önemli özelliklerinden biri etrafını çevreleyen elemanlar üzerinde(üzerine örtmek dışında) bir etki yapmamasıdır, bu sayfa planlamadaki problemlerimizi çözmemiz için önemlidir. Problem olan bir elemana dış hat çizgisi(outline) ataması yaptığımızda tam olarak sorunun ne olduğunu göreceğiz ve elamanın tam yerini öğreneceğiz. Bu kenar çizgisi(border) uygulamaktan farklıdır, dış hat çizgisi(outline) uygulandığında dokümandaki normal akış üzerine bir etki yapmayacaktır.

Dış hat çizgileri(outline) satıriçi elemanların etrafına yerleşir. İki satıra kaymış satıriçi elemanlarda dış hat çizgisi dikdörtgen şeklinde olmayacaktır. Bu da kenar çizgisi(border) ile arasındaki farklardan biridir.

Dış hat çizgileri elemana odaklanıldığında görsel bir çıkıntı gibi görünmesini sağlayabilir.

Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkanlar nispetinde 2. kitapta çıkacaktır.

Kitabı ve kaynak dosyalarını indirmek için tıklayınız.