IE6-9 için linear-gradient Renk Tanımlama Sorunu

Bildiğiniz gibi css3 ile birlikte linear-gradient özelliği geldi. Ancak css3 özelliği olduğundan IE6-9 için kullanabilmek adına filterözelliğine başvuruyoruz.. Ve burada ise ilginç şekilde bir renk tanımlama sorunu oluşuyor..

Sorun: Renk tanımlamalarında kısa renk tanımı kullanamıyoruz.. Örneğin #333333 olan renk kodunu #333 şeklinde yaptığımızda da aynı mantığa geliyor ancak bunu filter için uygulayamıyoruz, aksi taktirde başka bir renk ortaya çıkıyor..

Örnek;

<style type="text/css">
a {
	text-decoration: none;
	font: 14px Arial;
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	border-radius: 3px;
	border: 2px solid #444;
	background: #333; /* eski tarayıcılar için */
	background: -moz-linear-gradient(top, #333 0%, #9999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #999)); 
	background: -webkit-linear-gradient(top, #333 0%, #999 100%);
	background: -o-linear-gradient(top, #333 0%, #999 100%);
	background: -ms-linear-gradient(top, #333 0%, #999 100%);
	background: linear-gradient(to bottom, #333 0%, #999 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );
}
</style>
<a href="#">erbilen.net</a>

Burada #333 ve #999 renk değerlerinin her ikisinide kısa tanım olarak kullandık.. Örneğin chrome’da şöyle gözükmekte;

Normal şartlarda da olması gereken görüntü bu.. Ancak birde buna IE6-9 arasında bakalım.. Sonuç;

Çözüm: yapmamız gereken #333 ve #999 değerlerini uzun haliyle yazmak.. Ancak sadece filter için;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );

yerine;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );

yazmak olacak  Şimdilik bu sorununda üstesinden gelmiş olduk.