сумісність HTML5
HTML5 може і новітня і найкраща технологія, але деякі браузери не мають вбудовану підтримку для нових структурних елементів HTML5.
Проблеми з класами у IE 8 і нижче, Firefox 2 і Camino 1 (останні два браузера використовують движок Gecko рендеринга, тому вони обидва постраждалих).
Якщо вам потрібна підтримка старих браузерів такі як IE6 / 7/8, є виправлення. IE6 аналізує і відображає ці теги просто відмінно, але він не буде розуміти будь-які стилі CSS3 до тегам HTML5. Для вирішення цієї проблеми, необхідно використовувати трохи JavaScript.
Все, що потрібно зробити, щоб IE 6 розумів теги HTML 5 це застосувати метод createElement, і IE 6 стане відомо про нові тегах HTML5. Додати в header вашого HTML5 файлу або ви можете зберегти його в окремий файл і підключити його.
<Script> document.createElement ( 'header'); document.createElement ( 'nav'); document.createElement ( 'main'); document.createElement ( 'section'); document.createElement ( 'article'); document.createElement ( 'aside'); document.createElement ( 'footer'); </ Script>
Тип MIME для цього тега вказувати не потрібно, тому що в HTML5 все сценарії як type = "text / javascript», тому немає необхідності писати зайве (якщо ваш сценарій щось інше, як JavaScript).
Це виправляє проблеми в старих версіях IE з HTML5. Виявляється, що ще є помилка в Gecko, який викликає Firefox 2 і деякі версії Camino .
Приклад виправлення елементів
Наприклад, скажімо, ви хочете стиль елемента <time> курсивом:
<! DOCTYPE html> <html> <head> <title> Елементи HTML5 для IE </ title> <style> time {font-style: italic; } </ Style> </ head> <body> <time datetime = "2009-09-13"> my birthday </ time> </ body> </ html>
Цей знімок показує як буде відображатися текст в старому IE, перед застосуванням виправлення:
Щоб виправити, додайте зазначені рядки коду:
<! DOCTYPE HTML> <html> <head> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8"> <title> Елементи HTML5 </ title> <style> time { font-style: italic; } </ Style> <! - Додайте цей рядок -> <script> document.createElement ( 'time'); </ script> </ head> <body> <time datetime = "2009-09-13"> my birthday </ time> </ body > </ html>
Тепер знімок після того, як ми застосували виправлення для IE:
Для зручності, був написаний один файл JavaScript, який створить всі елементи HTML5 для старих IE.
Підключити скрипт в тег <head>, і ви зможете бачити елементи HTML5 належним чином в старих IE:
<! - [if lte IE 8]> <script src = "http://www.pixelcom.crimea.ua/html5.js" type = "text / javascript"> </ script> <! [Endif] - ->
Цей скрипт для IE8 і нижче.