HTML 5 (часть 2). Новые теги и поддержка браузерами
Новые теги в HTML5
Перед изучением новых тегов необходимо ознакомится с инструментами поддержки тегов браузерами. Для проверки тега, можно использовать htmlbook с иллюстрациями:
Поддержка тега center в спецификациях HTMLВидно, что тег <center> в спецификации 5.0 не поддерживается (розовый цвет), а в спецификации 4.01 поддерживался частично (желтый цвет). Кстати, для выравнивания блоков и картинок теперь нужно применять СSS.
Также, рекомендуем ресурс caniuse.com
Рекомендация не использовать тег center в коде html5Как видно, данный тег не рекомендован к применению. Если тег можно применять, то caniuse покажет развернутую карту поддержки тега браузерами. Так для тега audio, мы увидим:
Поддержка тега audio браузерамиТаким образом, используя данные ресурсы можно ориентироваться в правильности применения тегов и их поддержке со стороны браузеров.
Рассмотрим новые введенные элементы.
Тег audio
Тег <audio> используется для внедрения в страницу проигрывателя. Для указания источника используется тег <source>. Можно указать несколько источников композиций, т.е. даже если у пользователя нет определенных кодеков, то велика вероятность проигрывания файла.
Если тег не поддерживается, то будет выведено сообщения внутри тега с предложением скачать файл напрямую.
<audio controls autoplay="autoplay" > <source src="audio/music.mp3" type="audio/mpeg"> <source src="audio/music.mp3" type="audio/mpeg"> Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>. </audio>
<audio controls autoplay="autoplay" > <source src="audio/music.mp3" type="audio/mpeg"> <source src="audio/music.mp3" type="audio/mpeg"> Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>. </audio> |
Атрибуты описанные в примере:
- controls – выводят проигрыватель. Если их не указать, то получим играющую музыку без возможности выключения
- autoplay – автоматическое проигрывание после загрузки, не стоит использовать данный атрибут без крайней необходимости
- loop – зациклить проигрывание
Обратите внимание, что внешний вид проигрывателя в разных браузерах разный.
Тег video
Позволяет внедрить на страницу видеопроигрыватель без использования сторонних сервисов. Также, как и тег <audio> применяется с тегом source, если необходимо указать несколько источников видео.
<video controls="controls"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. Скачайте видео. </video>
<video controls="controls"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. Скачайте видео. </video> |
Атрибуты аналогичны тегу <audio>.
Данный тег используется для создания блоков с видео в виде фона.
Тег canvas
Используется для рисования в HTML5. Применение canvas позволило отказаться от технологии Flash. Рисование производится с помощью JavaScript. Использования тега <canvas> вы изучите на уроках JS.
<canvas> <p>Ваш браузер не поддерживает рисование.</p> </canvas>
<canvas> <p>Ваш браузер не поддерживает рисование.</p> </canvas> |
Тег datalist
Используется для создания «умных» выпадающих списков. Дублирует функционал выпадающего списка, но добавляет к нему возможность поиска пунктов по буквам входящим в слова и введения своего варианта. Идеален для применения к спискам, пункты которых известны заранее.
К сожалению, поддержка браузерами очень ограничена. Более того, на сегодняшний момент браузеры демонстрируют абсолютно разную работу с данным элементом. Пока стоит воздержаться от применения.
Пример:
<datalist> <option value="Чебурашка"></option> <option value="Крокодил Гена"></option> <option value="Шапокляк"></option> </datalist>
<datalist> <option value="Чебурашка"></option> <option value="Крокодил Гена"></option> <option value="Шапокляк"></option> </datalist> |
Тег details
Позволяет создавать раскрывающийся при клике блок. Используется совместно с тегом <summary>, который задает раскрывающийся элемент.
<details> <summary>Информация об авторе</summary> <p>Бендер Родригез</p> </details>
<details> <summary>Информация об авторе</summary> <p>Бендер Родригез</p> </details> |
Поддержка данного тега – частичная, как следствие, на данном этапе лучше применять решения на основе JS или jQuery.
Тег meter
Используется для визуализации диапазонов величин. Пример применения:
<meter value="5" max="100" low="10" high="60">Низкая</meter> <meter value="9" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="20">Горячая</meter <meter value="100" max="100" >Кипяток</meter>
<meter value="5" max="100" low="10" high="60">Низкая</meter> <meter value="9" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="20">Горячая</meter <meter value="100" max="100" >Кипяток</meter> |
Позволяет задавать минимально, максимальное значение диапазона, значения которые считаются низкими и высокими, текущее значение (value). Возможно управление с помощь JS. Хороший инструмент для простой визуализации.
Тег используется для обозначения главной навигации по сайту. Содержит внутри себя список (хотя могут быть и другие элементы). Пример:
<nav> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </nav>
<nav> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </nav> |
Использовать тег <nav> нужно обязательно.
Тег output
Создан в противовес тегу input, используется для обозначения области на html странице, куда будет выводится информация.
Следует отметить, что с помощью JS можно вывести информацию в любой элемент. Однако введение тега <output> это следствие новой функции HTML5 – функции представления информации.
<output name="result">0</output>
<output name="result">0</output> |
Тег progress
Тег служит для отображения прогресса какого-либо события, представляет из себя прямоугольник, заполнением которого можно управлять с помощью JS. Обратите внимание, что внешний вид элемента отличается в разных браузерах, однако большинство браузеров поддерживают данный тег. Если тег не поддерживаться, то будет выведена надпись между тегами.
<progress max="100" value="50"> Загружено на <span>25</span>% </progress>
<progress max="100" value="50"> Загружено на <span>25</span>% </progress> |
Тег wbr
По умолчанию браузеры не разбивают слова на части, поэтому если в тексте встречается очень длинное слово, то браузер, даже при уменьшении контейнера, покажет полосы горизонтальной прокрутки. В контексте адаптивного дизайна данное поведение может нарушать верстку. Для указания браузеру правил переноса (разбития) слова на части используется тег wbr.
Пример использования:
<p> метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>аминоакридин </p>
<p> метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>аминоакридин </p> |
На этом, рассмотрение наиболее часто употребляемых тегов введенных в HTML5 мы завершим, и рассмотрим семантические теги и понятие семантической верстки.
Поддержка браузера HTML уроки для начинающих академия
Вы можете научить старых браузеров правильно обрабатывать HTML5.
Поддержка браузера HTML5
HTML5 поддерживается во всех современных браузерах.
Кроме того, все браузеры, старые и новые, автоматически обрабатывают нераспознанные элементы как встроенные элементы.
Из-за этого, вы можете "научить" старых браузеров для обработки "неизвестных" HTML элементов.
Вы даже можете научить IE6 (Windows XP 2001), как обрабатывать неизвестные элементы HTML.
Определение семантических элементов в качестве элементов блока
HTML5 определяет восемь новых семантических элементов. Все эти элементы являются элементами уровня блока .
Чтобы обеспечить правильное поведение в старых браузерах, можно задать для этих HTML-элементов свойство Display CSS для Block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Добавление новых элементов в HTML
Вы также можете добавить новые элементы на страницу HTML с помощью браузера трюк.
В этом примере добавляется новый элемент с именем <myHero>
на HTML-страницу и определяется его стиль:
Пример
document.createElement("myHero")
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
<h2>A Heading</h2>
<myHero>My Hero Element</myHero>
</body>
</html>
Инструкция JavaScript document.createElement("myHero")
необходима для создания нового элемента в IE 9 и более ранних версиях.
Проблема с Internet Explorer 8
Для всех новых элементов HTML5 можно использовать описанное выше решение.
Однако IE8 (и более ранние версии) не допускает стилизации неизвестных элементов!
К счастью, сьюрд Вишер создал HTML5Shiv! HTML5Shiv — это обходной путь JavaScript, позволяющий использовать стили HTML5-элементов в версиях Internet Explorer до версии 9.
Вам потребуется HTML5Shiv для обеспечения совместимости для IE браузеров старше IE 9.
Синтаксис для HTML5Shiv
HTML5Shiv помещается в тег <head>
.
HTML5Shiv — это файл JavaScript, на который ссылается тег <script>
.
Следует использовать HTML5Shiv при использовании новых элементов HTML5, таких как: <article>
, <section>
, <aside>
, <nav>
, <footer>
.
Вы можете загрузить последнюю версию HTML5Shiv с GitHub или ссылку на версию CDN по адресу HT
Поддержка браузеров HTML5
Вы можете научить старые браузеры корректно обрабатывать HTML5.
Поддержка браузеров HTML5
HTML5 поддерживается во всех современных браузерах.
Кроме того, все браузеры, старые и новые, автоматически обрабатывать неопознанные элементы как встроенные элементы.
Из - за этого, вы можете "teach" старые браузеры для обработки "unknown" HTML элементов.
Вы даже можете научить IE6 (Windows XP 2001) , (Windows XP 2001) , как обрабатывать неизвестные HTML элементы.
Определить HTML5 элементы, как элементы блока
HTML5 определяет восемь новых семантических HTML элементов. Все эти элементы уровня блока.
Для обеспечения правильного поведения в старых браузерах, вы можете установить свойство отображения CSS , чтобы блокировать:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Добавление новых элементов в HTML
Вы можете также добавить любой новый элемент в HTML с помощью браузера трюка.
В этом примере добавляется новый элемент с именем <myHero> в HTML, и определяет стиль отображения для него:
пример
Creating an HTML Element
document.createElement("myHero")
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
<h2>My First Heading</h2>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>
Оператор JavaScript document. createElement("myHero") document. createElement("myHero") добавляется, только для удовлетворения IE.
Проблема с Internet Explorer
Вы можете использовать решение, описанное выше, для всех новых элементов HTML5, но:
Internet Explorer 8 и выше, не позволяет моделирование неизвестных элементов.
К счастью, Сджоэрд Вишшер создал "HTML5 Enabling JavaScript" , « the shiv »:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Код выше , является комментарием, но версия предыдущей в IE9 будет читать (and understand it) .
Полное Shiv решение
пример
<!DOCTYPE html>
<html>
<head>
<title>Styling HTML5</ti
Сравнение Браузеров css3 & html5 / Habr
Стало интересно, кто же сейчас лидирует на рынке. Самый простой способ взять и сравнить, что же еще сделать.
Просмотрел ряд статей на счет hml5:
Проверка технологий HTML5
Как протестировать веб-браузер на совместимость с HTML5?
Тест и сравнение пяти веб-браузеров в Windows 7 и OS X Mountain Lion
Тест и сравнение веб-браузеров: Chrome 20, Opera 12, Firefox 13
Тест и сравнение веб-браузеров | Пять лучших
Сравнение не всегда может быть адекватным в связи и использованием различных сервисов и тестов. Для теста использовались следующие сервисы:
Css:
Maze Solver
css3test.com
CSS3 Selectors Test
Acid3
Html5
html5test
Test2
peacekeeper
Итак погнали.
FF 18.0.2
Maze Solver — CSS3 Layout Performance Test
Css3test.com
CSS3 Selectors Test
From the 41 selectors 41 have passed, 0 are buggy and 0 are unsupported (Passed 574 out of 574 tests)
Acid3
html5test
Test2
Peacekeeper
Итоговая таблица по результатам FF
Css3 | |
---|---|
ie.microsoft.com | 136 seconds |
css3test.com | 56% (500/ 937) |
tools.css3.info | 41/41 574/574 |
acid3 | 100/100 |
Html5 | |
html5test | 393/500 (+10) |
wapsbttest2 | 129/160 |
peacekeeper1 | 798 (5/7) |
peacekeeper2 | 1514 (5/7) |
Opera 12.14
Чтобы не засорять пост массой картинок, выложу только итоговую таблицу.
Css3 | |
---|---|
ie.microsoft.com | 16 seconds |
css3test.com | 58% (451/937) |
tools.css3.info | 41/41 574/574 |
acid3 | 100/100 |
Html5 | |
html5test | 404/500 (+9) |
wapsbttest2 | 146/160 |
peacekeeper1 | 2441 (2/7) |
peacekeeper2 | 2522 (4/7) |
Chrome 24.0.1312.57
Css3 | |
---|---|
ie.microsoft.com | 6.9 seconds |
css3test.com | 63% (562/937) |
tools.css3.info | 41/41 574/574 |
acid3 | 100/100 |
Html5 | |
html5test | 448/500 (+13) |
wapsbttest2 | 148/160 |
peacekeeper1 | 1734 (6/7) |
peacekeeper2 | 3127 (6/7) |
IE 9.0.8112.16421 64-bit
Css3 | |
---|---|
ie.microsoft.com | 22 seconds |
css3test.com | 33% (274/937) |
tools.css3.info | 41/41 574/574 |
acid3 | 100/100 |
Html5 | |
html5test | 138/500 (+5) |
wapsbttest2 | 91/160 |
peacekeeper1 | 998 (3/7) |
peacekeeper2 | 1001 (3/7) |
IE 10.0.9200.16438 64-bit
Css3 | |
---|---|
ie.microsoft.com | 24 seconds |
css3test.com | 54% (444/937) |
tools.css3.info | 41/41 574/574 |
acid3 | 100/100 |
Html5 | |
html5test | 320/500 (+6) |
wapsbttest2 | 127/160 |
peacekeeper1 | 1882 (3/7) |
peacekeeper2 | 1882 (3/7) |
Safary Версия 6.0.2 (8536.26.17), max osx 10.8
Спасибо btd за результаты Safari
Css3 | |
---|---|
ie.microsoft.com | 6.9 seconds |
css3test.com | 55% (500/937) |
tools.css3.info | 41/41 574/574 |
acid3 | 100/100 |
Html5 | |
html5test | 378/500 (+8) |
wapsbttest2 | 139/160 |
peacekeeper1 | 3117 (3/6) |
peacekeeper2 | 3117 (3/6) |
Выводы и итого по всем
Удивил тест на peacekeepers, ребята постарались. Интересный факт, что 1-й запуск тест сильно отличается от 2-ого, может быть кэш так влияет, но вопрос очень спорный.
Так же очень странно было видеть алгоритм поиска выхода из лабиринта у FF, Opera, Chrome один и тот же алгоритм выхода был, но IE не ищет легких путей и пошел не так как все (хотя запускал тест раза 3-4 один и тот же лабиринт). Итоговая таблица лучший пожалуй хром, а дальше черт ногу сломит, в общем, смотрите сами:
Browser | FF | Opera | Chrome | IE | IE10 | Safari |
Css3 | ||||||
---|---|---|---|---|---|---|
ie.microsoft.com | 136 seconds | 16 seconds | 6.9 seconds | 22 seconds | 24 seconds | 6.9 seconds |
css3test.com | 56% (500/937) | 58% (451/937) | 63% (562/937) | 33% (274/937) | 54% (444/937) | 55% (500/937) |
tools.css3.info | 41/41 574/574 | 41/41 574/574 | 41/41 574/574 | 41/41 574/574 | 41/41 574/574 | 41/41 574/574 |
acid3 | 100/100 | 100/100 | 100/100 | 100/100 | 100/100 | 100/100 |
Html5 | ||||||
html5test | 393/500 (+10) | 404/500 (+9) | 448/500 (+13) | 138/500 (+5) | 320/500 (+6) | 378/500 (+8) |
wapsbttest2 | 129/160 | 146/160 | 148/160 | 91/160 | 127/160 | 139/160 |
peacekeeper1 | 798 (3/7) | 2441 (2/7) | 1734 (6/7) | 998 (3/7) | 1820 (3/7) | 3117 (3/7) |
peacekeeper | 1514 (5/7) | 2522 (4/7) | 3127 (6/7) | 1001 (3/7) | 1882 (3/7) | 3117 (3/7) |
P.S. Никто не безупречен, орфография и ошибки прошу милости в личку.
P.P.S. Если у кого есть желание протестите Safari.
P.P.P.S. Добавил IE10 удивил отчасти, но лишь отчасти…
Спасибо btd за результаты Safari
P.P.P.P.S прислал друг результаты IE10 под win8
Css3 | |
---|---|
ie.microsoft.com | 16 seconds |
css3test.com | 54% (444/937) |
tools.css3.info | 41/41 574/574 |
acid3 | 100/100 |
Html5 | |
html5test | 320/500 (+6) |
wapsbttest2 | 127/160 |
peacekeeper1 | 3476 (2/7)) |
Сравнение браузеров (HTML5) - это... Что такое Сравнение браузеров (HTML5)?
![]() |
Информация в этой статье или некоторых её разделах устарела. Вы можете помочь проекту, обновив её и убрав после этого данный шаблон. |
Данные таблицы сравнивают поддержку HTML5 и CSS3 в наиболее распространенных браузерах.
Обозначения
Обозначение показывают версию браузера, в которой появилась поддержка определенных технологий
Параметр | Значение |
---|---|
Да | Браузер полностью поддерживает данное свойство/элемент |
Нет | Данное свойство или элемент не поддерживается |
Частично | Присутствует неполная реализация данного свойства/элемента |
Экспериментальная поддержка | Присутствует экспериментальная поддержка |
Тестовая сборка | Присутствует поддержка в тестовых сборках браузера. |
HTML 5
Новые теги
Internet Explorer | Firefox | Chrome | Safari | Opera | |
---|---|---|---|---|---|
Embedded content elements | |||||
embed | 3.0 | 1.0 | 1.0 | 1.0 | 7.0 |
video | 9.0 | 3.5 | 3.0 | Да | 10.5 |
audio | |||||
source | |||||
canvas | 9.0 | 1.5 | 2.0[1] | Да | 9.0 |
SVG in text/html | 9.0 | 4.0 | Да | Нет | 11.65 |
MathML in text/html | Нет | 4.0 | Да | ||
Section elements | |||||
section | 9.0 | 4.0 | 5.0 | 5.0 | Да |
nav | |||||
article | |||||
aside | |||||
hgroup | |||||
header | |||||
footer | |||||
Grouping content elements | |||||
figure | 9.0 | 4.0 | Да | Нет | Да |
figcaption | |||||
Text-level semantic elements | |||||
mark | 9.0 | 4.0 | Да | Нет | 11.10 |
ruby | 3.0 | Нет | 4.0 | Нет | |
time | Нет | Нет | Нет | 11.50 | |
wbr | Да | Да | Да | Да | Да |
Interactive elements | |||||
details | Нет | Нет | Да | Нет | Нет |
summary | Да | Да | Да | Да | Да |
command | Нет | Нет | Нет | Нет | Нет |
menu | Да | Да | Да | Да | Да |
Internet Explorer | Firefox | Chrome | Safari | Opera |
Элементы и атрибуты форм
Internet Explorer | Firefox | Chrome | Safari | Opera | |
---|---|---|---|---|---|
Input types | |||||
search | Нет | 4.0 | 1.0 | Да | 11.0 |
tel | Нет | 4.0 | 3.0 | Да | 11.0 |
url | Нет | 4.0 | 3.0 | Да | 9.0 |
Нет | 4.0 | 3.0 | Да | 9.0 | |
datetime | Нет | Нет | Да | Да | 9.0 |
date | |||||
month | |||||
week | |||||
time | |||||
datetime-local | |||||
number | Нет | Нет | 3.0 | Да | 9.0 |
range | Нет | Нет | 1.0 | Да | 9.0 |
color | Нет | Нет | 4.0 | Да | 11.0 |
Атрибуты | |||||
autocomplete | Да | Да | Да | Да | 9.0 |
autofocus | Нет | 4.0 | 2.0 | Да | 9.0 |
placeholder | Нет | 4.0 | 3.0 | Да | 11.0 |
multiple | Нет | 3.6 | 2.0 | Да | 11.0 |
pattern | Нет | 4.0 | 4.0 | Да | 9.0 |
required | Нет | 4.0 | 3.0 | Да | 9.0 |
control | Нет | 4.0 | Да | Нет | 9.0 |
form | Нет | 4.0 | Да | Нет | 9.0 |
formaction | Нет | 4.0 | Да | Нет | 10.5 |
formenctype | Нет | 4.0 | Да | Нет | 10.5 |
formmethod | Нет | 4.0 | Да | Нет | 10.5 |
formnovalidate | Нет | 4.0 | Да | Нет | 10.5 |
formtarget | Нет | 4.0 | Да | Нет | 10.5 |
labels | Нет | Нет | Нет | Нет | 9.0 |
Элементы | |||||
datalist | Нет | 4.0 | Нет | Нет | 9.0 |
keygen | 1.0 | 1.0 | Нет | 11.10 | |
output | 4.0 | Нет | Нет | 9.0 | |
progress | Нет | Да | Нет | 11.0 | |
meter | Нет | Да | Нет | 11.0 | |
Internet Explorer | Firefox | Chrome | Safari | Opera |
Форматы видео / аудио
Связанные спецификации
Internet Explorer | Firefox | Chrome | Safari | Opera | |
---|---|---|---|---|---|
Web Storage | 8.0 | 3.5 | Да | Да | 10.5 |
Indexed DB | HTML5 Labs[3] | 4.0 | 11.0 | Частично | Нет |
File API | HTML5 Labs[4] | 3.5 | 7.0 | Да | 11.1 |
File API: Writer | Нет | Нет | Частично | Частично | Нет |
Media Capture API | Нет | 4.0 | Нет | Нет | 12.0 |
Server-Sent Events | Нет | Нет | Да | Да | 11.0 |
WebSocket | HTML5 Labs[5] | 4.0 | 6.0[6] | 5.0 | 11.0 |
Web Workers | Нет | 3.5 | 2.0 | Да | 10.6 |
Geolocation API | 9.0 | 3.5 | 5.0 | Да | 10.6 |
Offline Web applications | Нет | 3.5 | 5.0 | Да | 10.6 |
WebGL | Нет | 4.0 | 9.0 | Нет | 12.0 не во всех ОС |
Каскадные таблицы стилей (CSS3)
Chrome | Firefox[7] | Opera | Internet Explorer | ||||||
---|---|---|---|---|---|---|---|---|---|
Box Model[spec 1] | |||||||||
overflow-x | 1.0 | 1.5 | 9.5 | Частично | |||||
overflow-y | |||||||||
Backgrounds and Borders [spec 2] | |||||||||
multiple background | 1.0 | 3.6 | 10.5 | 9.0 | |||||
background-clip | 1.0 | 1.0 | |||||||
background-origin | |||||||||
background-size | 3.6 | ||||||||
border-radius | 1.0 | 1.0[8] | |||||||
border-image | 1.0 | 3.5 | Нет | ||||||
box-decoration-break | Нет | Нет | 10.6 | ||||||
box-shadow | 1.0 | 3.5 | 10.5 | ||||||
Colors [spec 3] | |||||||||
opacity | 1.0 | 1.0 | 9.0 | 9.0 | |||||
Fonts[spec 4] | |||||||||
font-size-adjust | Нет | 1.0[9] | Да | Нет | |||||
font-stretch | Нет | Нет | |||||||
Text[spec 5] | |||||||||
text-shadow | Да | 3.5 | 9.5 | Нет | |||||
word-break | Нет | Нет | Нет | Частично | |||||
text-wrap | Нет | ||||||||
word-wrap | 1.0 | 3.5 | 10.5 | 5.0 | |||||
text-align-last | Нет | Нет | Нет | Частично | |||||
text-justify | 5.5 | ||||||||
punctuation-trim | Нет | ||||||||
text-emphasis | |||||||||
text-outline | |||||||||
hanging-punctuation | |||||||||
text-overflow (dropped) | Частично | Частично | Частично | ||||||
User interface[spec 6] | |||||||||
Paged media[spec 7] | |||||||||
Speech[spec 8] | |||||||||
Media Queries[spec 9] | |||||||||
width | 1.0 | 3.5 | 9.0 | 9.0 | |||||
height | |||||||||
device-width | |||||||||
device-height | |||||||||
device-aspect-ratio | |||||||||
color | 10.5 | ||||||||
color-index | |||||||||
monochrome | |||||||||
resolution | Нет | ||||||||
orientation | 11.00 | ||||||||
aspect-ratio | 9.5 | ||||||||
grid | Нет | 10.5 | |||||||
scan | |||||||||
Ruby characters[spec 10] | |||||||||
Multi-column Layout[spec 11] | |||||||||
Multi-column Layout | 1.0 | 1.5 | 11.10 | Нет | |||||
Animation[spec 12] | |||||||||
animation | Частично | Частично | Да | Нет | |||||
animation-delay | |||||||||
animation-direction | |||||||||
animation-duration | |||||||||
animation-iteration-count | |||||||||
animation-name | |||||||||
animation-play-state | |||||||||
animation-timing-function | |||||||||
2D Transforms[spec 13] | |||||||||
transform | Частично | 3.5 | 10.5 | Нет | |||||
transform-origin | |||||||||
3D Transforms[spec 14] | |||||||||
transform | Частично | Частично | Нет | Нет | |||||
transform-origin | |||||||||
transform-style | |||||||||
text-outline | |||||||||
perspective | |||||||||
perspective-origin | |||||||||
backface-visibility | |||||||||
Transitions[spec 15] | |||||||||
transition | Частично | 3.7 | 10.5 | Нет | |||||
transition-duration | |||||||||
transition-timing-function | |||||||||
transition-delay | |||||||||
transition-property | |||||||||
Flexible Box Layout[spec 16] | |||||||||
box-align | Частично | 1.0 | Да | Нет | |||||
box-direction | |||||||||
box-flex | |||||||||
box-flex-group | |||||||||
box-lines | Нет | ||||||||
box-ordinal-group | 1.0 | ||||||||
box-orient | |||||||||
box-pack | |||||||||
Marquee[spec 17] | |||||||||
marquee-direction | через специфичное свойство -webkit | Нет | Нет | Нет | |||||
marquee-play-count | |||||||||
marquee-speed | |||||||||
marquee-style | |||||||||
overflow-style |
Другие измерения
По версии html5test.com (по состоянию на 16.12.2012)[10] браузеры показывают следующие результаты в тестах (максимально можно набрать 500 очков):
Браузер | Версия | Очки | Бонус-очки |
---|---|---|---|
Internet Explorer | 10 | 320 | 6 |
Safari | 6.0 | 378 | 8 |
Firefox | 17.0.1 | 392 | 10 |
Opera | 12.10 | 419 | 9 |
Chrome | 23.0 | 448 | 13 |
Результаты мобильных браузеров по тому же источнику:
Производитель | Платформа | Очки | Бонус-очки |
---|---|---|---|
Microsoft | WP7 Mango | 141 | 5 |
Android 4.0.3 | 275 | 3 | |
Samsung | Bada 2.0 | 270 | 9 |
HP | webOS 2.1 | 189 | 5 |
Apple | iOS 4.3 | 217 | 7 |
Opera | Mobile 12.0 | 369 | 11 |
Blackberry | OS 7 | 277 | 3 |
Nokia | MeeGo | 283 | 14 |
Ссылки
Спецификации
- ↑ «CSS basic box model», W3C, <http://www.w3.org/TR/css3-box/>
- ↑ «CSS Backgrounds and Borders Module Level 3», W3C, <http://www.w3.org/TR/css3-background/>
- ↑ «CSS Color Module Level 3», W3C, <http://www.w3.org/TR/css3-color/>
- ↑ «CSS Fonts Module Level 3», W3C, <http://www.w3.org/TR/css3-fonts/>
- ↑ «CSS Text Level 3», W3C, <http://www.w3.org/TR/css3-text/>
- ↑ «CSS3 Basic User Interface Module», W3C, <http://www.w3.org/TR/css3-ui/>
- ↑ «CSS3 Module: Paged Media», W3C, <http://www.w3.org/TR/css3-page/>
- ↑ «CSS3 Speech Module», W3C, <http://www.w3.org/TR/css3-speech/>
- ↑ «Media Queries», W3C, <http://www.w3.org/TR/css3-mediaqueries/>
- ↑ «CSS3 Ruby Module», W3C, <http://www.w3.org/TR/css3-ruby/>
- ↑ «CSS Multi-column Layout Module», W3C, <http://www.w3.org/TR/css3-multicol/>
- ↑ «CSS Animations Module Level 3», W3C, <http://www.w3.org/TR/css3-animations/>
- ↑ «CSS 2D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-2d-transforms/>
- ↑ «CSS 3D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-3d-transforms/>
- ↑ «CSS Transitions Module Level 3», W3C, <http://www.w3.org/TR/css3-transitions/>
- ↑ «Flexible Box Layout Module», W3C, <http://www.w3.org/TR/css3-flexbox/>
- ↑ «CSS Marquee Module Level 3», W3C, <http://www.w3.org/TR/css3-marquee/>
Примечания
Примечания Internet Explorer
Третья превью версия IE9 и Google Chrome 6.0 уже способны воспроизводить HTML5 видео на таком популярном хостинге видео как YouTube.
Примечания Firefox
Примечания Chrome
Другие примечания
Сравнение браузеров (HTML5) - это... Что такое Сравнение браузеров (HTML5)?
![]() |
Информация в этой статье или некоторых её разделах устарела. Вы можете помочь проекту, обновив её и убрав после этого данный шаблон. |
Данные таблицы сравнивают поддержку HTML5 и CSS3 в наиболее распространенных браузерах.
Обозначения
Обозначение показывают версию браузера, в которой появилась поддержка определенных технологий
Параметр | Значение |
---|---|
Да | Браузер полностью поддерживает данное свойство/элемент |
Нет | Данное свойство или элемент не поддерживается |
Частично | Присутствует неполная реализация данного свойства/элемента |
Экспериментальная поддержка | Присутствует экспериментальная поддержка |
Тестовая сборка | Присутствует поддержка в тестовых сборках браузера. |
HTML 5
Новые теги
Internet Explorer | Firefox | Chrome | Safari | Opera | |
---|---|---|---|---|---|
Embedded content elements | |||||
embed | 3.0 | 1.0 | 1.0 | 1.0 | 7.0 |
video | 9.0 | 3.5 | 3.0 | Да | 10.5 |
audio | |||||
source | |||||
canvas | 9.0 | 1.5 | 2.0[1] | Да | 9.0 |
SVG in text/html | 9.0 | 4.0 | Да | Нет | 11.65 |
MathML in text/html | Нет | 4.0 | Да | ||
Section elements | |||||
section | 9.0 | 4.0 | 5.0 | 5.0 | Да |
nav | |||||
article | |||||
aside | |||||
hgroup | |||||
header | |||||
footer | |||||
Grouping content elements | |||||
figure | 9.0 | 4.0 | Да | Нет | Да |
figcaption | |||||
Text-level semantic elements | |||||
mark | 9.0 | 4.0 | Да | Нет | 11.10 |
ruby | 3.0 | Нет | 4.0 | Нет | |
time | Нет | Нет | Нет | 11.50 | |
wbr | Да | Да | Да | Да | Да |
Interactive elements | |||||
details | Нет | Нет | Да | Нет | Нет |
summary | Да | Да | Да | Да | Да |
command | Нет | Нет | Нет | Нет | Нет |
menu | Да | Да | Да | Да | Да |
Internet Explorer | Firefox | Chrome | Safari | Opera |
Элементы и атрибуты форм
Internet Explorer | Firefox | Chrome | Safari | Opera | |
---|---|---|---|---|---|
Input types | |||||
search | Нет | 4.0 | 1.0 | Да | 11.0 |
tel | Нет | 4.0 | 3.0 | Да | 11.0 |
url | Нет | 4.0 | 3.0 | Да | 9.0 |
Нет | 4.0 | 3.0 | Да | 9.0 | |
datetime | Нет | Нет | Да | Да | 9.0 |
date | |||||
month | |||||
week | |||||
time | |||||
datetime-local | |||||
number | Нет | Нет | 3.0 | Да | 9.0 |
range | Нет | Нет | 1.0 | Да | 9.0 |
color | Нет | Нет | 4.0 | Да | 11.0 |
Атрибуты | |||||
autocomplete | Да | Да | Да | Да | 9.0 |
autofocus | Нет | 4.0 | 2.0 | Да | 9.0 |
placeholder | Нет | 4.0 | 3.0 | Да | 11.0 |
multiple | Нет | 3.6 | 2.0 | Да | 11.0 |
pattern | Нет | 4.0 | 4.0 | Да | 9.0 |
required | Нет | 4.0 | 3.0 | Да | 9.0 |
control | Нет | 4.0 | Да | Нет | 9.0 |
form | Нет | 4.0 | Да | Нет | 9.0 |
formaction | Нет | 4.0 | Да | Нет | 10.5 |
formenctype | Нет | 4.0 | Да | Нет | 10.5 |
formmethod | Нет | 4.0 | Да | Нет | 10.5 |
formnovalidate | Нет | 4.0 | Да | Нет | 10.5 |
formtarget | Нет | 4.0 | Да | Нет | 10.5 |
labels | Нет | Нет | Нет | Нет | 9.0 |
Элементы | |||||
datalist | Нет | 4.0 | Нет | Нет | 9.0 |
keygen | 1.0 | 1.0 | Нет | 11.10 | |
output | 4.0 | Нет | Нет | 9.0 | |
progress | Нет | Да | Нет | 11.0 | |
meter | Нет | Да | Нет | 11.0 | |
Internet Explorer | Firefox | Chrome | Safari | Opera |
Форматы видео / аудио
Связанные спецификации
Internet Explorer | Firefox | Chrome | Safari | Opera | |
---|---|---|---|---|---|
Web Storage | 8.0 | 3.5 | Да | Да | 10.5 |
Indexed DB | HTML5 Labs[3] | 4.0 | 11.0 | Частично | Нет |
File API | HTML5 Labs[4] | 3.5 | 7.0 | Да | 11.1 |
File API: Writer | Нет | Нет | Частично | Частично | Нет |
Media Capture API | Нет | 4.0 | Нет | Нет | 12.0 |
Server-Sent Events | Нет | Нет | Да | Да | 11.0 |
WebSocket | HTML5 Labs[5] | 4.0 | 6.0[6] | 5.0 | 11.0 |
Web Workers | Нет | 3.5 | 2.0 | Да | 10.6 |
Geolocation API | 9.0 | 3.5 | 5.0 | Да | 10.6 |
Offline Web applications | Нет | 3.5 | 5.0 | Да | 10.6 |
WebGL | Нет | 4.0 | 9.0 | Нет | 12.0 не во всех ОС |
Каскадные таблицы стилей (CSS3)
Chrome | Firefox[7] | Opera | Internet Explorer | ||||||
---|---|---|---|---|---|---|---|---|---|
Box Model[spec 1] | |||||||||
overflow-x | 1.0 | 1.5 | 9.5 | Частично | |||||
overflow-y | |||||||||
Backgrounds and Borders [spec 2] | |||||||||
multiple background | 1.0 | 3.6 | 10.5 | 9.0 | |||||
background-clip | 1.0 | 1.0 | |||||||
background-origin | |||||||||
background-size | 3.6 | ||||||||
border-radius | 1.0 | 1.0[8] | |||||||
border-image | 1.0 | 3.5 | Нет | ||||||
box-decoration-break | Нет | Нет | 10.6 | ||||||
box-shadow | 1.0 | 3.5 | 10.5 | ||||||
Colors [spec 3] | |||||||||
opacity | 1.0 | 1.0 | 9.0 | 9.0 | |||||
Fonts[spec 4] | |||||||||
font-size-adjust | Нет | 1.0[9] | Да | Нет | |||||
font-stretch | Нет | Нет | |||||||
Text[spec 5] | |||||||||
text-shadow | Да | 3.5 | 9.5 | Нет | |||||
word-break | Нет | Нет | Нет | Частично | |||||
text-wrap | Нет | ||||||||
word-wrap | 1.0 | 3.5 | 10.5 | 5.0 | |||||
text-align-last | Нет | Нет | Нет | Частично | |||||
text-justify | 5.5 | ||||||||
punctuation-trim | Нет | ||||||||
text-emphasis | |||||||||
text-outline | |||||||||
hanging-punctuation | |||||||||
text-overflow (dropped) | Частично | Частично | Частично | ||||||
User interface[spec 6] | |||||||||
Paged media[spec 7] | |||||||||
Speech[spec 8] | |||||||||
Media Queries[spec 9] | |||||||||
width | 1.0 | 3.5 | 9.0 | 9.0 | |||||
height | |||||||||
device-width | |||||||||
device-height | |||||||||
device-aspect-ratio | |||||||||
color | 10.5 | ||||||||
color-index | |||||||||
monochrome | |||||||||
resolution | Нет | ||||||||
orientation | 11.00 | ||||||||
aspect-ratio | 9.5 | ||||||||
grid | Нет | 10.5 | |||||||
scan | |||||||||
Ruby characters[spec 10] | |||||||||
Multi-column Layout[spec 11] | |||||||||
Multi-column Layout | 1.0 | 1.5 | 11.10 | Нет | |||||
Animation[spec 12] | |||||||||
animation | Частично | Частично | Да | Нет | |||||
animation-delay | |||||||||
animation-direction | |||||||||
animation-duration | |||||||||
animation-iteration-count | |||||||||
animation-name | |||||||||
animation-play-state | |||||||||
animation-timing-function | |||||||||
2D Transforms[spec 13] | |||||||||
transform | Частично | 3.5 | 10.5 | Нет | |||||
transform-origin | |||||||||
3D Transforms[spec 14] | |||||||||
transform | Частично | Частично | Нет | Нет | |||||
transform-origin | |||||||||
transform-style | |||||||||
text-outline | |||||||||
perspective | |||||||||
perspective-origin | |||||||||
backface-visibility | |||||||||
Transitions[spec 15] | |||||||||
transition | Частично | 3.7 | 10.5 | Нет | |||||
transition-duration | |||||||||
transition-timing-function | |||||||||
transition-delay | |||||||||
transition-property | |||||||||
Flexible Box Layout[spec 16] | |||||||||
box-align | Частично | 1.0 | Да | Нет | |||||
box-direction | |||||||||
box-flex | |||||||||
box-flex-group | |||||||||
box-lines | Нет | ||||||||
box-ordinal-group | 1.0 | ||||||||
box-orient | |||||||||
box-pack | |||||||||
Marquee[spec 17] | |||||||||
marquee-direction | через специфичное свойство -webkit | Нет | Нет | Нет | |||||
marquee-play-count | |||||||||
marquee-speed | |||||||||
marquee-style | |||||||||
overflow-style |
Другие измерения
По версии html5test.com (по состоянию на 16.12.2012)[10] браузеры показывают следующие результаты в тестах (максимально можно набрать 500 очков):
Браузер | Версия | Очки | Бонус-очки |
---|---|---|---|
Internet Explorer | 10 | 320 | 6 |
Safari | 6.0 | 378 | 8 |
Firefox | 17.0.1 | 392 | 10 |
Opera | 12.10 | 419 | 9 |
Chrome | 23.0 | 448 | 13 |
Результаты мобильных браузеров по тому же источнику:
Производитель | Платформа | Очки | Бонус-очки |
---|---|---|---|
Microsoft | WP7 Mango | 141 | 5 |
Android 4.0.3 | 275 | 3 | |
Samsung | Bada 2.0 | 270 | 9 |
HP | webOS 2.1 | 189 | 5 |
Apple | iOS 4.3 | 217 | 7 |
Opera | Mobile 12.0 | 369 | 11 |
Blackberry | OS 7 | 277 | 3 |
Nokia | MeeGo | 283 | 14 |
Ссылки
Спецификации
- ↑ «CSS basic box model», W3C, <http://www.w3.org/TR/css3-box/>
- ↑ «CSS Backgrounds and Borders Module Level 3», W3C, <http://www.w3.org/TR/css3-background/>
- ↑ «CSS Color Module Level 3», W3C, <http://www.w3.org/TR/css3-color/>
- ↑ «CSS Fonts Module Level 3», W3C, <http://www.w3.org/TR/css3-fonts/>
- ↑ «CSS Text Level 3», W3C, <http://www.w3.org/TR/css3-text/>
- ↑ «CSS3 Basic User Interface Module», W3C, <http://www.w3.org/TR/css3-ui/>
- ↑ «CSS3 Module: Paged Media», W3C, <http://www.w3.org/TR/css3-page/>
- ↑ «CSS3 Speech Module», W3C, <http://www.w3.org/TR/css3-speech/>
- ↑ «Media Queries», W3C, <http://www.w3.org/TR/css3-mediaqueries/>
- ↑ «CSS3 Ruby Module», W3C, <http://www.w3.org/TR/css3-ruby/>
- ↑ «CSS Multi-column Layout Module», W3C, <http://www.w3.org/TR/css3-multicol/>
- ↑ «CSS Animations Module Level 3», W3C, <http://www.w3.org/TR/css3-animations/>
- ↑ «CSS 2D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-2d-transforms/>
- ↑ «CSS 3D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-3d-transforms/>
- ↑ «CSS Transitions Module Level 3», W3C, <http://www.w3.org/TR/css3-transitions/>
- ↑ «Flexible Box Layout Module», W3C, <http://www.w3.org/TR/css3-flexbox/>
- ↑ «CSS Marquee Module Level 3», W3C, <http://www.w3.org/TR/css3-marquee/>
Примечания
Примечания Internet Explorer
Третья превью версия IE9 и Google Chrome 6.0 уже способны воспроизводить HTML5 видео на таком популярном хостинге видео как YouTube.