Поддержка 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 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

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

<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)?

Ambox outdated serious.svg Информация в этой статье или некоторых её разделах устарела. Вы можете помочь проекту, обновив её и убрав после этого данный шаблон.

Данные таблицы сравнивают поддержку 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
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
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
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

Ссылки

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

  1. «CSS basic box model», W3C, <http://www.w3.org/TR/css3-box/> 
  2. «CSS Backgrounds and Borders Module Level 3», W3C, <http://www.w3.org/TR/css3-background/> 
  3. «CSS Color Module Level 3», W3C, <http://www.w3.org/TR/css3-color/> 
  4. «CSS Fonts Module Level 3», W3C, <http://www.w3.org/TR/css3-fonts/> 
  5. «CSS Text Level 3», W3C, <http://www.w3.org/TR/css3-text/> 
  6. «CSS3 Basic User Interface Module», W3C, <http://www.w3.org/TR/css3-ui/> 
  7. «CSS3 Module: Paged Media», W3C, <http://www.w3.org/TR/css3-page/> 
  8. «CSS3 Speech Module», W3C, <http://www.w3.org/TR/css3-speech/> 
  9. «Media Queries», W3C, <http://www.w3.org/TR/css3-mediaqueries/> 
  10. «CSS3 Ruby Module», W3C, <http://www.w3.org/TR/css3-ruby/> 
  11. «CSS Multi-column Layout Module», W3C, <http://www.w3.org/TR/css3-multicol/> 
  12. «CSS Animations Module Level 3», W3C, <http://www.w3.org/TR/css3-animations/> 
  13. «CSS 2D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-2d-transforms/> 
  14. «CSS 3D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-3d-transforms/> 
  15. «CSS Transitions Module Level 3», W3C, <http://www.w3.org/TR/css3-transitions/> 
  16. «Flexible Box Layout Module», W3C, <http://www.w3.org/TR/css3-flexbox/> 
  17. «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)?

Ambox outdated serious.svg Информация в этой статье или некоторых её разделах устарела. Вы можете помочь проекту, обновив её и убрав после этого данный шаблон.

Данные таблицы сравнивают поддержку 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
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
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
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

Ссылки

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

  1. «CSS basic box model», W3C, <http://www.w3.org/TR/css3-box/> 
  2. «CSS Backgrounds and Borders Module Level 3», W3C, <http://www.w3.org/TR/css3-background/> 
  3. «CSS Color Module Level 3», W3C, <http://www.w3.org/TR/css3-color/> 
  4. «CSS Fonts Module Level 3», W3C, <http://www.w3.org/TR/css3-fonts/> 
  5. «CSS Text Level 3», W3C, <http://www.w3.org/TR/css3-text/> 
  6. «CSS3 Basic User Interface Module», W3C, <http://www.w3.org/TR/css3-ui/> 
  7. «CSS3 Module: Paged Media», W3C, <http://www.w3.org/TR/css3-page/> 
  8. «CSS3 Speech Module», W3C, <http://www.w3.org/TR/css3-speech/> 
  9. «Media Queries», W3C, <http://www.w3.org/TR/css3-mediaqueries/> 
  10. «CSS3 Ruby Module», W3C, <http://www.w3.org/TR/css3-ruby/> 
  11. «CSS Multi-column Layout Module», W3C, <http://www.w3.org/TR/css3-multicol/> 
  12. «CSS Animations Module Level 3», W3C, <http://www.w3.org/TR/css3-animations/> 
  13. «CSS 2D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-2d-transforms/> 
  14. «CSS 3D Transforms Module Level 3», W3C, <http://www.w3.org/TR/css3-3d-transforms/> 
  15. «CSS Transitions Module Level 3», W3C, <http://www.w3.org/TR/css3-transitions/> 
  16. «Flexible Box Layout Module», W3C, <http://www.w3.org/TR/css3-flexbox/> 
  17. «CSS Marquee Module Level 3», W3C, <http://www.w3.org/TR/css3-marquee/> 

Примечания

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

Третья превью версия IE9 и Google Chrome 6.0 уже способны воспроизводить HTML5 видео на таком популярном хостинге видео как YouTube.

Примечания Firefox

Примечания Chrome

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

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

avatar
  Подписаться  
Уведомление о