CSS

CSS3 vs. JavaScript

CSS3 vs. JavaScript

Her ikisi de web geliştiricileri arasında oldukça popüler, ancak hangisi en iyisi? Sean Gaffney bu konuda küçük bir araştırma yaparak bizlere hangisinin daha üstün olduğunu göstermiş.

CSS ve JavaScript, birbirlerinden çok farklı 2 kavram. CSS, içeriğinizi stillendirebilmek için gerekli olan bir dil, ancak sınırlı. JavaScript ise bir web sayfasındaki tüm elemanlara müdahele edebileceğimiz ve onlara çeşitli atraksiyonlar katabileceğimiz bir dil.

CSS3 ile, geride bıraktığımız yıllara nazaran pek çok yeni ve etkileyici özellikler bizlere sunuldu. Bazı insanlar CSS’in websitelerini şekillendirebilmek için kullanılabilecek tek yol olduğunu düşünürler. Bu kişilerin bu düşüncelerinde yanıldıklarını söylemekle kalmayıp bir de üzerine CSS’in ve JavaScript’in avantajlarını ve dezavantajlarını bu yazıda sizlere açıklayacağım. O zaman vakit kaybetmeden başlayalım…

Kullanım Kolaylığı

JavaScript, henüz yazılım mantığı ve kültürü edinmemiş kişiler için başta öğrenmesi oldukça zor bir dil olabilir. Çeşitli kütüphaneler, frameworkler mantığını kavramak için yardımcı olabilir, ancak ileri düzey uygulamalar geliştirebilmek ve syntax teknikleri için JavaScript dilini oldukça iyi bilmek gerekiyor. CSS3′de ise bu durum JavaScript kadar karmaşık değil. CSS’in genel yapısına aşina olan bir kişi, ufak-tefek denemeler ile çeşitli animasyonlar ve transition efektlerini kolayca kavrayabilir. Şu an için:

KAZANAN: CSS3

Esneklik

CSS ile sınırlı alanlara müdahele edebilirken, JavaScript ile herhangi bir layout ile sınırlı kalmadan, tüm döküman yapısına müdahele edip (DOM), istediğimiz elementleri seçebiliyor ve işlem yapabiliyoruz. CSS3 ile bu esneklik imkanı artmış olsa da hiçbir zaman JavaScript kadar esnek olabileceğini düşünmüyorum.

KAZANAN: JavaScript

Destek

Çeşitli JavaScript kütüphaneleriyle (Bkz: jQuery, MooTools) artık tarihe karışmış olan ve desteğini vermediğimiz! eski dostumuz Internet Explorer 6 için bile düzgün görünümler elde edebiliyorken, CSS3′ün henüz modern tarayıcılarda bile tam olarak desteklenmiyor oluşu JavaScript’i yine bu aşamada bir adım öne çıkarıyor. Şu anda bilgisayarlarımızda kullanmakta olduğumuz Google Chrome ve Safari web tarayıcılarının JavaScript motoru olan WebKit, CSS3 animasyonlarında ve akıcılığında oldukça başarılı diyebilirim. Firefox‘un da 4. sürümünden itibaren transition ve animasyon konusunda iyi çalışmaya başladığını görebiliyoruz.

(Ağustos 2011) Türkiye için web tarayıcı kullanım raporu

(Ağustos 2011) Türkiye için web tarayıcı kullanım raporu

Dipnot: Hazır Internet Explorer 6′dan konu açılmışken :) , Türkiye için Internet Explorer kullanımın %2‘lere düşmüş olması biz web geliştiricileri açısından moral verici bir gelişme ve günden güne bu sayıda azalma yaşanıyor. Dünyadaki web tarayıcılarının kullanım oranları hakkında aylık bilgi almak için şu sayfayı ziyaret edebilirsiniz.

KAZANAN: JavaScript

Performans

Fight!Web tarayıcı sektöründe yaşanan rekabet, kullanıcı odaklı olmaya ve daha az CPU harcamaya yönelik olduğundan bu çalışmalar JavaScript motorunun da hızlanmasını sağlıyor. WebKit’in SquirrelFish adını verdiği (Google Chrome’da V8 olarak geçer) JavaScript motoru var. Mozilla Firefox’taki JavaScript motorunun ismi de TraceMonkey. Internet Explorer 9 da Chakra adını verdiği yeni bir JavaScript motoruyla yayınlanmıştı. Günümüzdeki modern tarayıcılar arasındaki rekabet ile şu sonuca varabiliriz: JavaScript rocks!

CSS3′ün animasyon ve transition desteği oldukça yeni diyebilirim. Bu yüzden performans konusunda JavaScript’ten daha geride olması normal sayılır. Örneğin; CSS3 ile animasyon uyguladığımız bir elemanın, CPU üzerindeki yükü %40‘lara çıkabiliyorken, jQuery Circulate Plugin ile %18‘lerde seyrediyor bu rakam.

KAZANAN: JavaScript

Sonuç

Tüm bunlardan hareketle, JavaScript yine aynı JavaScript. CSS3 ise hala gelişiyor ve desteği arttırıyor. Yani tüm bu teknolojileri web sitelerimizde, projelerimizde kullanıyoruz ve kullanacağız. Ancak asıl önemli olan: “Müşterimizin ya da hitap ettiğimiz kitlenin ihtiyacını karşılayacak mı?” “Hitap ettiğimiz kitle modern tarayıcıları mı kullanıyor?” “Eklediğimiz özellikler kullanıcılar tarafından kullanılacak mı?” “Zeki Müren de bizi görecek mi? :) “… gibi sorular kafamızı kurcalamaya devam edecek.

Dipnot

Web Arayüz Günlüğü bazı sebeplerden dolayı 3-4 gün kapalı kalmıştı. Takipçi arkadaşlardan da bu konuda mesajlar aldım. Burayı çok güncel olarak göremeyen bazı arkadaşlarda burukluk oluyormuş, :( bu konuda üzgünüm, ama elimden geldiğince içeriği uzun ve doyurucu tutmaya çalışıyorum. Kısa ve kişisel şeyler yazmamak ana hedefim. O yüzden bu tür kişisel konuları yazı aralarında dipnot olarak geçmeyi tercih ediyorum..

Şimdilik kendinize iyi bakın. Saygılar, sevgiler…

Sponsor Bağlantılar
Web Hosting
5 Yorum
Yorumlar
  1. 1

    ikna edici ve temiz bir kıyas olmuş Hüseyin. Ama Javascript’i iyice öğreninceye kadar CSS’den iyisi yok benim için :)

  2. Hüseyin Emanet
    2

    @ADogan, Teşekkür ederim :)

  3. 3

    Yazıyı beğendim. Şimdi düşünüyorum da, HTML ve CSS ile bir yere kadar gidebiliyoruz. Neden buraya gelmişken, daha fazlasını arzu etmiyeyim? Javascript’i inceleyeceğim, öğrenmem gereken bir dil, üstelik de bu yazıya değinerek konuşuyorum; ”öğrenmem gereken önemli bir dil”.

    Makale için teşekkürler.

  4. 4

    Yahu ne alaka Css ile Js’yi karşılaştırmak? JS ile sayfaya müdahale ederken de Css’i kullanıyoruz mesela, Css3 ile gelen transition tarzı olaylar da JS motoru benzeri motorlarla yorumlanıyor vs. Alakasız bir yazı olmuş. Klavyeyle Mouseyi karşılaştırmak gibi bir şey bu.

  5. Hüseyin Emanet
    5

    @Rameş Aliyev,
    Açık konuşmak gerekirse karşılaştırmanın saçma olduğu düşüncesine katılmıyorum.

Bilgi
Yorum Yap

Yorum içeriğini oluştururken konuyu saptıracak ve gereksiz tartışmalara yol açacak davranışlardan kaçınınız. Teknik bir sorun oluşması durumunda, iletişim sayfasını kullanınız.