CSS3 önek Karmaşası

30 Mayıs 2012

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

  • http://cssprefixer.appspot.com/
  • http://prefixmycss.com/
  • prefixr.com

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

prefixr.com’in farklı editörler için api çözümü de var 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 :D

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

Daha fazla oku

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.