HTML5 Tarayıcı Desteği!

HTML5 tarayıcı desteği IE9 ve önceki sürümlerinde önceden desteklenmez ancak makaledeki adımları uygulayarak bu desteği eski tarayıcılara verebilirsiniz.

HTML5 Tarayıcı Desteği!
HTML5 Tarayıcı Desteği!

HTML5 Tarayıcı Desteği. Eski tarayıcılara HTML5’i doğru şekilde kullanmayı öğretebilirsiniz.

HTML5 Tarayıcı Desteği

HTML5 tüm modern tarayıcılarda desteklenir.

Ayrıca, eski ve yeni tüm tarayıcılar tanınmayan öğeleri satır içi öğeler olarak otomatik olarak işler.

Bu nedenle, eski tarayıcılara “bilinmeyen” HTML öğelerini kullanmayı “öğretebilirsiniz”.

IE6’ya (Windows XP 2001) bilinmeyen HTML öğelerinin nasıl işleneceğini bile öğretebilirsiniz.

Anlamsal Elemanları Blok Elemanları Olarak Tanımlama

HTML5 sekiz yeni anlamsal öğe tanımlar . Bütün bunlar blok seviyesi unsurlardır.

Eski tarayıcılarda doğru davranışı güvence altına almak için, bu HTML öğelerinin CSS görüntüleme özelliğini block şekilde ayarlayabilirsiniz :

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

HTML’ye Yeni Öğeler Ekleme

Tarayıcı hilesi ile bir HTML sayfasına yeni öğeler de ekleyebilirsiniz.

Bu örnek <myHero>, bir HTML sayfasına çağrılan yeni bir öğe ekler ve bunun için bir stil tanımlar:

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
  display: block;
  background-color: #dddddd;
  padding: 50px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

Çıktısı;

See the Pen html yeni etiket by ArmyYazılım (@armyyazilim) on CodePen.

document.createElement("myHero")IE 9 ve öncesinde yeni bir öğe oluşturmak için JavaScript deyimi gereklidir.

Internet Explorer 8 ile ilgili sorun

Yukarıda açıklanan çözümü tüm yeni HTML5 öğeleri için kullanabilirsiniz.

Ancak, IE8 (ve öncesi) bilinmeyen öğelerin şekillendirilmesine izin vermez!

Neyse ki, Sjoerd Visscher HTML5Shiv’i oluşturdu! HTML5Shiv, Internet Explorer’ın 9 sürümünden önceki sürümlerinde HTML5 öğelerinin stilini etkinleştirmek için kullanılan bir JavaScript geçici çözümdür.

IE 9’dan daha eski IE Tarayıcılar için uyumluluk sağlamak için HTML5Shiv uygulamasına ihtiyacınız olacaktır.

HTML5Shiv için Sözdizimi

HTML5Shiv <head>etiketin içine yerleştirilir .

HTML5Shiv, bir <script>etikette başvurulan bir javascript dosyasıdır .

Aşağıdaki gibi yeni HTML5 öğelerini kullanırken HTML5Shiv kullanmalısınız: <article><section><aside><nav><footer>.

Şunları yapabilirsiniz github gelen HTML5shiv en son sürümünü indirmek veya en CDN sürümüne başvurmak https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

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

HTML5Shiv Örneği

HTML5Shiv’i sitenize indirmek ve depolamak istemiyorsanız, CDN sitesinde bulunan sürüme başvurabilirsiniz.

HTML5Shiv betiği <head>, herhangi bir stil sayfasından sonra öğeye yerleştirilmelidir :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>

<section>

<h1>Famous Cities</h1>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</article>

</section>

</body>
</html>

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …

HTML