PC'lerde kullanmak için bir web uygulaması oluşturuyorum. IE8 ve üstü gibi Tarayıcılarla uyumluluk sorunlarını önlemek için uzak durulması gereken HTML5 etiketleri nelerdir?

Not: Bu konudaki çoğu soru 1-3 yaşındadır.

Hangi HTML5 etiketlerinden uzak durmanız gerektiğini sordunuz.

Bildiğim kadarıyla HTML5'teki bazı etiketler anlamsal nedenlerle yapıldı. örneğin aşağıdaki gibi.

<article> <section> <aside> <nav> <header> <footer> ..ect

Bunlarla çalışmak neredeyse iyidir ve sadece biraz CSS gerektirir, örn. display: block;eski tarayıcılarda olsa da, çoğu tarayıcıda normal çalışmak için. Internet Explorer'ın uyumlu olması için Javascript'te bir öğe oluşturmanız gerekir.

İşte bir örnek.

document.createElement('article');

<article>Öğeyi eski Internet Explorer'da kullanılmak üzere ayarlar .

Çalışmak için Javascript işlevselliğini gerektiren daha gelişmiş HTML5 etiketleri için aşağıdakiler gibi bazıları vardır.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

Bu öğelerin eski tarayıcılarda desteklenmesi / parçalanması daha zordur. Alt kısımda çapraz tarayıcı çoklu dolgular için bir bağlantı ekledim, ancak bunları kişisel olarak araştırmadım.

Bu yüzden, Javascript işlevselliğini gerektirmeyen herhangi bir öğenin, küçük bir çapraz tarayıcı destek koduyla mükemmel bir şekilde kullanılabileceğini söyleyebilirim.

Hedeflemeniz > IE8 ise, sivri uç kullanırsanız sorun yaşamazsınız.

Eski tarayıcılara ne diyorum? <IE9

HTML5 etiketleri için tarayıcı desteği bugün.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Internet Explorer tarafından 8'den az desteklenmez, ancak bu şekilde düzeltilebilir.

CSS:

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

Ve <IE 9'da<audio> <video> <canvas> desteklenmez

<embed>Elemanın kısmi desteği IE8>

Bu etikete de bakmalısınız.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

Bu metaetiket Internet Explorer'a, uyumluluk moduna geçip sayfayı IE7 veya 8'in yapacağı gibi işlemek yerine mevcut en yüksek IE modunda görüntülemesini söyler. Bununla ilgili daha fazla bilgi burada .

HTML5 Yardımcı Bağlantıları

Hızlı Başlangıç ​​için HTML5 BoilerPlate'e göz atabilirsiniz.

Tarayıcı uyumluluğu destek tabloları için bakabilirsiniz - http://caniuse.com/

HTML5 Shiv - https://github.com/afarkas/html5shiv

HTML5 Polyfills Listesi - https: //github.com/Modernizr/Modernizr/wiki / ...

Güncelleme

Bir yorumda belirtildiği gibi

X-UA-Uyumlu meta etiketine dikkat edin. Öğeyi çevreleyen koşullu açıklamalar içeren html5 standart metni gibi bir şey kullanırsanız (bu, html5 doctype IIRC'de de olur), IE9'un kendisini etiketle bile IE7 standartları moduna zorlamasıyla ilgili sorunlarla karşılaşabilirsiniz. IE tekrar saldırıyor

Buna bakmak isteyebilirsiniz, şu anda bunu destekleyecek hiçbir şeyim yok.

Genellikle sorunlar vardır.

Sorunuzun HTML 5 etiketleri hakkında sorulacağı söylendi, ancak bulabileceğiniz veya yazabileceğiniz herhangi bir Javascript ışığında yeni özelliklere bakmak da yararlı olacaktır.

Pratikte önerilen yöntem, belirli bir tarayıcıdan ziyade özelliğin varlığını test etmektir. Modernizr komut bu konuda yardımcı olabilir, ancak aynı zamanda raporlar vardır edebilir HTML5'teki belirlenemeyen özellikleri .

local storageIE8'e geri dönme gibi bazı özellikler .

Diğerleri, FileReaderIE10 / Firefox21 / Chrome27 gerektirir

Güncel bilgiler için http://caniuse.com adresini deneyin.

Normalde yaptığınız gibi HTML 5 yazın ve eski tarayıcılarla uyumluluğu sağlamak için Shims kullanın. Javascript API'lerine gerçekten dikkat etmeniz gerekiyor, çünkü bunlar neredeyse hiç titremiyor. Uyumluluk için temel HTML 4'e bağlı kalmaya çalışıyorsanız, HTML 5 kullanmanın bir anlamı yoktur.

Hangi tarayıcılarda hangi etiketlerin bulunduğunu ve her bir etiket için hangi düzeyde destek bulunduğunu hızlı bir şekilde karşılaştırmak için html5test.com harika bir kaynaktır.

Bir HTML5 uyumluluk matrisi arıyorsunuz

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

Ayrıca, en iyi çapraz tarayıcı uyumluluğu için, Eric Meyer tarafından oluşturulan bu reset.css'yi kullanmanızı öneririm. http://meyerweb.com/eric/tools/css/reset/ Bu, bir tarayıcıdan diğerine farklılık gösteren öğelerin tüm tarayıcılarda aynı şekilde davranmasını sağlar.