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.

Yapısı : <border-radius>{1,4} [ / <border-radius>{1,4}]?
Aldığı Değerler : [ <uzunluk> | <yüzde> ] [ <uzunluk> | <yüzde> ]? 
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler ve tabiki tablo elementine border-collapse değeri collapse olarak atalı ise uygulanır
Kalıtsallık: Yok

Tek değer atanmış ise, dört köşeyede aynı değer uygulanır.
İki değer atanmış ise, ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır.
Dört değer atanmış ise, sırası ile sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.
Üç değer atanmış ise, ikinci değer sağ üst ve sol alt köşeye uygulanır.

Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 da gelecek) 
Firefox 2+
Safari 3+ (kısmen)
Opera 10.50+
W3C’s CSS Level 3+
CSS Profile 3.0

- Safari yüzde değerleri desteklemiyor.
- Safari/Webkit tabanlı tarayıcılar her 4 köşeye sadece bir tanımı kabul ediyor.
- Safari/webkit tarayıcıları (/) ile ayrılan değerleri kabul etmiyor. Bu gibi değerleri kullanmak için aşağıdaki gibi bir atama yapmalıyız. Elips şeklinde sonuçlar elde etmke için (/) ayracı kullanılır.

	-webkit-border-radius:  40px 10px;
	-moz-border-radius:  40px/10px;
	border-radius:  40px/10px;

Uygulama

Bugünkü durumda border-radius tanımı tek bir tanımlama olarak atanmamaktadır, farklı tarayıcılar ön ek kullanarak bu özelliği desteklemektedir. Webkit tabanlı tarayıcılar(Safari ve Google Chrome) için -webkit, Gecko tabanlı(Firefox) tarayıcılar için -moz ön ekleri kullanılmaktadır. 

Bu durum bazen çok uzun kodlar üretmemize neden oluyor. İleride umarım bu durum düzelir. 

İlk örneğimizi yapalım

div#kutu {
    width: 400px;
    padding: 20px;
    border-radius: 10px; /* Standart */
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari ve Chrome */
    background: #F00;
    margin-bottom: 10px;
}

Örneği görmek için tıklayınız.

İkinci örnek

div#kutu{
    width: 400px;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    background: #F00;
    white-space:pre
 }

Örneği görmek için tıklayınız.

http://muddledramblings.com/table-of-css3-border-radius-compliance  ve http://shapeshed.com/examples/border-radius/ adresindeki örnekler inceleyerek bu özellik ile neler yapabileceğimizi görebiliriz.

İnternet Explorer Desteği

Yukarıda anlattığımız tanımları maalesef İnternet Explorer desteklememektedir, daha ön görünümü yayınlanan ie9′da desteklediğini açıkladı.

İnternet explorer için çözüm üreten bir çok javascript kodu mevcut, ben burada sizlere belli başlılarının linklerini vereceğim ve ufak bilgiler vereceğim.

DD roundies

Bu script güzel çalışıyor. Bir çok farklı durumlar için güzel bir çözüm üretiyor. Herhangi bir javascript kütüphanesine ihtiyacı yoktur. CSS3 border-radius özelliğini destekleyenler için bu özelliği desteklemeyenler için ise javascript kodunu ekleyerek bize güzel bir çözüm üretir. Köşe yumuşatması güzel

Curvy Corners ve jQuery Plugin Curvy Corners

Diğer güzel çözüm önerilerinden ikiside bu scriptlerdir. Köşe yumuşatması güzel. Background resimleri ile iyi çalışıyor, ancak CSS3 ile olan uygulamalarda sorun çıkarıyor. CSS3 border-radius destekleyen tarayıcı kontrolü yapmıyorlar ve fazladan yüklenmeye neden oluyorlar.

Nifty Corners ve jquery Corner

Köşe yumuşatması güzel değil. Yuvarlak kenar için üretilen kodda gereksiz bir çok eleman var. Pek önerilebilecek bir çözüm değil.

HTML Remix

Bu çözümün en güzel yanı yuvarlak kenar için ekstra kod yazmaya gerek olmaması. Yazdığımız border-radius değerini alıp desteklemeyen tarayıcılara göre kod yazıyor. Script tanımını css kodu içerisinden yapıyoruz.

.curved {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(border-radius.htc);
}

Köşe yumuşatması güzeldir. 4.8 kb’lık dosya boyutu ile çok cazip boyuta sahip.

css3pie

CSS 3′ü desteklemeyen tarayıcılar için komple bir çözüm üreten bu script İnternet Explorer için üretilen çözümlerden birisidir. Tek sorunu bütünleşik bir çözüm sunduğu için dosya boyutunun biraz büyük olmasıdır. Köşe yumuşaklığı güzel. CSS3′ü destekleyen tarayıcılar için css kodunu desteklemeyen tarayıcılar için ise script kodunu uyguluyor olması güzel.

Sonuç

border-radius tanımını destekleyen tarayıcılar açısından bir sorunumuz yoktur. Sorunumuz desteği sağlamayan ie ile dir. 

Javascript ile ürettiğimiz çözümler normal tanımın yerini tutmayacaktır hiç bir zaman. Sayfa içerisinden bir çok elemana yuvarlak kenar uygulandığında ie için üretilen çözüm sayfanın fazladan yavaşlamasına neden olacaktır. 

Bir elemana yuvarlak kenar ve gölge uygulandığında ie için üretilen bir çok çözümde bazı sorunlar ile karşılaşılabilir. Bu gibi durumlarda resim ile çözüm üretmeniz tavsiye olunur. 

İE için üretilen çözümler için yukarıda yazdıklarım kendi gördüklerim ve internette araştırıp gördüklerim bilgilerden derlemedir. Bu değerlendirmelere sizin kendi uygulamalarınızdaki sonuçlarıda ekleyerek bir scripti seçmenizi öneririm. 

Bence en güzeli eğer tercih imkanınız varsa destekleyen tarayıcılar için kodu yazmak desteklemeyenler için olduğu gibi bırakmak(twitter.com sitesinde olduğu gibi.)

Kaynaklar

• http://webdesignernotebook.com/css/an-ode-to-border-radius/
• http://leaverou.me/2009/02/css3-border-radius-today/
• http://www.the-art-of-web.com/css/border-radius/ (border-radius)
• http://www.css3.info/preview/rounded-border/
• http://24ways.org/2006/rounded-corner-boxes-the-css3-way
• http://www.css3.info/border-radius-apple-vs-mozilla/
• http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html
• http://www.smileycat.com/miaow/archives/000044.php (tüm makalelerin listesi)
• http://www.netzgesta.de/corner/ (javascript)
• http://www.curvycorners.net/demos/ (javascript)
• http://www.html.it/articoli/niftycube/index.html (javascript)
• http://www.dillerdesign.com/experiment/DD_roundies/#animation (javascript)
• http://www.w3.org/TR/css3-background/#border-radius
• http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser (javascript)
• http://doctype.com/having-trouble-styling-cross-browser-buttons-input-submit (sorunlar)
• http://muddledramblings.com/table-of-css3-border-radius-compliance (taraycı destek tablosu)
• http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8

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

İ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

• http://ff.im/gwMR3

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/

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.

• http://paulirish.com/2009/browser-specific-css-hacks/
• http://acidmartin.wordpress.com/2009/06/04/css-hack-for-internet-explorer-8/
• http://snipplr.com/view/15167/ie8-csshacks/
• http://www.evotech.net/blog/2009/03/ie8-css-support/
• http://www.fatihhayrioglu.com/internet-explorer-8i-7-gibi-yorumla-kodu/

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

Genel olarak değerlendirdiğimizde daha hızlı, daha güvenli ve yeni özellikler sunuyor ie8. Kod yazarları için ie8′in en büyük avantajı CSS2.1(CSS3′ün bazı özelliklerini destekliyor) ve javascript standartlarını tam desteklediğini duyurmasıdır. Ayrıca sorun yaşadığımızda bize ie7 gibi davranma seçeneği sunması da güzel.

Bence Microsoft Internet Explorer 8 diğer tarayıcıların yükselişini engelleyecek yetenekte bir tarayıcı değil. Bunda kaybedilen pazar paylarının ve alternatiflerine hızlı yanıt verememesinin büyük etkisi var. Ayrıca ie6 gibi garabet bir tarayıcıya uzun yıllar bizi mahkum etmeninde etkisi var. Bence Windows tarayıcı pazarından çekilmelidir. Tek güzellik standartlara uygun bir tarayıcının böyle yaygın bir işletim sistemi ile gelmeside güzel. 

Bu arada bize güzel bir iş çıktı yaptığımız siteler ie8′de sorunlu mu değil mi? Kontrol zamanı

İndirmek için tıklayınız.

• http://www.melihbayramdede.com/2009/03/19/internet-explorer-8-yayinlandi-hemen-indirin/ 
• http://ajaxian.com/archives/ie-8-launches-at-mix09-probably-without-one-of-your-features 
• http://www.readwriteweb.com/archives/microsoft_releases_internet_explorer8_rc1.php 
• http://www.computerworld.com/action/article.do?command=viewArticleBasic&articleId=9129906 
• http://blog.wired.com/business/2009/01/more-details-ab.html 
• http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers-new.aspx 
• http://ejohn.org/blog/javascript-in-internet-explorer-8/ 
• http://www.alistapart.com/articles/beyonddoctype 
• http://blogs.msdn.com/ie/archive/2008/01/21/compatibility-and-ie8.aspx 
• http://blogs.msdn.com/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx 
• http://daron.yondem.com/tr/PermaLink.aspx?guid=e649f2d5-0f91-4ed0-a231-74321d01d5b3 
• http://www.fatihhayrioglu.com/internet-explorer-8e-kisa-bir-bakis/
• http://www.thestandard.com/news/2009/01/28/ie8-rc1-gains-ground-javascript-race
• http://blogs.msdn.com/ie/archive/2009/01/29/overview-of-platform-improvements-in-ie8-rc1.aspx