Prefix-free kullanın!

Bildiğiniz gibi css özellikleri çoğu zaman her tarayıcıda desteklemiyor.. Bundan dolayı tarayıcı destekleri için ön ekler gerekiyor.. (-webkit-, -moz-, -o-, -ms- gibi..) İşte bu ön eklerle css yazmakta ömrünüzden ömür alıyor 🙂 Anlaşılan bu genel bir sorunmuş ki Lea Verou ablamız (ki ben kenisine hayranım) -prefix-free adında bir proje ortaya çıkarmış 🙂

Nasıl Kullanılır?

Zaten küçük bir js dosyasından ibaret. Siteden gerekli dosyayı (https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js) indirdikten sonra sayfanıza dahil etmeniz yeterlidir.

<script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>

Farkı Nedir?

Şimdi normal şartlarda şöyle bir css kodumuz var ki bu diğer tarayıcılarda sorunsuz gözüksün diye ön ekleriyle oluşturuldu;

@keyframes gitGel {
	50% { left: 400px }
}
@-webkit-keyframes gitGel {
	50% { left: 400px }
}
@-moz-keyframes gitGel {
	50% { left: 400px }
}
@-o-keyframes gitGel {
	50% { left: 400px }
}

.box {
	width: 70px;
	height: 70px;
	border: 1px solid #ddd;
	position: relative;
	animation: gitGel 4s;
	-webkit-animation: gitGel 4s;
	-moz-animation: gitGel 4s;
	-o-animation: gitGel 4s
}

prefix-free kullanırsak böyle uzun uzun yazmak yerine aşağıdaki gibi yazmamız yeterli oluyor.

@keyframes gitGel {
	50% { left: 400px }
}
.box {
	width: 70px;
	height: 70px;
	border: 1px solid #ddd;
	position: relative;
	animation: gitGel 4s
}

Gördüğünüz gibi fark ortada 🙂 böylesi daha iyi değil mi? kesinlikle.. Böylece hangi tarayıcı ile giriş yapıyorsanız, prefix-free ön eki kendisi ekletip doğru sonucu verecektir..

Unutmayın! Sunucu üzerinde test etmezseniz sonuç alamazsınız 🙂

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Prefix-free kullanın!” üzerine 3 yorum

  1. Bir farklı varyasyonunu ben yazmaya çalışıyordum aslında 🙂
    Programlama mantığında nekadar az kod o kadar sade stabil ve temiz hızlı bir uygulama demektir..

    ön ekleri dizi içerisine alıp döngü ile js den still eklemeyi planlıyordum ama tarayıcının verisini okuyup yazmak aslında aklıma gelmemişti 🙂

    Soru: Bu Js sadece çağrıldığı yerdeki stili mi ayarlıyor yoksa herhangi bir konumdan çağrılan stil dosyasınada hükmedebiliyor mu ?
    Yani: stili index dosyası içerisinden mi ayarlayacağız yoksa herhangi bir klasörden çağrılmış stil içinde geçerli olur mu bu js dosyası ?

  2. @Duman, hiç önemli değil.. Hangi dosyadan stil uygularsan uygula her şekilde algılıyor ve işlemi yerine getiriyor.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir