Какой элемент больше не поддерживается в html5. Насколько Chrome, Safari, Firefox, IE и Opera удовлетворяют требованиям HTML5? Рассмотрим новые введенные элементы

Все эти решения ожидают нас в будущем. Этап HTML 5.0 является значительным, но это только пауза в развитии стандарта, который определяет, как мы представляем информацию и взаимодействуем с ней.

Достаточно обобщений - время покопаться в браузерах.

Браузер №1: Google Chrome

Chrome имеет самый высокий балл по HTML5Test — 523 для Chrome 42 — и многое говорит о приверженности компании Google спецификации HTML5 и стремлении создать один из ведущих браузеров. Осталось только несколько не отмеченных пунктов для команды программирования, чтобы заработать максимальный балл.

Упущения несколько разбросаны, и нельзя их суммировать одной фразой. Пропавший элемент разметки здесь и нереализованный графический метод там. В общем, Chrome — мечта для тех, кто привержен широкому набору инструментов для создания пользовательских интерфейсов. Если вы хотите использовать все новые методы разметки или элементы формы, Chrome — это лучший выбор. У него очень мало пробелов в списке.

Некоторые из самых больших упущений находятся под капотом. В нем нет хуков в движке JavaScript, которые отвечают за отдельные события, когда скрипты запускаются и останавливают выполнение. Нет простого способа контролировать как стили CSS влияют на страницу. Также не существует возможности использовать свой код для регистрации функции, которая обрабатывает все данные определенного типа MIME или URL схемы, так называемых пользовательских обработчиков контента.

Все три идеи, кстати, были давно реализованы в Firefox. Они не были приняты командой из Google.

Еще одна область, которая может принести разочарование — поддержка кодеков и медиа форматов. MPEG-4, например, работает с браузером iOS, но не с Chrome. Apple и Microsoft поддерживают выбор аудиодорожки, и Apple поддерживает видео выбор трека, но Chrome не позволяет вам это использовать.

В целом, Chrone — отличный браузер для тех, кто хочет начать использовать дополнительные функции, которые являются частью нового стандарта.

Браузер №2: Opera

На момент написания, Opera находится на втором месте в тесте HTML5Test, но отстает только на четыре пункта — 519 баллов для версии 29. Как и Chrome, Opera предлагает широкую поддержку новых элементов разметки и форм, так что это такая же хорошая платформа, как и Chrome для желающих поэкспериментировать с ними.

Opera также не поддерживает пользовательские обработчики контента, контекстные элементы стиля и события выполнения сценария. Однако таким же образом поступает любой другой браузер, кроме Firefox.

Самые большие различия лежат в кодеках. Opera не может поддерживать видео форматы MPEG-4 и H.264. Ситуацию осложняет то, что данный браузер также не поддерживает AAC и MP3 -два аудио формата, которые существуют достаточно давно. Таким образом, заставить ваш мультимедийный контент работать с Opera немного сложнее. Opera почти наверняка окружена расходами на лицензирование патентов, и компания, вероятно, предпочла проигнорировать большие затраты на лицензирование. Opera, конечно, поддерживает Ogg Vorbis Ogg Theora и WebM, которые являются достаточно хорошими, если не буквально совместимыми.

Наряду с Internet Explorer и Chrome, Opera развивается в направлении «pointer events», обобщая различные модели ввода. Они направлены, чтобы упростить поддержку мыши, сенсорных экранов и стилусов, предлагая программисту единую простую модель событий, что гармонизирует их.

В целом, Opera — браузер, который впечатляет, но который не получает столько внимания, сколько бы следовало. Он конкурирует только с Chrome по широте поддержки современных веб-функций.

Браузер №3: Mozilla Firefox

По баллам Firefox выглядит, как будто он слегка отстает от двух лидеров. Он набрал 449 баллов в тесте HTML5Test для Firefox 37, но этот факт в значительной степени зависит от важности функций, которую тест определяет сам. Firefox теряет много очков в некоторых областях, где он отстает, и получает меньше очков в тех областях, где ведет.

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

Тест также не вознаграждает Firefox за проявленную инициативу. События, которые срабатывают, когда сценарий собирается выполнятся, полезны для регулировки, но поддержка этих событий выполнения скрипта дает Firefox только один балл. Добавление рамки к стилям листов полезно для объединения нескольких стилей листов, но это стоит всего два очка в глазах создателей теста HTML5Test.

Firefox больше не выигрывает никаких баллов за реализацию разметки микроданных, дополнительных тегов, которые позволяют проще определять и отмечать некоторые наиболее часто встречающиеся типы данных на веб-страницах. Нелюбимые консорциумом W3C и всеми другими браузерами, микроданные поддерживаются только в Firefox.

Firefox предлагает широкую поддержку кодеков, но избегает MPEG-4, оставив его в том же лагере, что и Chrome и Opera. Он поддерживает Ogg, WebM и H.264, которых более чем достаточно.

Являются ли эти различия важными? Все зависит от того, как вы оцениваете функции лично. Если вам нравятся все новые элементы форм, Firefox не для вас и вашего проекта. Но во многих отношениях, Firefox предлагает тот же уровень соответствия, как и браузеры с более высокими результатами, если вас не беспокоят новые временные поля ввода.

Браузер №4: Apple Safari

На тесте HTML5Test Safari зарабатывает 396 балла, что делает его отстающим больше, чем это может быть на практике. Как и Firefox, Safari теряет большое количество баллов, не сумев реализовать все возможные формы и элементы разметки. В нем нет опций, чтобы сделать поле ввода для сбора времени или цвета и никакой поддержки для стандартных элементов меню.

Хотя, разработчики игр, могут отпасть. В нем нет поддержки для отслеживания ориентации или движения устройства, для контроля геймпада или более общих указателей событий. Если вы собираетесь создавать что-то для Safari, лучше придерживаться традиционного контента и избегать элементов, которые слишком интерактивны. Оставьте это для App Store.

В мире кодеков, путь Apple отличается от Chrome и Firefox. Safari покажет MPEG-4 и H.264 видео, но отвергнет WebM и Ogg Theora. Хорошей новостью является то, что видео и аудио дорожками можно управлять с помощью JavaScript.

Есть несколько других мест, в которых Safari отстает от более полных наборов функций Chrome, Opera и Firefox. В то время как эти браузеры поддерживают коммуникации peer-to-peer с помощью WebRTC, Apple не предлагает никакой поддержки, как и Internet Explorer. Также Safari не поддерживает service workers для фоновой обработки, кастомные схемы, обработчики контента и настраиваемых провайдеров поиска.

Эти упущения не являются катастрофическими. Apple по-прежнему предлагает широкую поддержку стандарта и обеспечивает многие из самых интересных функций.

Браузер №5: Microsoft Internet Explorer

11-я версия Internet Explorer имеет низкий балл в тесте HTML5Test — лишь 348, но это не должно вызывать большого удивления. Движение стандартов всегда обусловлено надеждой стимулировать конкуренцию и вытеснить Microsoft с позиций контроля над сетью. Все работает именно так, как некоторые надеялись.

IE теряет баллы во всей таблице, он не может собрать их достаточно, чтобы лидировать хотя-бы в одной области. На самом деле, единственная область, где он бьет какой-либо из других крупных браузеров — веб-приложения, где его поддержка настраиваемых поставщиков поиска чуть лучше, чем у Safari. В остальное время, он замыкает шествие.

В то время как, конечно, справедливо — использовать более низкий балл за отсутствие реализации каждого бита стандарта HTML5, это не показывает, насколько хорошо IE будет исполнять код HTML5 в повседневной работе. Быстрый просмотр результатов показывает, что многие из потерянных функций являются новыми и далеко не самыми важными. IE потерял очки, например, за отсутствие поддержки CSS селекторов, типа «in-range», «out-of-range» и «read-only». Ему также не хватает поддержки ряда новых полей ввода для времени.

Есть десятки мест, где IE не хватает поддержки маленьких функций или дополнений, но ни одна из них не является критической. Конечно, это раздражает некоторых программистов, которые хотят их использовать, но это не помешает браузеру работать достаточно хорошо.

Есть несколько более крупных упущений. Microsoft избегает видео MPEG-4, OGG и WebM, а также аудио PCM, OGG и WebM. Это оставляет MP3-аудио, видео H.264 и Flash-видео в качестве единственных поддерживаемых стандартов. Тем не менее, IE позволяет использовать JavaScript для управления аудио-треками.

Стоит отметить, что Microsoft четко понимает значение соблюдения стандартов, и делает быстрые успехи. Несмотря на то, что версии Internet Explorer не меняются так часто, как у других браузеров, довольно недавно IE9 получал всего 113 баллов. И темпы будут ускоряться в новом веб-браузере Edge (Project Spartan), который будет поставляется с Windows 10.

Последняя версия Edge зарабатывает 390 в тесте HTML5Test. Это лучше, чем IE 11 и лишь немного меньше Safari. Самые большие улучшения по сравнению с IE — поддержка ориентации устройства, движения устройства, контроля геймпада, Web-аудио, DRM, медиа-расширения и отображение адаптивных изображений. Все это показывает, что игры, развлечения и мобильные устройства находятся в верхней части списка приоритетов Microsoft.

HTML5Test является очень точной метрикой, но важно помнить, что он построен для оценки — поддерживают ли браузеры самые новые и самые экспериментальные функции, принятые комитетами HTML5. Он не выдает очки за выполнение хорошей работы при отображении таблицы или за быстрый рендеринг страниц. Это большой перечень функций, а не показатель качества браузера.

Результаты также обеспечивают хорошее представление о корпоративных приоритетах. Не удивительно, что Chrome предлагает отличную поддержку полнофункциональных, похожих на приложения сайтов, которые поставляет Google. Это также упрощает предоставление больших возможностей аппаратной платформе от Google — Хромбукам. Компания немного зарабатывает на той части, которая называется «операционной системой», так что не удивительно, что она хочет, чтобы часть, известная как «браузер», была лучше.

Apple, со своей стороны, кажется, не столь заинтересована в поддержке соревновательного поведения в браузерах, может быть, потому что зарабатывает так много денег на App Store, что не хочет его подорвать.

Многие из функций, с которыми браузеры не в ладах, не имеют значения и для разработчиков. Если вы создаете веб-приложения с большим количеством DOM элементов, которые генерируют AJAX вызовы и реагируют на ответ сервера, все браузеры хорошо справляются с такой работой.

Все они предлагают те же основные функции, и не имеет большого значения — реализовали ли они последние элементы форм.

В этом смысле, оценка HTML5Test говорит больше о будущем, чем о настоящем. В то время как стандарт HTML 5.0 уже установлен и комитет обратил свое внимание к следующему набору идей, создатели браузеров должны закончить внедрения стандарта. По мере того, как они это делают, все больше и больше веб-разработчиков увидят, что новые функции доступны и готовы к использованию. Только после этого пользователи начнут видеть преимущества.

Хорошей новостью является то, что производители браузеров принимают их быстро, и многие из функций охвачены достаточно широко, чтобы веб-разработчики начали их использовать. Комитет сделал свою работу. Теперь наша очередь.

Многие из вас знают, что стремительными темпами интернет наполняется сайтами, блогами и прочими ресурсам, созданными на основе HTML5, даже несмотря на то, что сам HTML5 еще находится на стадии разработки, пока еще не утверждена спецификация и неизвестно точно, когда это произойдет. Ну а раз так обстоят дела, то не мешало бы знать, насколько хорошо или плохо на данный момент осуществляется поддержка HTML5 наиболее распространенными и популярными браузерами.


Исходя из того, что наиболее популярными или просто часто используемыми браузерами на данный момент являются Internet Explorer, Google Chrome, Mozlilla Firefox, Opera, Safari и еще... Maxthon, давайте проведем оценку уровня поддержки HTML5 этими популярными браузерами. Для оценки и выставления рейтинга будем использовать самый простой, удобный и бесплатный сервис The HTML5 test. Этот сервис выставляет оценку поддержки браузерами HTML5 в баллах и бонусных очках. Максимальное количество баллов 500, а бонусных очков 15. В будущем, если будет добавлено много новых тестов, то эти значения могут быть увеличены. На заметку: бонусные очки начисляются за поддержку аудио и видео элементов, а так же за поддержку SVG и MathML, и бонусные очки не суммируются с общими баллами.

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

1 - Maxthon

Первое место, как бы ни было странно для некоторых, получает... да, кросс-платформенный браузер Maxthon (версия 4.0.6)!
Он получает 476 баллов и максимальное количество бонусных очков 15!

Бонусные очки Maxthon получил за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+8) и аудио-кодеков (+5).

Если Вы до сих пор не знакомы с браузером Maxthon, то самое время его опробовать. Он работает под Windows, Android, Mac, iPhone и iPad, есть отлично русифицированный интерфейс, как самого браузера Maxthron, так и его сайта). Вы точно не пожалеете, если даже этот браузер не будет вашим основным, и больше зауважаете китайцев, его создателей:)

2 - Google Chrome

Второе место с очень маленьким отставанием от лидера получает Google Chrome (версия 27.0)!
Он получает 463 балла и 13 бонусных очков.

Бонусные очки Google Chrome получил за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+6) и аудио-кодеков (+5).

В отличие от Maxthon, он поддерживает субтитры, но не поддерживает атрибуты микроразметки в тегах (Microdata).

3 - Opera

На третьем месте шведский браузер, любимый многими из постсоветского пространства, Opera (версия 12.15).
Он получает 404 балла и 9 бонусных очков.

Бонусные очки начислены для Opera за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+4) и аудио-кодеков (+3).

В отличие от Google Chrome и Maxthon например, Opera не поддерживает формат аудио MP3.

4 - Mozilla Firefox

Четвертое место занимает Mozilla Firefox (версия 21.0). Жаль, что он пока отстает, пусть всего даже на каких-то 5 баллов, от Opera, ведь это мой основной браузер, с которым я работаю и отдыхаю. Хотя по бонусным очкам он компенсирует свое отставание.
Он получает 399 баллов и 14 бонусных очков.

Бонусные очки засчитаны Mozilla Firefox за: парсинг SVG и MathML (+2), поддержку видео-кодеков (+6) и аудио-кодеков (+6).

Как и Opera он к сожалению пока не поддерживает популярный формат аудио MP3.

5 - Microsoft Internet Explorer

На пятом месте, с большущим отставанием от топов, Internet Explorer (версия 10.0). Для меня например это и не странно, даже наоборот, более странно, что он не на последнем:)
Он получает 320 баллов и 6 бонусных очков.

Для IE 10 бонусные очки начислены за: парсинг SVG и MathML (+2) и слабенькую, но все же хоть какую-то поддержку видео-кодеков (+2) и аудио-кодеков (+2).

6 - Safari

На последнем шестом месте в нашем обзоре, с большущим отставанием от топов, и даже от IE 10, расположился Safari (версия 5.1.7). У меня пока не было под рукой ничего МАС-осовского, поэтому проверял только самую последнюю версию Safari под Windows.
Он получает 278 баллов и 2 бонусных очка.

Бонусные очки начислены только за парсинг SVG и MathML (+2).

Для видео и аудио у Safari вообще нет поддержки (по крайней мере для этой, самой последней Windows версии). На пару с IE10 этот Safari вообще не поддерживает доступ к веб-камере (Access the webcam), а вот ТОП-4 браузеров в этом обзоре оказывают такую поддержку.

Послесловие

Вот такой вот получается рейтинг поддержки HTML5 среди часто используемых или наиболее популярных браузеров. В ближайшее время может конечно же что-то измениться. Периодически усовершенствуются браузеры и выходят их новые версии. Правда ИМХО надеяться на IE и Safari, глядя на их никчемные на данное время «потуги», не стоит. Да и зачем, ведь в ТОП-4 отличные и бесплатные кросс-платформенные браузеры. Правда обидно наверное поклонникам Opera, что под Windows она уже свой движок практически прекратила развивать.

На сайте html5test.com (автор: Niels Leenheer) Вы можете в любое время протестировать практически любой браузер (причем разных версий), пусть даже «самописный», на предмет его поддержки HTML5. Там же Вы увидите более детальные отчеты и таблицы с оценками тех браузеров, которых у Вас нет, или тех версий, которые уже устарели или не поддерживаются вашей операционной системой (в большей степени это касается IE, который как клещ вцепился в Windows, и которого без обновлений самой системы видимо не получается «раскручивать»).

Приветствуются отзывы в комментариях о браузерах, представленных в данном рейтинге!

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

Стандарт HTML5 поддерживает всевозможные странные методы. В то же самое время он возрождает (и стандартизует) некоторые старые либеральные правила HTML и вводит передовые возможности, которые работают только в новейших браузерах.

Что касается браузерной совместимости, функциональные возможности HTML5 можно разбить на три категории:

Возможности, которые уже работают . К этой категории принадлежат возможности, которые имеют высокий уровень поддержки, но официально не были частью стандарта HTML в прошлом (например, метод drag and drop). В нее так же входят возможности, которые можно реализовать для старых браузеров, приложив очень небольшие дополнительные усилия, наподобие семантических элементов.

Возможности с поэтапной деградацией . Например, если у старого браузера имеются проблемы с использованием нового элемента

Это намного лучше, чем сообщение об ошибке, которое определенно нельзя назвать поэтапной деградацией. В эту категорию также входят второстепенные возможности из разряда примочек, на которые старые браузеры могут спокойно не обращать внимания, наподобие некоторых старых возможностей для работы с веб-формами (например, замещающий текст), и некоторые возможности форматирования из CSS3 (например, для скругления углов или отбрасывания теней).

Возможности, требующие обходных решений JavaScript . Мотивацией для многих новых возможностей HTML5 послужили разработки, которые веб-программисты уже делали другим, более трудоемким, способом. Поэтому не стоит удивляться, что много из возможностей HTML5 можно дублировать с помощью хорошей библиотеки JavaScript (или, в худшем случае, написав энное количество строк кода собственного специализированного сценария JavaScript).

Создание обходного решения JavaScript может быть очень трудоемкой задачей, поэтому, если вы посчитаете, что определенная возможность является необходимой и требует обходного решения JavaScript, вы можете просто решить использовать это обходное решение для всех страниц и отложить использование методов HTML5 на будущее.

Поддерживает ли браузер вашу разметку?

Последнее слово в вопросе, в каком объеме использовать HTML5, принадлежит разработчикам браузеров. Если браузер не поддерживает какую-либо возможность, нет никакого смысла использовать ее, несмотря на все, что говорится в стандарте. В настоящее время существуют четыре или пять основных браузеров (не считая браузеров для мобильных устройств с возможностью подключения к Интернету, таких как смартфоны и планшеты iPad).

У разработчика-одиночки нет никаких шансов протестировать каждую потенциальную возможность на каждом браузере, не говоря уже о возможности оценить поддержку ее в старых версиях браузеров, которые широко используются до сих пор.

К счастью, существует веб-сайт www.caniuse.com , который может помочь вам справиться с этой задачей. В нем даются подробности поддержки HTML5 во всех основных браузерах. И, самое приятное, он позволит вам выделить именно те возможности, которые вам требуются. Веб-сайт работает следующим образом:

Статистика популярности браузеров

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

Одним из хороших источников этой информации является популярный сайт GlobalStats . На странице сайта в раскрывающемся списке Statistic выберите вариант Browser. А вариант Browser Version позволит просмотреть популярность не только конкретного браузера, но и каждой из его версий. Результаты можно сузить, выбрав конкретный регион или страну в раскрывающемся списке Country/Region:

Сайт GlobalStats собирает статистические данные ежедневно с помощью кода слежения, который установлен на миллионах веб-сайтов. Однако для вашего сайта цифры могут быть совершенно другими. Например вот статистика для этого сайта, полученная через Google Analytics за тот же период:

Как видите пользователей современных браузеров Google Chrome, Opera и Firefox гораздо больше чем в статистике от GlobalStats. При этом пользователей Internet Explorer всего 6%, что в три раза меньше чем в общемировой статистике. Эта статистика очень сильно зависит от тематики сайта. Данный сайт создан в основном для IT-специалистов, которые редко используют устаревшие браузеры. Если посмотреть статистику какой-нибудь популярной социальной сети, то количество счастливых обладателей браузеров IE<9 может достигать 50%.

Определение возможностей с помощью Modernizr

В течение нескольких следующих лет абсолютно реальным будет то обстоятельство, что некоторые посетители вашего веб-сайта будут пользоваться браузерами, не поддерживающими HTML5. Но это не должно остановить вас от использования возможностей этого стандарта при условии, что вы согласны вложить немного усилий в разработку обходных решений или возможности поэтапной деградации. В любом случае вам, скорее всего, потребуется некоторая помощь JavaScript. Обычно это делается таким образом: после загрузки вашей страницы браузером запускается специальный сценарий, который проверяет, поддерживает ли браузер определенную возможность.

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

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