tarihinde Fatih Hayrioğlu

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;

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

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

Tablo Özelliklerinin tamamını destekliyor artık

özelliklerini destekliyor. Ayrıca

ö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

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

Yazdırma Özellikleri

@page özellikleri tam olarak destekleniyor.

Dış Hat çizgisi(Outline) Özellikleri

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

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;

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

tarihinde Fatih Hayrioğlu

Site üzerinden gelen bazı sorular belli aralıklarla farklı kişilerden gelince bu konuda bir yazı yazma ihtiyacı duyuyorum. Bu konuda olduğu gibi. Daha öncede benzer sorular ile karşılaştım. Bende bir kaç projemde bu konuyu göz atmıştım.

İki yöntem var aslında bunun için.

Birinci Yöntem

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
}

şeklinde bir kod. Ancak bu kod ne yazık ki Firefox ve Opera’da çalışmıyor. Yada çalışması için html sayfamızdan DOCTYPE’ı silmemiz gerekiyor. Bence bu pek mantıklı bir kullanım değil, o nedenle ben ikinci yöntemi öneriyorum.

İkinci Yöntem

swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0",
"expressInstall.swf");

Genişlik ve yüksekliğini 100% veriyoruz ve css kodumuzu yazıyoruz.

/* hide from ie on mac \*/
html {
    height: 100%;
    overflow: hidden;
}

#myContent {
    height: 100%;
}
/* end hide */

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #090;
}

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

CSS kodumuz biraz daha fazla olan bu yöntem DOCTYPE kullanımı durumunda da çalıştığı için bence en kullanışlı yöntem. Geçen hafta anlattığım flashobject ile kodumuzu sayfaya ekledik.

CSS kodu biraz incelersek;

Kodun ilk iki tanımını ie5 Mac kullanıcılarından gizlemek için.

Htlm’e yüzde yüz yükseklik tanımı yapıyoruz ve flash dosyamız sayfanın tamamını kaplayacağı için sayfa kenarındaki kaydırma çubuğuna gerek kalmayacaktır, ie de kaydırma çubuğunu kaldırmak için overflow:hidden kodunu yazıyoruz.

Daha sonrada flash’ı eklediğimiz katman yüksekliğinide yüzde yüz yaparak elemanın tam sayfayı kaplamasını sağlıyoruz.

Son olarakta body elementinin yüksekliğini yüzde yüz yapıp margin ve padding değerlerini sıfırlıyoruz ve görünmese de işi garantiye almak için bir backgroun-color tanımı yapıyoruz. Bu kadar.

Kaynaklar

tarihinde Fatih Hayrioğlu

Her projeye başladığımızda belli bir bilgi birikimi ile başlarız. Ancak her seferinde yazdığımız kodun en iyi ve optimum kod olduğunu sorgulamamız gerekiyor(çok acil olmadığı sürece). Acaba bu işi daha az kodla ve daha esnek nasıl yaparım düşüncesi ile davranmalıyız. Bu belki kodlama zamanımızı uzatır ama sonuçta içimize sinen bir iş yapmış oluyoruz ve daha sonraki projelerimizde bu bilgi bize tecrübe ve hız kazandıracaktır. Her zaman en iyiyi aramak iyidir.

Daha önce CSS Kodlama Teknikleri ve CSS Kodlarını Azaltma Yöntemleri bahsetmiştim genel olarak buna bir ek daha yapacağım. Aslında o makaledeki 1. maddeyi biraz daha genişleteceğim. Mesela bir eleman altındaki tüm elemanlara uygulanan bir özellik tek tek uygulanacağına genel uygulanır alttaki elemanlara ise kendine has özellikler tanımlanarak daha optimum kodlar elde edilir. Yer kazanılır, tekrarlardan kurtulmuş oluruz ve daha kolay müdahale imkanımız olur.

Genelde bu tip ortak kullanım ile menülerde karşılaşıyorum. Resimli menülerde

<ul id="menu">
    <li id="menu1"><a href="">menü 1</a></li>
    <li id="menu2"><a href="">menü 2</a></li>
    <li id="menu3"><a href="">menü 3</a></li>
    <li id="menu4"><a href="">menü 4</a<</li>
    <li id="menu5"><a href="">menü 5</a></li>
    <li id="menu6"><a href="">menü 6</a></li>
</ul>

Bu tip bir menümüz olsun ve menünün her elemanı için farklı tanımlarımız olsun.

li#menu1 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 0 no-repeat; text-indent:-9999px; }
li#menu2 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -25px no-repeat; text-indent:-9999px; }
li#menu3 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -50px no-repeat; text-indent:-9999px; }
li#menu4 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -75px no-repeat; text-indent:-9999px; }
li#menu5 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -100px no-repeat; text-indent:-9999px; }
li#menu6 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -125px no-repeat; text-indent:-9999px; }

Görüldüğü gibi bir resimli menü oluşturduk. Kod sorunsuz çalışır, ancak bu kodu daha kısa yazabiliriz. Birbirini aynı tanımları genel bir elemana atayıp, geriye sade o elemana ait özelliği bırakırsak kodumuz daha az olacaktır. yukarıdaki örnekte bunu yapalım

ul#menu li a{
	display:block;
	width:50px;
	height:24px;
	background:(images/menu.png) 0 0 no-repeat;
	text-indent:-9999px;
}

Bu tanım ile tüm a elemanlarını etkileyecek bir kod yazdık. Daha sonrada her elemana özel kodlarını tek tek tanımlayalım.

li#menu1 a{ background-postion:0 0;}
li#menu2 a{background-postion:0 -25px; }
li#menu3 a{background-postion:0 -50px;}
li#menu4 a{background-postion:0 -75px;}
li#menu5 a{background-postion:0 -100px;}
li#menu6 a{background-postion:0 -125px;}

Görüldüğü gibi kodumuz daha az oldu. Böylece kodu düzenlemek de kolaylaştı. Yukarıdaki örnekte sadece background-position değerleri değişti. Başka bir örnekte genişlik değeride değişebilir bu durumda da her tanımda genişlik tanımı ekleyerek kodumuzu yazabiliriz. Benzer bir yapıyı Basit Resimli Menü Yapmak adlı makalemde anlatmıştım. Örnekleri oradan inceleyebilirsiniz.

Bilgilendirme Kutuları

Aynı mantığı site kodlarken farklı alanlarda da kullanabiliriz. Örneğin sitemizde bilgi kutuları hazırladığımızı düşünelim.

Kullanıcıyı bilgilendirme amaçlı alanlarımız için “Bilgilendirme Kutuları - #bilgilendirme”, Hata durumunda kullanıcıyı bilgilendirmek için “Hata Kutuları - #hata”, Kullanıcıyı uyarmak içinde “Uyarı Kutuları - #uyari” kutuları hazırlayalım.

<div class="bilgilendirme">Bilgilendirme metni</div>
<div class="onay">Onay metni</div>
<div class="hata">Hata mesajı</div>
<div class="uyari">Uyarı mesajı</div>

Bu kutuların css kodlarını yazalım.

div.bilgilendirme{display:block; padding:15px 10px 15px 50px; background:#BDE5F8 url(images/bilgilendirme.png) 8px 8px no-repeat; color:#00529B; border:1px solid #00529B; font:12px Arial, Tahoma, sans-serif; margin:10px 0}
div.onay{display:block; padding:15px 10px 15px 50px; background:#DFF2BF url(images/bilgilendirme.png) 8px -92px no-repeat; color:#4F8A10; border:1px solid #4F8A10; font:12px Arial, Tahoma, sans-serif; margin:10px 0}
div.hata{display:block; padding:15px 10px 15px 50px; background:#FFBABA url(images/bilgilendirme.png) 8px -292px no-repeat; color:#D8000C; border:1px solid #D8000C; font:12px Arial, Tahoma, sans-serif; margin:10px 0}
div.uyari{display:block; padding:15px 10px 15px 50px; background:#FEEFB3 url(images/bilgilendirme.png) 8px -195px no-repeat; color:#9F6000; border:1px solid #9F6000; font:12px Arial, Tahoma, sans-serif; margin:10px 0}

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

sonuç olarak her şey tamam, ancak kodumuzu daha da azaltabilirmiyiz? Evet.

Bunun için her kutuya genel bir sınıf tanımlamamız gerekecek. Bu bildirim kutularını içerik alanımız içinde olduğunu düşünerek

#icerikAlani div

şeklindeki bir tanım bizim işimize yaramaz. Daha özel bir tanımlama yapmamız için her bildirim kutusuna bir adet sınıf daha eklememiz gerekecek.

<div class="bildirim bilgilendirme">Bilgilendirme metni</div>
<div class="bildirim onay">Bilgilendirme metni</div>
<div class="bildirim hata">Hata mesajı</div>
<div class="bildirim uyari">Uyarı mesajı</div>

Evet böylece bildirim kutuları katmalarını(div) diğer katmanlardan ayırmış olduk. Buna göre css kodumuzu azaltalım.

#icerikAlani div.bildirim{
	background: #BDE5F8 url(images/bilgilendirme.png) 8px 8px no-repeat;
	border: 1px solid #00529B;
	color: #00529B;
	display: block;
	font: 12px Arial, Tahoma, sans-serif;
	margin: 10px 0;
	padding: 15px 10px 15px 50px;
}

Daha sonra her kutu için ayrı kendine özel kodlarını yazalım.

 #icerikAlani div.bilgilendirme{
	background: #BDE5F8 url(images/bilgilendirme.png) 8px 8px no-repeat;
	border: 1px solid #00529B;
	color: #00529B;
}
#icerikAlani div.onay{
	background: #DFF2BF url(images/bilgilendirme.png) 8px -92px no-repeat;
	border: 1px solid #4F8A10;
	color: #4F8A10;
}
#icerikAlani div.hata{
	background: #FFBABA url(images/bilgilendirme.png) 8px -292px no-repeat;
	border: 1px solid #D8000C;
	color: #D8000C;
}
#icerikAlani div.uyari{
	background: #FEEFB3 url(images/bilgilendirme.png) 8px -195px no-repeat;
	border: 1px solid #9F6000;
	color: #9F6000;
}

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

Burada şöyle bir kullanım şeklinide tercih edebiliriz. Katman(div) yerine <blockquote> etiketini kullanarak daha uygun bir kodlama yapabiliriz. Maksat en uygun kodu bulmak.

<blockquote class="bilgilendirme">Bilgilendirme metni</blockquote>
<blockquote class="onay">Onay mesajı</blockquote>
<blockquote class="hata">Hata mesajı</blockquote>
<blockquote class="uyari">Uyarı mesajı</blockquote>

CSS kodumuzda

#icerikAlani blockquote{
	background: lightblue (images/bilgilendirme.gif) 0 0 no-repeat;
	display: block;
	font: 12px Arial, Tahoma, sans-serif;
	margin: 10px 0;
	padding: 10px 10px 10px 25px;
}

blockquote.bilgilendirme{
	background-color: lightblue;
	background-postion: 0 0;
	border: 1px solid blue;
	color: blue;
}

blockquote.onay{
	background-color: lightblue;
	background-postion: 0 0;
	border: 1px solid blue;
	color: blue;
}

blockquote.hata{
	background-color: lightred;
	background-postion: 0 0;
	border: 1px solid red;
	color: red;
}

blockquote.uyari{
	background-color: lightyellow;
	background-postion: 0 0;
	border: 1px solid yellow;
	color: black;
}

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

Sonuç olarak en optimum kodu ettik.

Bu makaleyi yazmaktaki amacım bu ve benzeri yöntemleri projelerimizde en uygun kodlama yöntemlerini uygulamamız gerektiğini göstermek içindir. Yoksa yukarıdaki örnekleri bir çok makalemde anlatmıştım zaten. Projemizin tüm bölümlerinde aynı mantıkla hareket etmemiz gerektiğini düşünüyorum. Hoşçakalın.

Kaynak

  • jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx