HTML5 Tarayıcı Desteği

HTML5'yi eski tarayıcılar için işleyebilirsiniz.

HTML5 Tarayıcı Desteği

Tüm modern tarayıcılar HTML5'yi destekler.

Ayrıca, tüm tarayıcılar, yeni veya eski olsun, tanınmayan elementleri otomatik olarak satır içi elementleri olarak işler.

Bu yüzden, eski tarayıcıların "bilinmeyen" HTML elementlerini işlemesine yardımcı olabilirsiniz.

Açıklama:Daha hatta Taş Çağı IE6'sına nasıl bilinmeyen HTML elementlerini işlediğini öğretebilirsiniz.

HTML5 elementlerini blok element olarak tanımlar

HTML5 sekiz yenianlam HTML elementi. Tümüblokelementi.

CSS'yi display özniteliği blockold tarayıcılarınızda doğru davranış sağlamak için:

Örnek

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

HTML'e yeni bir element eklemek

HTML'ye herhangi bir yeni element eklemek için tarayıcı hilesi kullanabilirsiniz:

Bu örnek, HTML'ye adı <myHero> yeni bir element oluşturur ve ona display stili tanımlar:

Örnek

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

Kişisel olarak deneyin

Eklenen JavaScript ifadeleri document.createElement("myHero"), sadece IE için geçerlidir.

Internet Explorer'in sorunları

Bu çözüm, tüm yeni HTML5 elementleri için kullanılabilir, ancak:

Dikkat:Internet Explorer 8 ve daha eski sürümleri, bilinmeyen elementlere stil eklemeyi izin vermez.

Şanslı ki, Sjoerd Visscher "HTML5 Enabling JavaScript" adlı bir şey yarattı: "the shiv":

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Bu kod bir yorumdur, ancak IE9'nin erken sürümleri onu (ve anlamını) okur.

Tamamlanmış Shiv Çözümü

Örnek

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>İlk Makalem</h1>
<article>
London, İngiltere'nin başkenti. 
Bu, İngiltere'nin nüfusu en fazla şehridir: 
13 milyondan fazla nüfusuyla.
</article>
</body>
</html>

Kişisel olarak deneyin

shiv kodunu içeren bağlantı, <head> öğesinde yer almalıdır çünkü Internet Explorer, tüm yeni öğeleri okumadan önce tanımaları gerekmektedir.

HTML5 SKeleton

Örnek

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 SKeleton</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantik</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Konumlandırma</a></li>
  <li><a href="html5_canvas.asp">HTML5 Grafikleri</a></li>
</ul>
</nav>
<section>
<h1>Ünlü Şehirler</h1>
<article>
<h2>London</h2>
<p>London, İngiltere'nin başkenti. Birleşik Krallık'taki nüfusu en fazla olan şehirdir,</p>
<p>13 milyondan fazla nüfuslu bir metropol alanına sahiptir.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris, Fransa'nın başkenti ve nüfusu en fazla olan şehridir.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi,</p>
ve dünyanın nüfusu en fazla olan metropol alanı.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>

Kişisel olarak deneyin