Ответ 1
Этот (поистине) невероятный бит Javascript должен удовлетворять 100% ваших потребностей в совместимости с HTML5:
Мне было интересно, есть ли способ сделать код html5 видимым в Internet Explorer 7 или меньше.
Например
<div id="container">
<header id="header">
something
</header>
</div>
В Internet Explorer 7 заголовок вообще не отображается.
Я нашел обходное решение здесь, IE HTML5, включающий script, который создает элементы html5 с javascript. Но происходит то, что тег <header>
выглядит совсем не так, как в других браузерах.
Итак, мой вопрос: еще слишком рано использовать HTML5 или как я могу сделать его кросс-браузерным?
Этот (поистине) невероятный бит Javascript должен удовлетворять 100% ваших потребностей в совместимости с HTML5:
Перед использованием HTML5 нужно рассмотреть две важные вещи:
- Целевая аудитория (с выбором браузера)
- HTML5 Полезные функции на вашем сайте.
Если вы уверены, что многие ваши пользователи находятся на IE8 и ниже, вы должны избегать использования HTML5 почти полностью.
Итак, когда вы говорите "еще слишком рано использовать HTML5", ответ зависит от вашей пользовательской базы. IE имеет хорошую поддержку HTML5 только с версии 9 и выше..
Нет способа, с помощью которого вы можете сделать расширенные функции HTML5 для работы с IE7/8... Html5.js, о котором вы говорили, просто заставляет ваш CSS "игнорировать" любые элементы HTML5 и применять стиль. не делайте ничего дальше этого.
Для всех основных поддержки и оценки браузера вы можете проверить html5test.com
Кроме того, вы также можете ознакомиться с очень красивым объяснением учебника по HTML5, называемого DesignMobileWeb, доступного на http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
Пожалуйста, помните, что если у вас будет основной сайт, следует избегать использования HTML5. Вы должны рассматривать HTML5 только в том случае, если вы планируете использовать локальное хранилище, автономный доступ и формы HTML5 для мобильных устройств и т.д.
IE < 9 не распознает элементы HTML5 и не будет генерировать их. Поэтому я использую этот бит JS для генерации:
var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');
for (var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
Я использую этот условный комментарий, чтобы проверить, нужно ли мне запускать script
<!--[if lt IE 9]>
<script src="js/html5_createElement_for_IE.js"></script>
<![endif]-->
Конечно, вам нужно будет пометить теги для IE < 9, но вам все равно нужно.
Начните с этого: http://html5boilerplate.com/. Он должен решить большинство ваших проблем. Он отлично работает.
IE версии < 9 не будет отображать элементы, которые они не распознают, поэтому новые элементы HTML5, заголовок и т.д. Не включены в список. Другие браузеры отображают непризнанные элементы, но без стилей.
Способ вокруг этого - "показать" новые элементы в IE, введя их непосредственно в DOM с помощью JavaScript. Вам нужно сделать это только один раз на каждом просмотре страницы.
Два стандартных способа сделать это:
Modernizr также выполняет целую кучу других вещей, связанных с обнаружением функций.
Попробуйте использовать хромовую рамку - http://code.google.com/chrome/chromeframe/
Сам по себе, хотя вы не можете использовать большинство интересных новых функций HTML5 с IE7. Он просто не реализован в браузере простой и простой.
Я проверяю, поддерживает ли запрашивающий клиент тип mime application/xhtml + xml (он является частью заголовка accepts, отправленного запросом).
Если это не так, я отправляю клиенту версию страницы, используя узлы div вместо большинства семантических узлов html5.
Это очень старый... Черт... Но я думаю, это может помочь кому-то, хотя
Я использовал эту мета
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
И исправлено все без использования каких-либо скриптов...
Нашел его здесь: http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/