<a href=https://vivaldi.com/press/icons/viv_icon.png download>Vivaldi Logosu</a>  

Bu örnekteki resim tarayıcı ekranında gösterilmek yerine indirilecektir.

Eğer download özniteliğine bir değer verirsek, indirme ekranında varsayılan dosya ismi bu değer olacaktır.

<a href=https://vivaldi.com/press/icons/viv_icon.png download="Vivaldi Logosu.png">Vivaldi Logosu</a>  

Bu özelliği Edge, Chrome, Firefox, Opera ve Vivaldi desteklemekte.

Sorun yukarıda da belirttiğim gibi, Türkçe metinde ı<->I ve i<->İ arası dönüşümde harflerin kendisinin değişmesi. Şunu rahatlıkla söyleyebilirim ki W3C CSS 2.1 önergesinde bu dönüşümün nasıl yapılacağına dair verilen tarife göre bizlerin bu şekilde bir sorunla karşılaşmaması gerekli. Biraz daha araştırınca, bu sorun tarayıcı üreticilerinin göz ardı ettiği ve üzerine hata raporlarının açıldığı eskice konulara kadar uzanıyor. Dahası CSS3 içindeki ilgili taslak önergede bu soruna gönderme bile var. Mozilla Firefox bu konuda bir çalışma yaptı ve Türkçe gibi başka dillerde meydana gelen bu sorunu çözdü. Ancak diğer tarayıcılarda bu sorun helen çözülmeyi bekliyor. Şuan herkese açık iki tarayıcı çekirdeği mevcut. Gecko olanda sorun çözülmüş durumda, webkit’te ise bu sorun 21312 numaralı hata kaydı olarak bildirilmiş durumda. Presto ve Trident’in ise hata takip sistemine ulaşamadığımız için herhangi bir bilgi veremeyeceğim.

Sonuç olarak bu yazı soruna bir çözüm önermiyor, sadece sorunun durumunu ortaya koyuyor. Tarayıcı çekirdeklerindeki sorun çözüldükçe daha serbest şekilde text-transform kullanabileceğiz. Tarayıcı üreticilerinin şuanki öncelikleri sanırım bu konu değil, belki onların kulağını biraz çekmek gerekiyor olabilir. Ne dersiniz?

Diğer yandan, Opera Software‘den Patric Dragonfly üzerine bir sunum yaptı. Hata ayıklamada kullanılabileceğiniz bu mucize araç üzerine yazılabilecek oldukça çok şey var. Kabaca Firefug’ın Opera’daki karşılığı diyebilirsiniz ve CTRL + Shift + i ile erişebilirsiniz.

Opera Türkiye ekibi ile beraber bir tanıtım masamız vardı ve insanlara Opera ürünlerini tanıttık. Detaylı bilgileri Opera Türkiye üzerinden edinebilirsiniz.

Sorunun araştırırken ilk karşılaştığım şey hata uçbirimindeki hatalar oldu. Javascript, bir XML dosyası üzerinde belli bir elemente ulaşmaya çalışıyor ancak o element bulunamadığı için hata meydana geliyordu. Biraz daha detayına girince elementlerin b isimli bir değişkenin değerine bağlı olarak çağrıldıklarını farkettim. Bu değişken ise beni sorunun kaynaklandığı yere götürdü. http://aio.meb.gov.tr/xmlAnasayfaLoader.js ve http://aio.meb.gov.tr/xmlMenuLoader.js dosyalarında browserKontrol() isimli birer fonksiyon tanımlanmış ve bu fonsiyon çağırılınca b isimli global bir değişkenin değeri değiştiriliyor. Eğer tarayıcı Internet Explorer ise 0 değerini, Netscape ise 1 değerini alıyor. Yani işin özeti tarayıcıya göre bir kontrol söz konusu.  

Bu kullanım ve b isimli değişken menü oluşturulurken, XML verisi okumada kullanılıyor, yani Opera’nın hata ürettiği yerde.  Tarayıcı kontrolünün yapılmasının ve bu b değişkenine ihtiyaç duyulmasının nedeni, açık web standartları ve Microsoft standartları arasındaki farklardan dolayıdır. Bu alandaki en önemli fark boşlukların ve yeni satırların nasıl değerlendirileceği üzerinedir. Microsoft Internet Explorer, XML dosyasındaki düğümler arası boşlukları ve yeni satırları önemsemezken, diğer tarayıcılar bunları yeni birer düğüm olarak görmekteler. Böylece bir elementin çocuk sayısı, ebeveyni o olan element sayısı, değişebilir.

Bir elementin childNodes özelliği, o elementin altında bulunan elementleri içeren bir dizidir aslında. Örnek olarak aşağıdaki bir kullanım W3C tarafından önerilen bir kullanım şeklidir.

Internet Explorer kullanıcıları yukarıdaki örneği farklı bir sonuçla görmektedirler. Meb’in bu sitesini hazırlayan web geliştiricileri bu uyumsuzluk problemini aşmak için tarayıcı kimliğine göre hareket etme kararı almışlardır, ancak bu her zaman faydalı bir çözüm değildir. Özellikle tarayıcı dünyasına yeni oyuncuların girdiği şu zamanlarda(tarayıcılar artık sadece masaüstü platformunda değiller).

Web geliştiricileri aşağıdaki gibi bir kod kullanarak bu problemi aşabilirlerdi. Bu aynı zamanda Mozilla’nın web geliştiricilerine önerdiği yöntem. Kod bakımını azaltan ve oldukça doğru çalışan bir yöntem.

Buradaki tek fark yazı ve yorumları içeren çocuk elementleri aşmak için nodeType kontrolü yapılmıştır. IE, diğer tarayıcılar gibi yazı içeriği ve yorum içerek elementleri alt bir çocuk element olarak algılamıyor. Bu düzen, Microsoft’un çalışmasını arzu ettiği şekilde.

Sitede bunun gibi 6 tane kullanım var. DOM üzerinde JavaScript ile yapılan işlemler genelde bir ağırlık yaratır ancak sitedeki uygulama bariz bir ağırlaşmaya sebep olacak kadar veri içermiyor. En nihayetinde üzerinde çalıştığımız xml dosyaları büyük boyutlu değil. nodeType kontrollerinin yapılması sitenin performansını pek de etkilemeyeceğini söyleyebiliriz. Açık Webli günler….

Kaynaklar

• W3 School

• Migrate apps from Internet Explorer to Mozilla

Genel öznitelikler neredeyse tüm HTML elementlerinde kullanılabilecek öznitelikleri kapsar. Bunları iki gruba ayırabiliriz: öznitelikler ve olay tutucular.

Öznitelikler o elemente ait belli karakteristik özellikleri belirlemede kullanılır. Özniteliklerin isimlerini, ne işe yaradığını ve nasıl kullanıldığını aşağıdaki başlıklardan okuyabilirsiniz.

Genel Öznitelikler

Aşağıdaki anahtar kelimeler neredeyse tüm HTML elementlerinde öznitelik adı olarak kullanılabilir.

accesskey

HTML elementleri erişim tuşlarına sahip olabilirler. Bu sayede klavye düğmelerine basarak bu elementlere kolayca ulaşabilirsiniz. Kullanıcıların özellikle form elementlerine ve bağlantılara tek tuşa basarak kolayca ulaşması için kullanabilirsiniz. Bu sayede fare kullanmakta güçlük çeken insanlar için sitenizde alternatif bir kullanım yolu sağlarsınız.

Genel kullanım şekli;

<etiketadi accesskey="karakter">Element içeriği</etiketadi>

Örnek kullanım şekli;

Accesskey özniteliği olan elementlere ulaşmak için alt tuşuna basarken accesskeyde belirtilen değere basmak yeterlidir. Örneğin yukarıdaki Opera Türkiye’ye Bağlantı elementine ulaşmak için alt+o klavye kısayolunu kullanmak gereklidir. Opera web tarayıcısında ise shift+esc düğmesine basarak sayfada kullanabileceğiniz tüm accesskeyleri görebilirsiniz.

HTML5 ile eklenen kısım

Bir elemente birden fazla accesskey atanabilir. Bunun için her karakter arasında boşluk bırakmanız gerekli. Örneğin;

Yukarıdaki örneği klavyesinde s karakteri olmayan bir cihazda, cep telefonu gibi, 0 tuşuna basarak da bu elemente ulaşabilirsiniz.

Uyarı: Bir elemente birden fazla tuş ayarlama özelliği W3C HTML5 tanımlamasında yer alsa da henüz tarayıcılar tarafından uygulanmamıştır. Bu yüzden düzgün sonuç alamayabilirsiniz.

class

Elementleri sınıflandırmak için class özniteliğini kullanabilirsiniz. Bu sınıflar pratikte daha kolay CSS kodu yazmanızı sağlar. Tüm tarayıcılarca desteklenir.

<etiketadi class="class1 class2">Element İçeriği</etiketadi>

Örnek kullanım;

Not: Bir element birden fazla class değerine sahip olabilir. Bunlar boşluk ile ayrılmalıdır.

contenteditable

HTML görüntülerken elementlerin içeriğini düzenlemek için kullanılır. Değer olarak iki farklı değer alır: true ve false.  Elementi düzenlenebilir durumda getirmek için contenteditable özniteliğini değerini true olarak belirmek gereklidir. Eğer değer false olursa element düzenlenemez durumdadır. Bunlar dışında kalan değerler için üçüncü bir durum vardır: inherit. Inherit kalıtsal anlamına gelir ve elementin bir üstündeki elementin, kapsayıcı elementin, evebeyn elementin, contenteditable değeri baz alınır. Tüm masaüstü tarayıcı sürümlerinde bu öznitelik desteklenir.

<etiketadi contenteditable="true|false|inherit">Element İçeriği</etiketadi>

Örnek;

contextmenu

Bir elemente sağ tıkladığınızda o elemente özel kullanılabilecek komutların gösterilmesini sağlamaktadır. Mesela bir yazı girme alanına sağ tıkladığınızda çıkacak bir komut ile büyük-küçük harfler arasında değişimler yapmak için kullanabilirsiniz. Bu özellik şu anda hiçbir tarayıcıya eklenmemiştir. 8+ sürümlerinde Firefox bunun w3c kuralına tam olarak uymayan, ama oldukça yakın, bir uygulamasına sahiptir. Firefox’un sağladığı örneğine erişmek için bu adresi kullanabilirsiniz.

<elementadi contextmenu="menünün id değeri">Element içeriği</elementadi>

dir

Türkçe soldan sağa doğru yazılan bir dil. Ancak tüm diller bu şekilde değil, dir özniteliği Arapça gibi diller için yazının sağdan sola akacağını belirtmede kullanılır. Bu öznitelik üç değere sahip olabilir:  ltr, rtl ve auto. ltr, left-to-right soldan sağa; rtl, right-to-left sağdan sola; auto ise belirli kıstaslara göre hangisinin kullanılacağını belirler.

<elementadi dir="ltr|rtl|auto">Element içeriği</elementadi>

draggable

Kullanıcının bu elementi sürükleyebileceğini belirtmek için kullanılır. Üç değer alır. true, false, auto. true olarak belirlenirse element, kullanıcı tarafından sürüklenebilir.  false olursa sürükleme işlemine imkan tanınmaz. auto değerinde ise bu imkanın sağlanıp sağlanmayacağı tarayıcıya bırakılır, varsayılan değer de bu değerdir. href özniteliğine sahip bağlantılar ve resimler sürüklenebilir elementlerdir.IE haricindeki web tarayıcılarınca desteklenir.

<elementadi draggable="true">Element içeriği</elementadi>

dropzone

Kullanıcının sürüklediği elementlerin bırakıldığında taşınan içeriğin nasıl işleneceğini belirtmede kullanılır. ÜÇ farklı değer alır: copy, move, link. copy değerini aldığında taşınan içerik bırakılan yere kopyalanır. move değerini aldığında ise taşınan içeriğin ikinci bir kopyası oluşturulmaz ve yeri değiştirilir. link değerini aldığında ise özgün içeriğe bir bağlantı verilir. Bu üç değerden ayrı olarak file: veya string: ile başlayan ikinci bir parametre daha alabilir. Bu ikinci parametre kabul edilebilecek içeriği belirtir. Bu özellik şu anda hiç bir tarayıcı tarafından desteklenmemektedir.

Bu örnek w3c HTML5 belirtiminden alınmıştır.

hidden

Bu öznitelik elementi gizlemek için kullanılır. Bu öznitelik doğru/yanlış şeklinde iki yönlü çalışır. Eğer ifade edilmişse element gizlenir. Web tarayıcısı bu özniteliğin kullanıldığı elementleri ekranda göstermez. JavaScript yardımıyla bu öznitelik kaldırılabilir.

<elementadi hidden="hidden">Element içeriği</elementadi>

id

Bütün elementlere bir eşsiz bir isim vererek onları adlandırabilirsiniz. Böylece bütün elementleri birbirinden ayırabilirsiniz.

Element içeriği

Örnek kullanım şekli

id özniteğine vereceğiniz değerde en az bir karakter bulunmalı ve boşluk olmamalıdır.

id özniteliği çeşitli amaçlar için kullanabilirsiniz. CSS ya da Javascript ile kod yazarken bu elementlere doğrudan ulaşabilirsiniz. Örneğin aşağıdaki yukarıda kullanılan elementlere doğrudan

#ilkparagraf { //css kodu } #alttakikutu { // alttaki kutu için uygulanacak css kodu }

css kodlarıyla ulaşabilirsiniz. JavaScript ile ulaşmak için document.getElementById("ilkparagraf") ve document.getElementById("alttakikutu") şeklinde bir kod yazmanız bu elemente ulaşmanız için yeterlidir.

lang

Bu öznitelik, bu elementin içeriğinin hangi dilde yazıldığını gösteriyor. Google, Bing, Yahoo, Yandex gibi arama motorları sitelerin dillerini bu özniteliğin değerine göre belirler.

<elementadi lang="dil kısaltması">içerik</elementadi>

spellcheck

Elementin içindeki yazı üzerinde yazım denetimi yapılıp yapılmayacağını belirtir. İki değer alır: true, false. Bu öznitelik true değerine sahipse aşağıdakiler için yazım denetimi yapar:

• Girdi elementlerindeki yazılar(şifreler hariç)
• textarea elementindeki yazılar
• İçeriği düzenlenebilir elementlerdeki(contenteditable=true öznitelikli elementler) yazılar

<elementadi spellcheck="true">içerik</elementadi>

Şu an sadece Opera ve Chrome tarafından desteklenmektedir. IE10 ise bu desteği bir kaç yenilikle beraber sunacaktır.

style

Bir elemente satıriçi (inline), yani doğrudan kendi üzerinden, css biçimi eklemede kullanılır. Bu özniteliğin aldığı değer gerçekte bir css kod blokudur. Bu CSS kodları tek bir dosyada toplanarak sayfanın açılması daha verimli kılınabilir(önbellekleme yardımıyla).

element içeriği

tabindex

Bu öznitelik, tab tuşuna basıldığında elementin kaçıncı sırada odaklanılacağını belirtir. Tab tuşu bir formda, form elementleri arasında dolaşmayı ve aynı zamanda bağlantılar üzerinde de gezinmeyi kolaylaştırır. tabindex 0 ile 32767 arası bir tam sayı değeri alır. tabindex özniteliği sadece A, AREA, BUTTON, INPUT, OBJECT, SELECT ve TEXTAREA elementleriyle kullanılır.

<elementadi tabindex="sayi">elementiçeriği</elementadi>

title

Fare ile bir elementin üzerine geldiğinizde belirecek ipucu balonunda ne yazacağını belirtir. Tüm tarayıcılarca desteklenir.

<elementadi title="yazi">elementiçeriği</elementadi>

Olay Tutucuları

Aşağıdaki listede bir HTML elementinde kullanılabilecek olay tutucuları göstermektedir. Örneğin onclick o elemente ait tıklama olayında yapılacak komutlatı saklar. Bu bölüm Javascript ile ilgilidir. Ancak aşağıdaki listede bulunan özniteliklerin de HTML elementleriyle kullanılabileceğini unutmayın:

• onabort
• onblur*
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• oncuechange
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror*
• onfocus*
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onload*
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onreset
• onscroll*
• onseeked
• onseeking
• onselect
• onshow
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• onwaiting

*Not: *Yıldız ile işaretlenmiş öznitelikler window nesnesine ve document nesnesine uygulandıkları zaman farklı anlamlar taşıdıklarını unutmayın.

*Önemli Not: *Butün bu öznitelikler tüm elementlere eklenebilse de hepsinde aynı etkiyi oluşturamayacaktır. Örneğin sadece medya elementleri(video, audio gibi) onvolumechange özniteliğini doğru şekilde kullanabilir.

Kaynaklar:

• W3C Schools
• W3C HTML5 Belirtimi

Bilgisayarınız ile bir siteye bağlanırken, biri sizin bilgisayarınız diğeri ise bağlanmak istediğiniz sitenin bilgisayarı(sunucusu) olmak üzere iki bilgisayarın IP adresi üzerinden belirli veri paketleri gönderilir. Bilgisayarınızın yaptığı isteğe gönderilen cevap, tarayıcınız tarafından yorumlanarak görsel bir şekle bürünür ve etkileşiminize açık hale getirilir. Sunucudan gelen bilginin nasıl değerlendirileceği konusunda bir şablonun olmaması durumunda, size gönderilen bilgiyi anlamanız güçleşecektir. Posta kutunuzdaki Çince bir mektubu anlayabilmek için öncelikle  Çince öğrenmeniz gerekecektir, tabi üçüncü birisini işin içine katmıyoruz. Web standartları tam olarak burada, neyin nasıl değerlendirileceğini belirtiyor. Tarayıcınız web standartlarına göre Web sayfasını anlamlandırıyor. Bir title etiketinin içeriğini tarayıcı penceresinin başlığına yerleştiriyor. script elementinin içeriğini davranışsal bir program kodu olarak değerlendiriyor ve içeriğine göre çalıştırıyor.

Açık Web Standartları, sizlere çeşitli avantajlar sağlıyor. Her şeyden  önce bu standartlar belli bir insanın veya bir grubun belirlediği bir kurallar kümesi olmayıp, çok farklı insanlardan gelen çeşitli fikirlerin tartışılarak, belli bir olgunlaşma sürecinden geçirilerek ve gerekli ölçüde test edilerek belirlenmiş kurallardır. Böylece açık Web standartları belli bir kesime değil kamuya aittir.

Kod verimliliğinizi arttırır. Gereksiz kod tekrarı yapmadan, kullanmak istediğiniz şeyi bir kere yazın ve ihtiyacınız olduğu zaman kullanın.

Kod bakımını kolaylaştırır. Verimli yazdığınız kodu düzenlemek daha kolaydır ve ayrıca web standartları geriye dönük uyumlu bir şekilde gelişir. Bunun anlamı bugün web standartlarına uygun yazdığınız kod, gelecekte de çalışmaya devam edecektir.

Kişilerin kim olduklarından bağımsız bir şekilde her ortamda Web’ten faydalanmalarını amaçlar. İyi bir şekilde hazırlanmış, Web standartlarına uygun bir siteniz görme engelli insanlar tarafından bile kullanılabilir.

Web’in her ortamda uygun şekilde çalışmasını sağlar. Sadece farklı tarayıcılar ve işletim sistemleri arasında değil, farklı cihazlarda da Web sitesinin uygun bir şekilde görüntülenebilmesini ve erişilebilmesini sağlar. Web’e sadece bilgisayarlardan değil, telefonlardan, tabletlerden, televizyonlardan, oyun konsollarından da erişildiği bir dünyada yaşadığımızı düşünürseniz Web standartlarına uygun bir site ile paylaşmak istediklerinizi daha fazla insanla paylaşmış olacaksınız. Eğer bir şirketseniz, hedef kitlenizi genişletmiş olacaksınız.

Arama motorlarında daha üst sıralarda yer almanızı sağlar. Arama motorları web sitenizdeki bilgileri belli zamanlarda tarayarak dizinler. Eğer Web standartlarına uygun bir şekilde sitenizi hazırlamışsanız bunun Google, Bing, Yandex gibi arama motorlarında daha üst sıralarda görünme ihtimali daha yüksektir.

Editör

Web sayfalarını nasıl hazırladığımı soran bir çok insan oldu bugüne kadar. FrontPage ve Dreamweaver programlarını ekol olan gören bir nesil çoktan yetişti bile. Ancak herşeyin görsel dünyaya geçtiği bu yıllarda bile kod yazma bağımlılığı olan insanlar klavyeyi bir kere olsun bırakamıyorlar. Ben de kendimi bu ikinci grupta görüyorum. Dolayısıyla FrontPage ve Dreamweaver gibi görsel odaklı da çalışabilen programlardan bahsetmeyeceğim. Buna ek olarak projede kullandığım Sublime Text 2‘nin nasıl kullanıldığından da bu yazıda bahsetmeyeceğim. Sizlere sadece Sublime Text 2’yi isim olarak tanıtacağım. Kafa karıştırmayan ve oldukça anlaşılır bir arabirimi olan bir editör. Eğer dosyanın içine ne yazacağınızı/ekleyeceğinizi biliyorsanız, sizi oldukça tatmin edecek özellikleri bünyesinde barındıyor. Bu özelliklerin tanıtımı ayrıca bir yazının konusu. Bu editöre ücretsiz alternatif olarak NotePad++‘ı deneyebilirsiniz. Notepad++ da Sublime ayarında pratik özelliklere sahip. Üçüncü olarak devasa bir program olan Aptana mevcut. Eclipse tabanı üzerinden geliştirilen Aptana, Web programlama dillerini destekleyen kocaman bir IDE. Sahip olduğu onlarca özelliğe rağmen benim deneyimlerimde sürekli hantal kaldığı için kullanmanızı çok fazla öneremiyorum. Ancak yine de ondan verim alabilirsiniz. Komodo Edit ise kullanılabilecek bir başka editör. Bütün hepsi eklentilerle zenginleştirilebilen editörler ve herhangi birini veya bir başkasını projenize başlarken kullanabilirsiniz.

Boş HTML5 Şablonu

Projeye hızlıca başlayabilmek için HTML5 Boilprate isimli  içinde ön yüze ait çeşitli iyileştirmeler barındıran boş bir HTML dökümanı açmam gerekti. HTML5 Boilprate, ön yüz geliştiricisi olarak çalışan bir grup insanın çeşitli teknikleri HTML5’e uyumlu boş bir html dosyasında bütünleştirmesi sonucu ortaya çıkan bir proje. Boilprate’in sunduğu boş sayfada tarayıcı özelliği algılamada kullanılan Modenizr’ı, jQuery kütüphanesini, tarayıcının varsayılan CSS’ini sıfırlayıcı CSS kodunu, HTML5’in semantik(anlamsal) etiketlerini desteklemeyen tarayıcıların davranışlarını düzenleyen CSS kodlarını ve daha bir sürü şeyi bulabilirsiniz. Bu cümlede kafanız belki karışmış olabilir. Blogumda bunları tanıtmayı planlıyorum ancak bu yazıda değil. Boilprate’in sunduğu çoğu özelliğe projenin ihtiyacı olmadığı için sade bir sürümünü Initializr sitesinden edindim. Mesela Google Analytics kodu gerekmiyordu.

Grafik Çizimi

Bir Web uygulamasıyla grafiğin nasıl çizileceği konusunda çok bir fikir sahibi değildim. Bugüne kadar denk geldiğim sitelerde her zaman Flash kullanılmıştı ama Flash bilmediğim için bunu Web’e uygun bir şeyle halletmem gerektiğini düşündüm. Web’te kısa bir araştırma sonucunda High Chart isimli bir Javascript framework’ü(bunun iskelet, sistem karşılıkları var) buldum. Bu sistem SVG görüntüleme teknolojisini kullanıyor. Internet Explorer’ın eski sürümleri için ise VLM’e geçiş yapıyor. SVG, ölçeklenebilir grafikler. Yani biz bunları ne kadar büyütürsek büyütelim vektör tabanlı oldukları için herhangi bir çözünürlük deformasyonuna uğramıyorlar. Diğer yandan jpeg gibi fotoğraf verisi saklamaya da elverişli değiller. SVG konusunda Türkçe pek bilgi bulunmamakta ve denk geldiğim Türkçe sitelerde de çok büyük oranda kullanılmamakta. Internet Explorer’ın SVG’yi oldukça geç desteklemeye başlaması, SVG’nin diğer resim biçimlerine göre oluşturulmanın nispeten zor olması ve projenin gerçekten SVG’ye ihtiyaç duymaması veya SVG’den bil haberdar olunması, SVG’nin yaygın olarak kullanılmasını engellediği kanaatindeyim. Ancak SVG görsellerini Vikipedi sitesinde görebilmeniz mümkündür.

Bir sonraki yazıda görüşmek dileğiyle.

Gitmek istediğiniz tarihi ve yönü belirledikten sonra “Bilet Al” düğmesi Opera’da işlemiyor. Aşağıdaki javascript kodu “Bilet Al” düğmesine tıklandığında gerekli işlemlerin yapılmasını engelliyor. Engellemenin sebebi düzgün yazılmamış tarayıcı tanımlama kodu. Opera, Firefox olarak tanımlanmadığı için Firefox’un çalıştırdığı kodları çalıştırmıyor. Aşağıda sorunlu olan kodu görebilirsiniz.

Yukarıdaki şey sorunun temel kaynağı olarak görülebilir ancak gözden kaçırılmaması gereken asıl nokta __aspxFirefox ve __aspxBrowserVersion değişkenlerinin defalarca ve defalarca kullanılması ve her seferinde yukarıdaki gibi yanlış kodun Opera üzerinde çalıştırılması durumu var. Site tercihlerinden Firefox olarak görün seçeneğinin işaretlenmesi durumunda Opera herhangi bir problem olmadan web sayfasını çalıştırmayı başarıyor. Bu da site üzerinde bir tarayıcı yönlendirmesi yapıldığının açık bir göstergesi.

Bugünkü popüler tarayıcılara baktığımızda, 4 farklı grup görülmektedir. Internet Explorer –  Trident, Opera – Presto, Firefox – Gecko, Chrome ile Safari – Webkit render motorlarını kullanmaktalar. Arkasındaki destek açısından Webkit, halen taslak aşamasında olan web teknolojilerini hızlı bir şekilde -webkit ön eki ile beraber herkesin kullanımına açıyor. Yeni CSS teknolojilerinin yarattığı yeni dünyayı herkese bir an önce sunmak isteyen web sitesi geliştiricileri ise bu yenilikleri en kısa sürede kullanmaya başlıyorlar. Bunun Web’in ilerlemesi için iyi bir şey olması gerekiyor ancak geliştiriciler geriye uyumlu kod hazırlamayı unuttukları gibi CSS kodunun standart, ön eksiz, halini de eklemiyorlar. Sadece bir render motorunun ve onun da en son sürümünün sunduğu özelliklere sahip olmayan insanlar, web sitesini plananan şekilde görüntüleyemiyor. Bazen ise kullanıcının tarayıcısı o CSS teknolojisine destek verse bilegerekli  direktifi almayan tarayıcı web sitesini yine planlanan şekilde görüntülemeyecek. Sonuç olarak o siteden faydalanmanız için tarayıcı değişikliği yapmanız gerekecek.

Örnek vermek gerekirse, -webkit-border-radius: şeklinde kullanılan bir css özelliği, sadece bu şekilde kullanıldığı için webkit tabanlı olmayan tarayıcılarda kullanıcı deneyiminin düşmesine sebep olacaktır. -webkit-border-radius: yanında ek olarak border-radius: şekildeki standartlaştırılmış kod da kullanılırsa problem olmayacaktır.