Tarayıcı Uyumlu Kod Yazmak

3 472

Bir önceki yazımda farklı tarayıcılarda sitenizin nasıl göründüğünü test edebileceğiniz araçlardan bahsetmiştim.O yazımda da belirttiğin gibi bu araçlar genel itibariyle ücretlidir.Eğer maddi açıdan sizi zorlayacaksa yapılacak en iyi şey tarayıcı uyumlu kod yazmaktır.Bunu sağlamak için de hangi tarayıcının hangi özellikleri desteklediğini bilmeniz gerekir.Kabul edelim ki tarayıcıların hangi özelliğin desteklendiğini veya desteklemediğini aklımızda tutmak oldukça zordur.O yüzden sizlere bu konuda yardım edecek bazı uygulamalardan bahsedeceğim.

Özellikle HTML5 ve CSS3 gelen yeni özellikler tarayıcı bazında oldukça farklılıklar göstermektedir.Bu yeni özellikleri kullanmak istiyorsanız kullanmadan önce biraz daha araştırma yapmanız gerekmektedir.Yeni bir özellik kullanım kolaylığı bakımdan oldukça rahat olsa da tarayıcı uyum farklılıklarını bilmeden yapılırsa sonu kötü olacaktır.O yüzden hiç bir özelliği bilmeden kodlarınız arasına eklemeyin.

Son yıllarda HTML5 ile gelen yeni teknolojiler Javascript’i ayrı bir yere koydu.İlk çıktığı yıllarda pek önemsenmeyen JS bugünlerde web dünyasının en popüler dili olma yolunda hızla ilerlemekte belkide şuan için en çok kullanılan dil olabilir.Ama Javascript’in bu kadar web içinde olması farklı tarayıcılardaki uyumsuzluğu da artırıyor.Özellikle ie bazı javascript kodlarını konusunda diğer tarayıcılarla ters düşmüştür.ECMASCRİPT 5 bu farklılıklar kalksa da bu defa da aynı tarayıcıların farklı sürümleri arasında bazı özellikler desteklenmekte yada yama(pollfill) atmanız gerekmektedir.Çoğu geliştirici bu tarayıcı farklılıklarından bıkmış olduğundan genelde saf JS kodları yerine daha fazla tarayıcı uyumlu olan jQuery kütüphanesini tercih etmekte.Seçim tabi ki sizin ama illa Javascript kullanacağım ben derseniz, JS metot ve özelliklerinin tarayıcı uyumluluklarını bilmenizde fayda var.

Bu sebeplerden dolayı bugün sizlere başta da dediğim gibi tarayıcı uyumluluklarını kontrol etmeniz için bazı online araçları sunacağım.Listeyi aktif açısından kullanıma elverişli araçlardan oluşturdum.İnternette mutlaka daha fazla uygulama vardır.Hadi listemize başlayalım.

Caniuse

caniuse

Caniuse, hangi tarayıcıların hangi özellikleri desteklediklerini öğrenmek için benim fikrime göre en kullanışlı site.HTML5 ve CSS özelliklerini arama kutucuğuna yazıyorsunuz, siz daha yazarken interaktif bir şekilde o özellik tarayıcı destekleri ile tablo halinde karşınıza çıkıyor.Uygulama aradığınız özelliğin tarayıcı desteklerine göre 3 uyarı rengi sunuyor.Yeşil renk bantları o özelliğe,o tarayıcının o versiyonun tam destek sağladığını belirtiyor.Açık yeşil kısmı destek sağladığını yani ön ek(pre-fix) kullanacaksınız.Kırmızı bant ise şuan destek olmadığını belirtiyor.

QuirksMode

quirksmode

Quirksmode, Javascript konusunda bulabileceğiniz en iyi tarayıcı destek bilgisini veren sitedir.5 farklı tarayıcıya göre javscript metotlarının hangisnin destekleyip desteklemediğini öğrenebilirsiniz.

HTML5 Please

html5please

HTML5 Please,özellikle HTML5 ile gelen yeni teknolojilerin ve özelliklerin hangisinin kullanılıp,kullanılmaması gerektiğini belirtiyor.Kırmızı renkli avoid bantlı olanlar henüz kullanılmayacak olanlar.Sarı renkli olanlar özel koşullarda kullanılması gerekenler ve yeşil renkli olanlar kullanılabilecek olanlar.Burada dikkat edilmesi gereken bütün yeşil renkli olanlar normal olarak kullanılmıyor.Bazıları prefix,bazıları pollfill ile kullanılıyor.En güzel yanı size pollfill tavsiye etmeleri.

CSS3 Please

css3please

CSS3 Please özellikle CSS3 yeni yeni front-end hayatına girdiğinde işe yarıyordu.Hangi yeni özelliklerin nasıl kullanacağı ile ilgili bilgi veriyordu.Şuan da pek fazla bir içerik kalmadı ama var olanlara göz atabilirsiniz.Son güncelleme ile sitesinde autoprefix kullanımı önermiş.

 

W3Schools CSS3

w3schools

W3Schools, web geliştiricilerinin mutlaka bilgi bir sitedir.W3schols CSS3 özellilerinin hangi tarayıcılarda desteklendiğini gösteren bir tablo yayınlıyor.Buradan da bakabilirsiniz.

Web Platform

webplatform

Arayüz geliştiricilerinin özellikle bu işe yeni başlayanların mutlaka takip etmesi gereken bir site.Burada html ve css ile ilgili dersler anlatılırken, herhangi bir özelliğin açıklamasının altında tarayıcı desteklerini de görebilirsiniz.

Sonuç

Arayüz geliştiricilerinin esas işi tarayıcı bazlı olduğunundan yazdıkları kodlarının farklı tarayıcılarda sorunsuz olarak çalışması çok önemlidir.Geliştirdiği bir sitenin ziyaretçilerinin hangi tarayıcılardan geleceğini bilmediği için yazdığı kodları genel olarak kullanılan bütün tarayıcılara uydurması zorludur.Tabi ki kolaya kaçıp yazdığı siteye bir uyarı geçip, ziyaretçiyi başka tarayıcıya yönlendirebilir de,bu geliştiriciye kalmış.Ama devamlığı olan iş yapmak istiyorsa dikkat etmesi gerekir.

Belirttiğim gibi listeyi kısa tutmam sitelerin aktiflikleri ile alakalıdır.Eğer bu konuyla alakalı kullanışlı olduğunu düşündüğünüz bir uygulama varsa yorum olarak belirtebilirsiniz.Listeye eklemekten keyif duyarım.Bir sonraki yazımda yazdığınız kodlarının kabul görmüş standartlara göre hatalı olup olmadığını test edebileceğiniz araçlardan bahsedeceğim.Eğer yazımı beğendiyseniz başkalarının ulaşması için paylaşabilirsiniz.

Her türlü düşünceye açığız.Lütfen yorum bırakmayı ihmal etmeyin.Bilgi paylaştıkca çoğalır.Yazımızı beğendiyseniz paylaşın,herkes faydalansın.

BİZE KATILIN - KOLAY ERİŞİM
BİZE KATILIN - KOLAY ERİŞİM
İçeriklere ve web tasarım dünyasındaki gelişmelere kolay erişmek için bültene abone olmayı unutmayın
İstediğiniz zaman abonelikten çıkabilirsiniz.
Bunları da beğenebilirsin