Поддержка html5 браузерами – Правила создания рекламных материалов в формате HTML5 для рекламодателей — Требования к рекламным материалам — Рекламные технологии Яндекса — Вебджем.рф

Содержание

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 не поддерживается вашим браузером.

<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 не поддерживается вашим браузером. Скачайте видео.

</video>

Атрибуты аналогичны тегу <audio>.

Данный тег используется для создания блоков с видео в виде фона.

Тег canvas

Используется для рисования в HTML5. Применение canvas позволило отказаться от технологии Flash. Рисование производится с помощью JavaScript. Использования тега <canvas> вы изучите на уроках JS.

<canvas> <p>Ваш браузер не поддерживает рисование.</p> </canvas>

<p>Ваш браузер не поддерживает рисование.</p>

</canvas>

Тег datalist

Используется для создания «умных» выпадающих списков. Дублирует функционал выпадающего списка, но добавляет к нему возможность поиска пунктов по буквам входящим в слова и введения своего варианта. Идеален для применения к спискам, пункты которых известны заранее.

К сожалению, поддержка браузерами очень ограничена. Более того, на сегодняшний момент браузеры демонстрируют абсолютно разную работу с данным элементом. Пока стоит воздержаться от применения.

Пример:

</datalist>

Тег details

Позволяет создавать раскрывающийся при клике блок. Используется совместно с тегом <summary>, который задает раскрывающийся элемент.

<details> <summary>Информация об авторе</summary> <p>Бендер Родригез</p> </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

Тег используется для обозначения главной навигации по сайту. Содержит внутри себя список (хотя могут быть и другие элементы). Пример:

<nav>

<ul>

</ul>

</nav>

Использовать тег <nav> нужно обязательно.

Тег output

Создан в противовес тегу input, используется для обозначения области на html странице, куда будет выводится информация.

Следует отметить, что с помощью JS можно вывести информацию в любой элемент. Однако введение тега <output> это следствие новой функции HTML5 – функции представления информации.

Тег progress

Тег служит для отображения прогресса какого-либо события, представляет из себя прямоугольник, заполнением которого можно управлять с помощью JS. Обратите внимание, что внешний вид элемента отличается в разных браузерах, однако большинство браузеров поддерживают данный тег. Если тег не поддерживаться, то будет выведена надпись между тегами.

<progress max="100" value="50"> Загружено на <span>25</span>% </progress>

Загружено на <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 »:

Код выше , является комментарием, но версия предыдущей в 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 один и тот же лабиринт). Итоговая таблица лучший пожалуй хром, а дальше черт ногу сломит, в общем, смотрите сами:

Css3
Browser	FF	Opera	Chrome	IE	IE10	Safari
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	Да	Нет	11.65
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	9.0	4.0	Да	Нет	Да
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
email	Нет	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	1.0	1.5	9.5	Частично
Backgrounds and Borders ^{[spec 2]}
multiple background	1.0	3.6	10.5	9.0
background-clip	1.0	1.0
background-origin		1.0
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		Нет	10.5
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	Частично	3.5	10.5	Нет
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
Google	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	Да	Нет	11.65
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	9.0	4.0	Да	Нет	Да
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
email	Нет	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	1.0	1.5	9.5	Частично
Backgrounds and Borders ^{[spec 2]}
multiple background	1.0	3.6	10.5	9.0
background-clip	1.0	1.0
background-origin		1.0
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		Нет	10.5
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	Частично	3.5	10.5	Нет
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

Другие измерения

Браузер	Версия	Очки	Бонус-очки
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
Google	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/>

HTML 5 (часть 2). Новые теги и поддержка браузерами

Новые теги в HTML5

Рассмотрим новые введенные элементы.

Тег audio

Тег video

Тег canvas

Тег datalist

Тег details

Тег meter

Тег nav

Тег output

Тег progress

Тег wbr

Поддержка браузера HTML уроки для начинающих академия

Поддержка браузера HTML5

Определение семантических элементов в качестве элементов блока

Добавление новых элементов в HTML

Пример

Проблема с Internet Explorer 8

Синтаксис для HTML5Shiv

Поддержка браузеров HTML5

Поддержка браузеров HTML5

Определить HTML5 элементы, как элементы блока

Добавление новых элементов в HTML

пример

Проблема с Internet Explorer

Полное Shiv решение

пример

Сравнение Браузеров css3 & html5 / Habr

Css:

Html5

FF 18.0.2

Maze Solver — CSS3 Layout Performance Test

Css3test.com

CSS3 Selectors Test

Acid3

html5test

Test2

Peacekeeper

Opera 12.14

Chrome 24.0.1312.57

IE 9.0.8112.16421 64-bit

IE 10.0.9200.16438 64-bit

Safary Версия 6.0.2 (8536.26.17), max osx 10.8

Выводы и итого по всем

Сравнение браузеров (HTML5) - это... Что такое Сравнение браузеров (HTML5)?

Обозначения

HTML 5

Новые теги

Элементы и атрибуты форм

Форматы видео / аудио

Связанные спецификации

Каскадные таблицы стилей (CSS3)

Другие измерения

Ссылки

Спецификации

Примечания

Примечания Internet Explorer

Примечания Firefox

Примечания Chrome

Другие примечания

Сравнение браузеров (HTML5) - это... Что такое Сравнение браузеров (HTML5)?

Обозначения

HTML 5

Новые теги

Элементы и атрибуты форм

Форматы видео / аудио

Связанные спецификации

Каскадные таблицы стилей (CSS3)

Другие измерения

Ссылки

Спецификации

Примечания

Примечания Internet Explorer

Примечания Firefox

Примечания Chrome

Другие примечания

Отправить ответ

Рубрики