HTML5 Tarayıcı Desteği

HTML5 tüm modern tarayıcılar tarafından desteklenmektedir.
Yeni ve eski tüm tarayıcılar, tanınmayan etiketleri satır içi etiket olarak işlerler.
Ancak bilinmeyen etiketleri tarayıcıların nasıl işleyeceğini siz belirtebilirsiniz.

Anlamsal Etiketleri Blok Görünümüne Ayarlamak

Yukarıda bilinmeyen etiketlerin satır içi olarak işlendiğini söylemiştim, o zaman HTML5 ile gelen anlamsal etiketleri CSS'de seçerek bunları blok görünümü olarak ayarlayabiliriz. Burada CSS'e henüz başlamadığımızı biliyorum, ancak CSS öğrendiğinizde bu kısım çok daha anlamlı gelecektir. Gelin bu anlamsal etiketleri eski tarayıcılar için blok görünümlü yapalım.

<style>
header, section, footer, aside, nav, main, article, figure {
  display: block; 
}
</style>

Editörde Görüntüle

Şu an bu size bir anlam ifade etmiyorsa korkmayın, CSS derslerinde bunların hepsi anlam ifade edecek ^^

HTML'e Yeni Etiket Tanımlamak

Normalde HTML'in belirlediği etiketler haricinde etiket tanımı yapamıyoruz, yapsak bile tarayıcılar bunu tanıyamıyor. Hata vermemesi ve çalışması, bunun doğru bir kod olduğunu göstermiyor biliyorsunuz :) Bu gibi durumlarda, JavaScript'i kullanarak yeni etiket tanımı yapabilir ve bunu tarayıcıya söyleyebiliriz. Nasıl mı?

<!DOCTYPE html>
<html>
<head>
<script>
    // burada prototurk adında bir etiketimiz olduğunu belirtiyoruz
    document.createElement("prototurk");
</script>
<style>
    prototurk {
      display: block;
      background: #333;
      color: #fff;
      padding: 15px;
      font-size: 18px;
    } 
</style> 
</head>
<body>

    <prototurk>Bu bizim yeni etiketimiz</prototurk>

</body>
</html>

Editörde Görüntüle

document.createElement("prototurk") javascript deyimi, bize IE9 ve öncesi için etiket tanımı yapmamızı sağlıyor.

Bu gördüğünüz kodlar çok çok yabancı geldi ise önemli değil, ileride bunlar anlamlı hale gelecek arkadaşlar. Burada yazılan sadece HTML değil, CSS ve JavaScript. Dolayısı ile bunları bilmediğiniz için karışık gelecektir, şu aşamada bunu kullanmanıza bile ihtiyaç yok, sadece bunun varlığını bilmeniz yeterli. Zamanı geldiğinde zaten bu konuyu hatırlayacaksınız :)

Internet Explorer 8 Problemi

Tüm yeni HTML5 elemanlarını kullanmak için yukarıdaki çözümleri kullanabilirsiniz. IE8 ve önceki sürümlerinde bilinmeyen etiketlere stil uygulanmadığı için tek tek bu şekilde çözüm bulmakta sıkıntı. Çünkü bu lanet tarayıcılar size sadece acı çektirmek için geliştirilmiş :) IE8'e ben artık destek vermiyorum front-end yaparken ancak bazı durumlarda müşterilerin özel istekleri olabiliyor. Siz kullanmıyor olabilirsiniz ancak hala kullanan bir kitlesi var bu IE8 ve öncesini :(

IE8 ve öncesinde yeni HTML etiketlerini kullanmak için HTML5Shiv adında bir Javascript çözümü bulunuyor. Bu javascript dosyasını sayfanıza dahil ettiğinizde, problemler çözülüveriyor :)

Öncelikle dilerseniz github adresinden javascript dosyasını indirip sayfanıza şu şekilde dahil edebilirsiniz;

<head>
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js">
  <![endif]-->
</head>

Editörde Görüntüle

Burada IE9 öncesi sürümlerini etkilemesi için  tanımını yaptık ^^

Eğer indirip kullanmak yerine CDN servisi üzerinden kullanmak isterseniz, şu şekilde kullanabilirsiniz;

<head>
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js">
  <![endif]-->
</head>

Editörde Görüntüle

Tek yapmanız gereken bu, artık IE8 ve öncesi için HTML5 etiketlerini kullanabilirsiniz. Tabi her şey o kadar kolay değil :) IE8 ve öncesi için çoook uğraşmanız gerekecek, size kolay gelsin ne diyeyim ^^ Elbette zaman zaman bende yardımcı olacağım bu konularda merak etmeyin.