Web tarayıcıları sayfaları nasıl gösteriyor?

Web sitelerinin farklı web tarayıcılarında farklı göründüğüne şahit olmuşsunuzdur. Bazen belirli web siteleri, belirli tarayıcılarda hiç açılmayabilir de. Burada sorun, çoğu zaman web sitesinde değil, web tarayıcısındadır. Önde gelen 4 web tarayıcısı, sayfaları göstermek için farklı "rendering motorlarından" faydalanıyor. Windows 10'un yeni web tarayıcısı Microsoft Edge ile birlikte bu sayı, 5'e çıkmış olacak.

Kısacası web deneyiminiz, kullandığınız web tarayıcısına göre, hatta kullandığınız web tarayıcısının sürümüne göre değişebilir.

Rendering motoru nedir?

Web sayfaları, piksel piksel indirilen, tek parçalı yapılar değildir. Aksine HTML, CSS, JavaScript, PHP gibi kodlarla oluşturulurlar. Bu programlama dilleri, web tarayıcısına nerede ne yapması gerektiğini söyler. Her web tarayıcısı, içeriği ve stil bilgilerini işleyerek ekranda biçimlendirilmiş bir şekilde gösteren bir rendering motoruna sahiptir.

Sorun ise her web tarayıcısında kullanılan tek bir rendering motorunun olmamasıdır. Her programlama dili, tanımlamalarını detaylarıyla anlatıyor olsa da rendering motoru, bu tanımlamaları ancak yorumlayabilir.

Hangi web tarayıcısı, hangi motoru kullanıyor?

En popüler web tarayıcıları, dört ana rendering motorundan faydalanıyor.

WebKit: OS X ve iOS'taki Safari'de kullanılan açık kaynak kodlu web tarayıcısı. Android'in web tarayıcısı ve birçok mobil tarayıcı da WebKit kullanıyor.

Blink: WebKit'i temel alan, açık kaynak kodlu bir web tarayıcısı. Chrome, Opera, Amazon Silk ve Android'in WebView'u (uygulamaların içerisinde açılan web tarayıcıları) Blink'i kullanıyor.

Gecko: Mozilla Vakfı'nın geliştirdiği açık kaynak kodlu motor. Firefox tarafından kullanılıyor.

Trident: Microsoft'un geliştirdiği ve Internet Explorer'da kullandığı özel motor. Microsoft Edge web tarayıcısı, Trident'in yeni bir sürümü olan EdgeHTML'i kullanacak.

Web Standartları

Rendering motorları arasındaki fark, Internet Explorer'ın lider olduğu döneme göre çok daha az. acid3 gibi web sayfalarının ne kadar doğru render edildiğini testlerde tüm modern web tarayıcıları, yüksek puanlar almayı başarıyorlar. Bununla birlikte standartları yerine getirmek, oldukça karmaşık bir iş.

HTML, CSS ve diğerlerinin tanımlamaları oldukça geniş. Bu tanımlamalara yeni öğeler eklenirken, kullanılmayan ve eski tanımlamalar zaman içinde kaldırılabiliyor. Bunun rendering motorlarına yansıması ise zaman alıyor.

HTML5 ve CSS tanımlamalarındaki bazı öğeler ise önde gelen web tarayıcılarında desteklenmiyor veya sadece kısmen destekleniyor.

html5test.com web sitesini kullanarak web tarayıcınızın HTML5'in resmi ve deneysel özelliklerinden hangilerini desteklediğini görebilirsiniz.

Web geliştiricileri bir tarayıcıda desteklenen ancak diğerinde desteklenmeyen bir işlev kullandıklarında, desteklemeyen tarayıcı ya benzer bir işlevden faydalanır ya da işlevi yok sayar (örneğin saydam bir kutu, saydam olmayan bir biçimde gösterilebilir). Bu durum, web sayfalarını işlemeyi göründüğünden daha karmaşık bir hale getirir. Sıkça güncellenen bir web tarayıcısının, güncellenmeyene göre standartları daha iyi desteklemesi beklenebilir.

Web sayfalarının farklı görünmesinde sayfadaki hatalar, motordaki hatalar, yazı tipleri ve tarayıcıya özel işlevler gibi faktörler de rol oynar.