В конце концов, спецификация HTML5 является только что определенной спецификацией, и некоторые браузеры не могут поддерживать новые этикетки и новые атрибуты, особенно версии IE8 и ниже браузера. Вот некоторые практические методы, которые используют новые теги HTML5 на странице.
Brower IE8 не добавил новую поддержку тегов HTML5, поэтому он не может напрямую отображать контент в новом теге HTML5 в IE8. К счастью, IE8/IE7/IE6 поддерживает этикетку, сгенерированную документом. Метод CreateElement.
var e = abbr, article, в сторону, аудио, холст, даталист, детали, диалог, Eventorce, рисунок, нижний колонтитул, hgroup, mark, счетчик, счетчик, вывод, прогесс, раздел, время, видео. split (','); Var i = e.length;После того, как браузер поддерживает новую метку, вам нужно добавить стиль по умолчанию этикетки:
Статья, в стороне, фиг.
Таким образом, два простых кода JavaScript и CSS -код могут сделать версию IE8 и ниже, чтобы поддержать новые теги в HTML5. Конечно, лучший способ - напрямую использовать зрелые рамки.
<!-[если LT IE 9]> <Script> src = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <! [Endif]->
HTML5 в широком смысле включает в себя HTML5, CSS3 и новые API. Поскольку новые функции более или менее совместимы с браузерами, необходимо определить, поддерживает ли браузер эту функцию при использовании новых функций. Когда браузер не поддерживает новые функции, он может быть соответствующим образом совместимы. В настоящее время не существует единого метода для обнаружения поддержки новых функций. К счастью, есть энтузиазм за границей, разработали ряд новых функций обнаружения.
Принцип структуры ModelNizr состоит в том, чтобы автоматически обнаружить, поддерживает ли браузер новые функции и добавить соответствующий класс в тег <html>. Если браузер поддерживает определенную функцию, будет добавлен класс, названный в честь характерного названия. В то же время он также будет генерировать объект, называемый Modernizr. Структура Modernizr также содержит функцию Framework HTML5Shim, которая может позволить браузерам IE8 и ниже поддерживать новые теги.
Метод использования Modernizr очень прост.
<script src = js/modelnizr.min.js> </script>
Во-вторых, добавьте класс с именем NO-JS на метке HTML:
<html class = no-js>
Если браузер не отключает JavaScript, после того, как браузер загружает страницу, класс на теге HTML динамически заменят и добавит. После загрузки тег HTML похож на следующее:
<html class = js canvas canvasttext geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimamns no-cssgra dients no-cssreflace
В коде CSS вы можете использовать эти классы, чтобы добавить обратную совместимость.
#Nice {fourene: url (founal-one.png) верхний левый повторный-x;}.}.Читатели, которые заинтересованы в этой структуре, могут просмотреть официальный сайт Modernizr, чтобы получить все более подробные примеры и методы использования.
Аудио и видео обычно используются на странице, но браузеры более запутанны, так что вот отдельная тема. Аудио и видео являются характеристиками нативной поддержки браузера ранее, так что воспроизведение звука и видео больше не ограничивается третьими сторонними плагинами, особенно на мобильных платформах. Аудио и видео - большой торт, и все производители браузеров хотят различить самый большой, что также заставляет браузер различать формат аудио и видео форматов. Список вспомогательных аудио форматов для браузера заключается в следующем:
Браузер | Версия | Формат поддержки |
Internet Explorer | 9,0+ | Mp3, AAC |
Хром | 6,0+ | OGG Vorbis, MP3, WAV (9,0+) |
Firefox | 3.6+ | OGG Vorbis, Wav |
Сафари | 5,0+ | Mp3, AAC, Wav |
Опера | 10,0+ | OGG Vorbis, Wav |
Около 80%браузера поддерживает тег <udio> html5, но нет единого аудиоформата. С точки зрения формата поддержки, все браузеры могут воспроизводить аудио на аудиоэлемент.
<Audio Controls> <Source src = elvis.mp3 type = 'audio/mpeg; Информация, предоставить ссылки на скачивание, использовать флэш-плеера и т. Д.-> Браузер не поддерживает <udio </code> теги </audio>
Видео также похоже на аудио.
Браузер | Версия | Формат поддержки |
Internet Explorer | 9,0+ | MP4 |
Хром | 6,0+ | MP4, Webm, OGG |
Firefox | 3.6+ | Webm, Ogg |
Сафари | 5,0+ | MP4 |
Опера | 10,0+ | Webm, Ogg |
Судя по видеоформату, поддерживаемому браузером, лучший способ - предоставить два формата в форматах WebM и MP4. Совместимый код выглядит следующим образом:
<Видео Элементы управления> <source src = video.webm type = video/webm> <source src = video.mp4 type = video/mp4> <! ?
Приведенное выше вариант совместимости браузера нового лейбла HTML5, представленной Xiaobian. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!