HTML5’de Tarayıcı Desteği

Merhaba, bu yazımızda HTML5’in hangi tarayıcılar tarafından desteklendiğini ve yeni gelen elemanlardan birkaç tanesine değineceğiz. Bonus olarak HTML5 desteği olmayan tarayıcılarda yeni özellikleri nasıl kullanacağımızdan bahsedeceğiz.

Hangi Tarayıcılar HTML5 Destekler!

Günümüzde hepimizin kullandığı popüler tarayıcıların hepsi, burada en son sürümleri demek daha doğru olabilir, HTML5’i desteklemektedir. Sizinde bildiğiniz gibi bunların başlıcaları IE, Chrome, Firefox ve Yandex browserlarıdır.

Bonus: Eski tarayıcılara HTML5 desteği getirmek

İnternet Explorer (IE) 9 dan eski sürümlere HTML5 desteği getirmek için HTML5Shiv adında bir javascript kütüphanesi kullanılması gerekmektedir. HTML5 desteğinden kasıt HTML5’e özel tagların kullanılabilir olmasıdır.

HTML5Shiv kütüphanesini aşağıdaki şekilde ekleyebilirsiniz.

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  • Unutmayın tarayıcınız IE 9’dan eski ise bu scripti <head></head> tagları arasına eklemelisiniz.

HTML5’de Block Elemanlar

HTML5 de 8 yeni blok seviyesi semantik eleman vardır. Bu elemanlar display:block özelliğine sahiptir. Yani h1 gibi ayrı bir satır olarak gözükürler. Eski tarayıcılarda doğru şekilde görünmesini sağlamak için aşağıdaki gibi css özelliği ekleyebilirsiniz.

header , footer , section , aside , nav , main , article , figure {
    display: block; 
}

Yeni HTML Elemanı Eklemek

HTML5 ile kendi elemanımızı ekleyerek html tagı olarak kullanabilmekteyiz.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tagı Oluşturma</title>
<script>document.createElement("araba")</script>

<style>
   myHero {
          display: block;
          background-color: #ddf;
          padding: 100px;
          font-size: 50px;
        } 
</style> 
</head>

<body>
<h1>İlk Başlığım</h1>

<p>İlk Paragrafım</p>

<araba>İlk Arabam</araba>

</body>
</html>