CSS3 önek Karmaşası

CSS3’ün güzel özelliklerini yavaş yavaş kullanmaya başladık. CSS3’ün
yeniliklerinin yanında önek karmaşası gibi sorunlarımızda var. CSS3’de
kodlarımı yazarken farklı tarayıcılar için önek ile kullanmak
durumundayız.

Farklı Tarayıcı önekleri;

  • Chrome ve Safari (-webkit-)
  • Firefox (-moz-)
  • Opera (-o-)
  • Internet Explorer (-ms-)

Bu sorunun nedeni CSS3 özelliklerinin hala geliştirilmekte olması ve
tarayıcıların geliştirme aşamasında bu özellikleri daha standartlaşmadan
kullanmaya ve kullanıcılara kullandırtmaya başlamasından
kaynaklanmaktadır. Bu durumu başlangıçta(belki hala) sorun olarak
tanımlamasak da çok yoğun kullanımında bir sorun olarak karşımıza
çıktığı kesin.

Firefox ve İnternet Explorer9 bu konuda tam onaylanmış
özellikler için öneklerden vazgeçip standart kullanımı geçiş yaparak bir
nebze olsun sorunu gideriyorlar.

Bir örnek vererek işin ne kadar kötü göründüğüne bakabiliriz. CSS renk
geçişi özelliğini tanımlamak için bir kod yazmamız gerektiğinde
aşağıdaki gibi bir kod bloğunu eklememiz gerekiyor.

 background: #1e5799; /* Old browsers */ 
 background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
 background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Şeklinde bir renk geçişi tanımı göz korkutuyor. Bu kod aslında tek satır

 background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

Ancak farklı tarayıcılar için kod yazınca yukarıdaki hali alıyor.

Burada gördüğümüz ve genelde önek sorunları;

  • Çok fazla kod mevcut kodumuzun yığın halini almasına neden oluyor,
  • Düzenlemesi zorlaşıyor,
  • Farklı tarayıcılar için üretilen önekler nedeni ile kod çoğalıyor ve
    performansı düşürüyor.

gibi sorunlara neden oluyor.

Önek Sıralaması

Burada yazılan öneklerde sıralamanın önemi vardır. Standart dışı önekler
önce yazılır, standart önek sona yazılır. Bunun tersi durumlarda bazen
sorun yaşayabilirsiniz. Standardın sona yazılmasındaki mantık; farklı
tarayıcılar için yazılan önek sonradan kaldırılabilir ve kaldırıldığında
sonradan gelen standart tanım daha baskın olması istenir.  

Standart dışı öneklerde ilk -webkit önekinin yazılmasının kesin olamasa
da bir avantajı olabilir.

  • -webkit-
  • -moz-
  • -o-
  • -ms-
  • standart

şeklinde bir sıralamayı uygulayabiliriz.

Önek karmaşasını çözmek için bir iki yöntem var. Bunları burada basitçe
inceleyeceğiz.

Çevrimiçi Araçlar İle Kod Üretmek

Çözüm önerilerinden birisi kodlamamızı standart tanımlar ile yapıp en
son kodu çevrimiçi araçlar yardımı ile

tüm tarayıcılar için üretmek olabilir.

prefixr.com’in farklı editörler için api çözümü de var
http://www.prefixr.com/api/usage/  sitesinden kendi
editörünüze uygun apiyi yükleyerek direk editörünüzde(kısayol tuşları
yardımı ile) bu işi yapabiliyorsunuz.

Dinamik Olarak(SASS ve LESS) Önek Sorununa Çözüm Üretmek

Öneklere SASS ve LESS ile çözümler üretebiliriz. Bu gibi dinamik yapılır
CSS üreten yapılarda başlangıçta bir tanım yapılıp daha sonraki
tanımlarımızı bu tanım üzerinden yaparak önek sorununu halledebiliriz.

SASS

 @mixin border-radius($values) { 
    -webkit-border-radius: $values;
    -moz-border-radius: $values; 
    border-radius: $values;
}

div { 
    @include border-radius(10px); 
}

ve

.border-radius(@values) {
    -webkit-border-radius: @values; 
    -moz-border-radius: @values;
    border-radius: @values; 
}

div { 
    .border-radius(10px);
}

sonuç olarak üretilen CSS

 div { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
}

LESS ve SASS gibi yapıları sitenizde kullanıyorsanız sorunun çözümü için
güzel bir seçenek bunlar.

-prefix-free

Ayrıca yine dinamik yapı içine koyabileceğimiz free-prefix yöntemide
mevcut. Javascript yardımı ile çözüm üretilen bu yöntemde incelemeye
değer. Ben bunun için js eklemeyi pek mantıklı bulmasam da, yerine
kullanılabilir diye düşünüyorum.

Sonuç

Sonuç olarak belli bir süre bizim için sıkıntı oluşturabilecek bir sorun
olarak görünüyor. LESS ve SASS ile olan çözümler mantıklı geliyor bana.
Tabi hepsinin standardı desteklemesi güzel olur icon biggrin CSS3 önek Karmaşası

Yakın zamanda tarayıcı temsilcileri bu konu hakkında bir toplantı
düzenleyerek bir çözüm yolu bulmaya çalışmışlar. 7 çeşit çözüm önerisi
sunulan toplantıdan şimdilik bir çözüm çıkmamış gibi görünmüyor. En
azından böyle bir sorunu kabul edip çözüm üretmek için toplanılması da
bir ilerlemedir.

Toplantıdan çıkan en ciddi çözüm önerisi -webkit- önekinin tüm
tarayıcılar tarafından test öneki olarak kabul görmesi isteği. Opera bu
konuda bir adım dahi atmış diyorlar. -webkit- in mobil araçlardaki
yaygınlığı ve CSS3 özelliklerinin birçoğunu çıkardıklarını düşünürsek
mantıklı gibi.

Zamanla göreceği bakalım neler olacak.

Kaynaklar

 CSS3 önek Karmaşası  CSS3 önek Karmaşası  CSS3 önek Karmaşası

 CSS3 önek Karmaşası

Kaynak:
CSS3 önek Karmaşası

İLGİNİ ÇEKEBİLİRLER !

Bir Cevap Yazın

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

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>