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

Giriş

HTML5, web geliştirici araç setine aşağıdakiler de dahil olmak üzere birçok yeni ve harika araç ekler:

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

Bu liste elbette her şeyi içermez. Web platformu büyük bir ilerleme kaydetti ve eski tarayıcılar ile modern tarayıcılar arasındaki fark her geçen gün artıyor.
Büyük masaüstü tarayıcıların tümü artık HTML5'in önemli bölümlerini en son sürümde destekliyor ancak eski tarayıcılar, günümüzün en yeni ve en iyi özelliklerinin benimsenmesini zorlaştırıyor.

Google Chrome Frame, eski tarayıcıları kullanan kullanıcıların içeriğinizi görmeye devam etmesini sağlarken günümüzde en gelişmiş HTML5 sayfalarını oluşturmanıza yardımcı olabilir.

Google Chrome Frame nedir?

Google Chrome Frame, Google Chrome'un oluşturma motorunu kullanarak tarayıcı kanvası tamamının oluşturulmasını sağlayan bir Internet Explorer eklentisidir. Chrome'da bulunan tüm HTML5 özelliklerini destekler ve Internet Explorer kullanıcı deneyimine sorunsuz bir şekilde entegre edilir. Chrome Frame, Internet Explorer 6, 7, 8 ve 9'da kullanılabilir. Chrome Frame, IE6-IE8 gibi eski tarayıcıları desteklerken kesinlikle daha kullanışlıdır ancak örneğin uygulamanız için WebGL gerekiyorsa IE9 kullanıcıları için Chrome Frame'i zorunlu kılmak da yararlı olabilir.

HTML5 çoklu dolguları, yeni tarayıcılara geçişi kolaylaştırmanın başka bir yolunu sunar. Maalesef her özelliği taklit edemezler ve zaten yeni nesil tarayıcılardan daha yavaş olan eski tarayıcılarda sayfanızı daha da yavaşlatırlar.

Sitenizin HTML5 özelliklerine ihtiyacı olmasa bile Chrome Frame'i kullanmak daha iyi bir kullanıcı deneyimi sağlayabilir. Daha önce yüklemiş olan kullanıcılar için oluşturma işlemi genellikle daha hızlıdır ve eski tarayıcılarda desteklenmeyen özelliklere erişebilirler. Elbette, makinelerinde Chrome Frame bulunmayan kullanıcılar için eski tarayıcıları desteklemeye devam edebilirsiniz.

Etkinleştirme

Bir HTML meta etiketi ekleyerek veya HTTP üst bilgisi kullanarak Chrome Frame'in bir sayfayı oluşturmasını sağlayabilirsiniz. Bu çok önemlidir. Bu, kullanıcının Chrome Frame yüklü olması durumunda hiçbir sitenin bozulmayacağı anlamına gelir. Bunun nedeni, eklentinin veya varsayılan oluşturmanın kullanımının tamamen sitenin kontrolünde olmasıdır. Aşağıdaki kod snippet'lerinde, bir sitenin Chrome Frame tarafından oluşturulmasını nasıl etkinleştirebileceği gösterilmektedir.

1.seçenek: HTTP-Header (Bunu HTTP sunucunuzun (ör. Apache) yapılandırmasına ekleyebilirsiniz):

X-UA-Compatible: chrome=1

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

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

Bunlardan birini sitenize ekledikten sonra, kullanıcının makinesine yüklüyse sayfalar Chrome Frame kullanılarak oluşturulur.

Google Chrome Frame'i isteme

Aşağıdakiler dahil birçok nedenden dolayı eski tarayıcılar için desteği tamamen sonlandırmaya karar verebilirsiniz:

  • Siteniz için HTML5 video, tuval, WebGL veya CSS3 gibi modern özellikler gerekiyorsa
  • Eski tarayıcılara harcanan geliştirme süresi çok yüksek
  • Yeni özelliklerin geliştirme 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 etmenizi sağlayacak bir strateji sağlayabilir.

Chrome Frame, ana makinenin User-Agent başlığını "chromeframe" dizesiyle genişleterek kullanılabilir olduğunu iletir. Daha fazla bilgi için Chrome Frame Kullanıcı Aracı başlıklı makaleyi inceleyin.

Bu jetonu aramak ve Chrome Frame'in bir sayfa için kullanılıp kullanılamayacağını belirlemek üzere sunucu tarafı algılama özelliğini kullanın. Chrome Frame mevcutsa gerekli meta etiketi ekleyebilirsiniz. Aksi takdirde 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ılarını yeniden başlatmadan eklentiyi yüklemelerini istemek için CFInstall.js komut dosyasını kullanabilirsiniz. Komut dosyasını kullanmak çok kolaydır. Senaryoyu ve isteğe bağlı stilleri sayfanıza aşağıdaki örnekte gösterildiği 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 katman oluşturmaya da karar verebilirsiniz. Kullanıcıları bu URL'ye gönderme

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

IFRAME'e yerleştirilebilir.

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 göndererek yükleme sürecinde bir adım tasarruf edebilirsiniz. http://www.google.com/chromeframe/eula.html

Yönetici hakları gerekmez

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

Chrome Frame'un kullanıcı düzeyinde yüklenmesini etkinleştirmek için user=true parametresini ekleyin. Aşağıdaki örnekte gösterildiği gibi:

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

Kurumsal kurulum

Kuruluşlar, Chrome Frame'i şirket genelinde dağıtmak için şu adresten indirilebilen MSI yükleyiciyi kullanabilir: http://www.google.com/chromeframe/eula.html?msi=true.

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

Evlat Edinme

yahoo.com, wordpress.com gibi birçok önemli web sitesi ve çeşitli Google mülkleri Google Chrome Frame'i kullanmaya başladı. Chrome Frame, kullanıcılarına birçok sitede daha modern bir web deneyimine erişim sağlamanın yanı sıra ilk yükleme süresinde de önemli bir iyileşme sağlar. Chrome Frame'in sitenizin daha hızlı oluşturulmasına yardımcı olup olmadığını kontrol etmek için webpagetest.org adresine gidip tarayıcı olarak Chrome Frame'i seçebilirsiniz.

Daha fazla bilgi

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