How Browsers Work: Behind the Scenes of Modern Web Browsers
Comments:Your browser may not support the functionality in this article.
Предисловие
Это подробное руководство по внутренним механизмам работы систем WebKit и Gecko стало результатом обширных исследований, проведенных израильской веб-программисткой Тали Гарсиэль. Она в течение нескольких лет отслеживала всю публикуемую информацию о том, как устроены браузеры (см. раздел Ресурсы), и посвятила много времени анализу их исходного кода. Вот что пишет сама Тали:
Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++…
Веб-разработчик, знакомый с внутренним механизмом работы браузеров, принимает более квалифицированные решения и понимает, почему следует выбрать те или иные средства. Это достаточно объемный документ, однако мы рекомендуем читать его как можно внимательнее и гарантируем, что вы не пожалеете об этом. Пол Айриш, Chrome Developer Relations
Введение
Веб-браузеры, пожалуй, являются самыми распространенными приложениями. В этом учебнике я объясняю, как они работают. Мы подробно рассмотрим, что происходит с момента, когда вы набираете в адресной строке google.ru, до появления страницы Google на экране.
Содержание
- Введение
браузеры | htmlbook.ru
Влад Мержевич
Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.
Для HTML:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
Для фреймов в HTML:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
Для XHTML:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»>
Для фреймов в XHTML:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN»>
Влад Мержевич
Продолжая тему режимов браузера, рассмотрим стандартный режим — режим поддержки стандартов (X)HTML и CSS. Для переключения браузера в этот режим используется один из следующих доктайпов.
Для HTML:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0//EN» «http://www.w3.org/TR/REC-html40/strict.dtd»>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<!DOCTYPE html>
Для XHTML:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
Влад Мержевич
Этот режим предназначен для отображения веб-страницы подобно старым браузерам. В режиме совместимости игнорируются стандарты HTML и CSS, и поведение браузеров становится непредсказуемым. Для переключения в режим совместимости существует множество доктайпов, вот лишь некоторые из них.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Frameset//EN»>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»>
Также переход происходит, если доктайп вообще не указан или не может быть распознан.
Влад Мержевич
Во время противостояния браузеров Internet Explorer и Netscape каждый из разработчиков старался улучшить своё детище, чтобы усилить позиции программы на рынке и привлечь больше пользователей. Netscape 4 и IE4 ужасно поддерживали веб-стандарты, поэтому следующая версия, IE5 должна была не только исправить ошибки IE4, но и показать улучшенную поддержку спецификации CSS. Это было необходимо еще и по политическим мотивам, поскольку компания Майкрософт вошла в группу W3C и начала оказывать сильное влияние на разработку HTML и CSS.
В процессе работы над браузером IE5 его разработчики столкнулись с неожиданной трудностью. Разница при отображении страницы в разных версиях браузера была настолько велика, что множество сайтов оказались бы неработоспособными при просмотре в IE5. Идея сделать кнопку для переключения в режим совместимости пришла только в версии 8.0, поэтому разработчики IE5 пошли другим путём. Все старые страницы отображались по старым правилам, а для включения режима поддержки стандартов в код страницы необходимо добавить элемент <!DOCTYPE> (доктайп).
Влад Мержевич
Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.
- Internet Explorer встроен в операционную систему Windows и неопытные пользователи даже не подозревают о наличии альтернативы.
- Корпоративные пользователи с ограниченным доступом не могут самостоятельно обновить версию или сменить браузер.
- Обновление IE до новой версии происходит через систему Windows Update, которая часто отключается по требованиям безопасности или для снижения интернет-трафика.
- Некоторые приложения, например, банковские, могут быть «заточены» для работы только под конкретную версию IE.
- В силу инерции мышления, когда пользователю нравится та программа, с которой он привык работать.
Сравнение браузеров (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 | Да | Нет | Да | |
| 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.
Примечания 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.
Примечания 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.
Примечания 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.