Я будую веб-додаток для використання на ПК. Які теги HTML5 слід уникати, щоб запобігти проблемам сумісності з такими браузерами, як IE8 і вище?

Примітка: Більшість запитань на цю тему мають 1-3 роки.

Ви запитували, від яких тегів HTML5 слід триматися подалі.

Ну деякі теги з HTML5 з моїх знань були зроблені з смислових причин. наприклад, наступне, наприклад.

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

З ними майже чудово працювати, і просто потрібно трохи CSS, наприклад. display: block;нормально працювати в більшості браузерів, хоча в старих браузерах, тобто. Internet Explorer від вас потрібно створити елемент у Javascript, щоб він був сумісним.

Ось приклад.

document.createElement('article');

Установив би <article>елемент для використання в старшому Internet Explorer.

Більш просунуті теги HTML5, для роботи яких потрібна функціональність Javascript, є такі, як описано нижче.

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

У старих браузерах ці елементи важче підтримувати / шив. Хоча я включив посилання на перехрещення поліфілів браузера внизу, хоча особисто не досліджував їх.

Тому я б сказав, що будь-який елемент, який не потребує функціональності Javascript, прекрасно використовувати з крихітним шматочком коду підтримки браузера.

Якщо ваше націлювання > IE8, тоді вам слід добре, якщо ви використовуєте шив.

Що я називаю старшими браузерами? <IE9

Сьогодні підтримка браузера для тегів HTML5.

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

Не підтримується Internet Explorer менше 8, але їх можна виправити так.

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]);
}

І <audio> <video> <canvas>не підтримуються в <IE 9

<embed>Елемент має часткову підтримку в > IE8

Ви також повинні вивчити цей тег.

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

Цей metaтег повідомляє Internet Explorer відображати сторінку в найвищому доступному режимі IE, замість того, щоб переходити в режим сумісності та відображати сторінку так, як це робиться IE7 або 8. Більше інформації про це Тут .

Посилання для помічників HTML5

Для початку старту ви можете перевірити HTML5 BoilerPlate

Для таблиць підтримки сумісності браузера ви можете ознайомитися - http://caniuse.com/

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

Список поліфілів HTML5 - https: //github.com/Modernizr/Modernizr/wiki / ...

Оновлення

Як згадується в коментарі

Будьте обережні з мета-тегом X-UA-Compatible. Якщо ви використовуєте щось на кшталт котло html5, яке має умовні коментарі щодо елемента (це також трапляється з doctype html5 IIRC), ви можете зіткнутися з проблемами з IE9, змусивши себе перейти в режим стандартів IE7 навіть з тегом. IE знову вражає

Ви можете розглянути це, у мене немає нічого, що могло б це підкріпити.

Взагалі проблеми є.

Мені сказали, що ваше питання сформульовано для запитання про теги HTML 5 але також корисно дивитись на нові функції у світлі будь-якого Javascript, який ви можете знайти або написати.

На практиці рекомендованим методом є перевірка на наявність функції, а не конкретного браузера. Modernizr сценарій може бути корисним в цьому відношенні, але є також повідомлення про невизначених функцій в HTML5 .

Деякі функції, як local storage повернутися до IE8.

Інші, як FileReader , вимагають IE10 / Firefox21 / Chrome27

Для поточної інформації спробуйте http://caniuse.com

Напишіть HTML 5 так, як зазвичай, і використовуйте Shims, щоб забезпечити сумісність зі старими браузерами. Вам потрібно бути обережним лише з API Javascript, адже вони навряд чи здатні прошивати. Якщо ви намагаєтеся дотримуватися базового HTML 4 для сумісності, використовувати HTML 5 немає сенсу.

Для швидкого порівняння того, які теги доступні в браузерах, і який рівень підтримки кожного тегу, html5test.com - чудовий ресурс.

Ви шукаєте матрицю сумісності HTML5

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

Крім того, для кращої сумісності браузера я пропоную використовувати цей reset.css, створений Еріком Мейєром. http://meyerweb.com/eric/tools/css/reset/ Це робить елементи, які відрізняються від браузера до іншого, поводитись однаково у всіх браузерах.