HTML5'i eski tarayıcılarda Google Chrome Frame ile oluşturma

Giriş

HTML5, web geliştirici araç kutusuna aşağıdakileri de içeren çok sayıda yeni ve faydalı araç ekler:

  • Yeni, daha güçlü JavaScript API'leri
  • Vektör grafikleri için SVG
  • 2D için ve WebGL 3D grafiklere sahip tuval
  • Yuvarlatılmış köşeler, renk geçişleri vb. için CSS3.
  • Daha etkileyici işaretleme

Bu liste elbette kapsamlı değildir; web platformu muazzam bir ilerleme kaydetti ve eski tarayıcılarla modernler arasındaki fark her gün artıyor.
Başlıca masaüstü tarayıcıların hepsi son sürümde HTML5'in önemli bir kısmını desteklemektedir. Ancak uzun süredir devam eden eski tarayıcılar, en yeni ve en önemli özellikleri benimseme konusunda bir zorluk yaratıyor.

Google Chrome Frame şu anda son teknoloji ürünü HTML5 sayfaları oluşturmanıza yardımcı olurken, aynı zamanda eski tarayıcıları kullanan kişilerin içeriğinizi görebilmesini de sağlar.

Google Chrome Frame nedir?

Google Chrome Frame, Google Chrome'un oluşturma motoru kullanılarak tam tarayıcı tuvalinin oluşturulmasına olanak tanıyan bir Internet Explorer eklentisidir. Internet Explorer kullanıcı deneyimi ile sorunsuz bir şekilde entegre edilmiş Chrome'da bulduğunuz tüm HTML5 özelliklerini destekler. Chrome Frame, Internet Explorer 6, 7, 8 ve 9'da kullanılabilir. Chrome Frame, IE6-to-IE8 gibi eski tarayıcılar desteklenirken kesinlikle daha faydalıdır. Ancak, örneğin uygulamanız için WebGL'ye ihtiyaç duyuyorsanız, IE9 kullanıcıları için Chrome Frame'in gerekliliği de faydalı olabilir.

HTML5 çoklu dolguları, yeni tarayıcılara geçişi kolaylaştırmak için başka bir yol sunar. Maalesef her özelliği emüle edemiyorlar ve halihazırda yeni nesilden daha yavaş olan eski tarayıcılarda sayfanızı yavaşlatıyorlar.

Siteniz HTML5 özelliklerine ihtiyaç duymasa bile, Chrome Frame'i kullanmak daha iyi bir kullanıcı deneyimi sağlayabilir. Bu uygulamayı yüklemiş olan kullanıcılar, oluşturma işlemi genellikle daha hızlı gerçekleşir ve eski tarayıcılarda desteklenmeyen özelliklere erişebilir. Elbette, makinelerinde Chrome Frame bulunmayan kullanıcılar için de eski tarayıcıları desteklemeye karar verebilirsiniz.

Etkinleştirme

Chrome Frame'in bir sayfayı oluşturmasını sağlamak için HTML meta etiketi ekleyebilir veya HTTP üstbilgisi kullanabilirsiniz. Bu çok önemlidir. Bu, bir kullanıcı Chrome Frame'i yüklemişse hiçbir sitenin kesintiye uğramayacağı anlamına gelir. Çünkü site, eklentinin kullanımı veya varsayılan oluşturma konusunda tam denetime sahiptir. Aşağıdaki kod snippet'lerinde bir sitenin Chrome Frame tarafından oluşturulmaya nasıl dahil olabileceği gösterilmektedir.

1.Seçenek: HTTP-Header (bunu HTTP sunucusu (ör. Apache) yapılandırmanıza ekleyebilirsiniz):

X-UA-Compatible: chrome=1

2. Seçenek: Meta etiket (Bunu HTML <head> bölümünüze yapıştırmanız yeterlidir)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Bunlardan birini sitenize eklediğinizde, kullanıcının makinesinde yüklüyse sayfalar Chrome Frame kullanılarak oluşturulur.

Google Chrome Frame isteniyor

Aşağıdakiler de dahil olmak üzere birçok nedenden dolayı eski tarayıcılara ilişkin desteği tamamen sonlandırmaya karar verebilirsiniz:

  • Siteniz HTML5 video, tuval, WebGL veya CSS3 gibi modern özellikler gerektiriyor
  • Eski tarayıcılarda harcanan geliştirme süresi çok yüksek
  • Yeni özelliklerin geliştirilme süresini kısaltın

Chrome Frame, eski tarayıcıların kullanıcılarına sitenizi kullanmaya devam etmeleri için bir yol sunmaya devam etmek için bir strateji sağlayabilir.

Chrome Frame, ana makinenin Kullanıcı Aracısı başlığını "chromeframe" dizesiyle genişleterek kullanılabilir olduğunu bildirir. Daha fazla bilgi için Chrome Frame User Agent sayfasına göz atın.

Bu jetonu aramak ve Chrome Frame'in bir sayfada kullanılıp kullanılamayacağını belirlemek için sunucu tarafı algılamayı kullanın. Chrome Frame mevcutsa gerekli meta etiketi ekleyebilirsiniz; yoksa, kullanıcıları Chrome Frame'in nasıl yükleneceğini açıklayan bir sayfaya yönlendirebilirsiniz. Sunucu tarafı algılamaya alternatif olarak, Chrome Frame'i algılamak ve kullanıcılardan tarayıcıyı yeniden başlatmadan eklentiyi yüklemelerini istemek için CFInstall.js komut dosyasını kullanabilirsiniz. Komut dosyasını kullanmak oldukça basit. Komut dosyası etiketlerini ve isteğe bağlı stilleri sayfanıza, aşağıdaki örnekte olduğu gibi eklemeniz yeterlidir:

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

Kendinize istem gönderme

Ayrıca bir açılış sayfası oluşturmaya veya kendiniz bir katman oluşturmaya da karar verebilirsiniz. Kullanıcıları bu URL'ye gönder

http://www.google.com/chromeframe/

Bunlar, IFRAME içine konulabilir.

Yükleme tamamlandıktan sonra kullanıcıları sitenize geri göndermek için bir yönlendirme parametresi ekleyin:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Chrome Frame açılış sayfasına gitmek yerine, kullanıcıları doğrudan EULA'ya da gönderebilir, böylece yükleme işleminin bir adımını kaydedebilirsiniz. http://www.google.com/chromeframe/eula.html

Yönetici hakkı gerekmez

Kullanıcılar, Chrome Frame'i makinelerine yönetici ayrıcalıkları olmadan yükleyebilir.

Chrome Frame'in kullanıcı düzeyinde yüklenmesini etkinleştirmek için user=true parametresini aşağıdaki gibi ekleyin:

http://www.google.com/chromeframe/?user=true

Kurumsal kurulum

Kuruluşlar, http://www.google.com/chromeframe/eula.html?msi=true adresinden indirilebilen MSI yükleyiciyi kullanarak Chrome Frame'i şirket genelinde dağıtabilir.

Chrome ve kurumsal dağıtımlar hakkında daha fazla bilgi için http://www.chromium.org/administrators adresine bakın.

Evlat Edinme

yahoo.com, wordpress.com gibi birçok büyük web sitesi ve çeşitli Google özellikleri Google Chrome Frame'i benimsemiştir. Chrome Frame, kullanıcılarına birçok site için daha modern bir web deneyimi sunmanın yanı sıra ilk yükleme süresinde önemli bir iyileştirme sunar. webpagetest.org adresine gidip tarayıcı olarak Chrome Frame'i seçerek Chrome Frame'in sitenizin daha hızlı oluşturulmasına yardımcı olup olmadığını kontrol edebilirsiniz.

Daha fazla bilgi

Daha fazla bilgi için Başlangıç Kılavuzu'na bakın veya Google IO 2011'in bu videosunu izleyin