Содержание

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

195

Веб-программирование — HTML5 — Поддержка браузерами HTML5

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

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

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

  • Возможности с поэтапной деградацией. Например, если у старого браузера имеются проблемы с использованием нового элемента <video>, этот элемент позволит вам предоставить браузеру какое-либо другое средство проигрывания например плеер, использующий подключаемый модуль Flash.

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

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

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

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

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

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

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

  1. Сначала выберите вкладку Tables, а потом вкладку Compatibility tables и выберите на ней требуемую вам возможность (или группу возможностей), установив соответствующие флажки:

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

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

Благодаря этому можно «научить» старые браузеры (даже IE6) правильно обрабатывать «неизвестные» HTML элементы.

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

HTML5 определяет восемь новых семантических тегов. Все они являются блоковыми элементами.

Чтобы обеспечить корректное поведение этих HTML элементов в старых браузерах, вы можете установить для них CSS свойство

display в значение block:


header, section, footer, aside, nav, main, article, figure {
     display: block; 
}

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

Также вы можете добавлять в HTML код страницы пользовательские элементы.

В следующем примере добавляется новый HTML элемент <myHero> и определяется для него стиль:


<!DOCTYPE html>
<html>
<head>
   <script>document.createElement("myHero")</script>
   <style>
       myHero {
         display: block;
         background-color: #dddddd;
         padding: 50px;
         font-size: 30px;
       }
   </style> 
</head>
<body>

<h2>Заголовок</h2>
<myHero>Новый элемент myHero</myHero>

</body>
</html>

Выражение document.createElement(«myHero») на JavaScript необходимо для создания нового элемента в IE версии 9 и более ранних версий.

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

Вы можете использовать описанное выше решение для определения всех новых элементов HTML5.

Однако, IE8 (и более ранние версии) не позволяют определять стиль для неизвестных элементов!

Но спасибо HTML5Shiv! HTML5Shiv — плагин JavaScript, позволяющий определять стили элементов HTML5 в браузерах Internet Explorer до версии 9.

Подключение HTML5Shiv

Плагин HTML5Shiv подключается внутри тега <head>.

HTML5Shiv — это JavaScript файл, который подключается в теге

<script>.

Плагин HTML5Shiv следует использовать, когда используются новые элементы HTML5 вроде <article>, <section>, <aside>, <nav>, <footer>.

Последнюю версию плагина HTML5shiv можно скачать с github авторов (https://github.com/aFarkas/html5shiv) или определить ссылку на CDN версию по адресу https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Синтаксис:


<head>
  <!--[if lt IE 9]>
     <script src='/js/html5shiv.js'></script>
   <![endif]-->
</head>

Пример подключения HTML5Shiv

Если вы не хотите или у вас нет возможности скачать на свой сайт файлы плагина HTML5Shiv, то вы можете определить ссылку на его CDN версию.

Скрипт плагина HTML5Shiv должен размещаться внутри тега <head>

Как быстро узнать, поддерживает ли ваш браузер HTML5

4 Январь 2015       Юрий Хрипачев      Главная страница » О софте » Браузеры      Просмотров:   8554

Приветствую Вас на своем блоге!
Стандарт HTML5 уверенно занимает лидирующие позиции при создании новых сайтов и веб страниц. И это понятно, он открывает новые возможности для веб разработчиков, а также немного изменился синтаксис языка HTML. К примеру, можно создавать закругленные углы у элементов уже с помощью css3, а не фотошопа.

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

Для того, чтобы узнать, как хорошо браузер поддерживает HTML5, нужно просто перейти на сайт:

http://html5test.com/

И открыв этот сайт в браузере, вы сразу увидите, что может браузер, а что нет при отображении страницы написанной по стандарту HTML5.
Ниже я приведу пример проверки некоторых популярных браузеров.

Лидер этого списка Google Chrome:

39 версия браузера показала 508 очков из 555 возможных.

Далее идет Opera 26 версии, 504 очка. Не удивительно, ведь она на одном движке с Хромом.

Firefox 34 версии набрал 475 очков.

Далее я проверил стандартный браузер Windows, Internet Explorer.
Как и ожидалось, восьмая версия, что идет в комплекте с Windows 7, почти не понимает HTML5 и страницы написанные в этом формате на нем смотреть практически не возможно.
Лично я совсем не пользуюсь этим браузером и не понимаю, что в нем находят некоторые пользователи, это полное барахло.

Всего 43 очка из 555, кому этот браузер нужен?

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

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

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

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

С уважением Юрий Хрипачев.

    Метки: браузеры     

О поддержке HTML5 видео в современных браузерах / Хабр

Свершилось то, чего многие ожидали — крупнейшие видеосервисы (YouTube, Vimeo) предоставили в режиме бета-тестирования возможность воспроизводить ролики средствами HTML5. Казалось бы, всё прекрасно, и Flash-у пора уйти на заслуженный покой. Ан нет — оказалось всё не так гладко.

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

На звание кодека для HTML5 video в данный момент претендуют два кодека — Ogg Theora и H.264.
Ogg Theora

В основе Ogg Theora лежит кодек VP3, разработанный On2 Technologies. В 2002 году, On2 Technologies передали код VP3 под свободной BSD-подобной лицензией в руки Xiph.org Foundation, а также отказались от патентов на кодек (технически, не отказались, а просто передали право их использовать всем, но это по сути то же самое). С тех пор, Xiph.org продолжает развитие этого кодека.

Использовать Ogg Theora можно везде, всегда, без лицензионных или патентных отчислений.

H.264

H.264 — это лицензируемый стандарт сжатия видео. Его использование требует платы в странах, где действует патенты на него (в первую очередь, это США). Однако, на сегодняшний день, это один из самых лучших способов сжимать видео. Именно H.264 является стандартом де-факто сжатия HD-видео, к примеру. H.264 заметно эффективнее Ogg Theora по соотношению качество/битрейт.

Если кратко, H.264 — лучше, но даже его open-source реализации не могут быть использованы свободно в странах, где действуют патенты на него.

Реализации в современных браузерах

Здесь я упоминаю только те браузеры, в которых HTML5 video работает уже сейчас.
Mozilla Firefox

Реализация использует библиотеку liboggplay, а это означает, что могут использоваться только Ogg Theora для видео и Ogg Vorbis для аудио. Т.е. кодек фиксирован, и чтобы сделать поддержку чего-то ещё, нужно по сути переписать реализацию.
Google Chrome

Реализация использует статически привязанный ffmpeg. ffmpeg поддерживает кучу разных кодеков, включая и Ogg Theora, и H.264, и вообще практически всё, что сейчас реально используется.

К слову, ffmpeg в данный момент используется почти повсеместно — например, в CCCP и K-Lite Codec Pack, а также в mplayer и VLC используется именно ffmpeg.

Казалось бы, всё замечательно. Но! ffmpeg, хоть и open source, не может быть свободным в США. Для распространения программы, использующей ffmpeg, нужно платить отчисления. Google себе это может позволить, и имеет право выпускать билды со встроенным ffmpeg. Но совсем не такая ситуация с дистрибутивами Linux. Те из них, что выпускаются в США, не смогут включить в свои репозитории Chrome с поддержкой ffmpeg, так как это потребует платы отчислений. В первую очередь это касается такого небезызвестного дистрибутива, как Fedora.

Safari

Использует фреймворк QuickTime, что позволяет воспроизводить что угодно, если установлен соответствующий QuickTime-кодек.

Наверное, из современных реализаций эта наиболее правильная, т.к. имеет модульную архитектуру изначально. Но это всё сильно завязано на Mac OS, поэтому к остальным системам и браузерам неприменимо.

Суровая реальность

Теперь поговорим о поставщиках контента. Свобода, равенство, братство — это всё хорошо в теории, но на практике вопрос решается небольшими зеленоватыми бумажками с портретами американских президентов. Google-у как-то проще заплатить за лицензию на более эффективный кодек, чем платить больше за трафик, и место на серверах. Мало того, учитывая то, что у них и так всё видео хранится в H.264, было бы особенно глупо (с точки зрения бизнеса, естественно), перекодировать это всё в Ogg Theora. Так что решение использовать H.264 — это абсолютная, экономически оправданная, жизненная необходимость. YouTube не станет использовать Ogg Theora. Не выгодно. Точка.

А мало того, использование H.264 выгоднее и нам, конечным пользователям. Мы же не платим лицензионные отчисления, а, тем не менее, получаем лучшее качество видео при меньшем количестве загруженных данных (привет жителям не-столиц с хилыми каналами в интернеты).

Всё плохо?

Сейчас — да. Но! Есть выход. Для декодирования видео в браузере нужно использовать модульный подход, не привязываясь к определённому кодеку. Мало того, в каждой операционной системе уже и так есть модульная инфраструктура кодеков. В Windows — это DirectShow, в Mac OS X — это QuickTime, в Linux — это gstreamer. А gstreamer ещё и кроссплатформенный, между прочим, и уже используется в кроссплатформенных программах, к примеру, Songbird для воспроизведения музыки использует именно gstreamer на всех платформах.

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

А мало того, в gstreamer предусмотрена возможность использовать кодеки, установленные в родном для данной системы фреймворке (для Windows — DirectShow, для Mac OS — QuickTime).

Светлое будущее, наступит ли оно?

Mozilla Firefox

Собственно, вот. Но, судя по комментариям там, сейчас такая интеграция планируется только для Fennec. Честно говоря, я искренее недоумеваю по этому поводу. Поддержка H.264 для Firefox нужна, и быстро, иначе есть большой риск остаться за бортом.

Я не знаю, как довести до разработчиков Firefox мысль о том, что модульная архитектура необходима прямо сейчас. Всё, что пришло в голову — проголосовать за этот баг, и оставить отзыв о неработающем веб-сайте (Help — Report Broken Web Site…) по адресу youtube.com/html5 со ссылкой на этот баг.

Google Chrome

Беда. Я пытался вникнуть в причину отказа, но она мне показалось не слишком веской. В принципе, тут нечего добавить. Можно почитать обсуждение, оно довольно жаркое. Ещё можно проголосовать за этот баг (отметить звёздочкой). Мало ли…
Opera

Внезапно, маленькая, но очень упорная, норвежская компания показывает себя с очень хорошей стороны. Читаем, радуемся.
Другие браузеры

Неповоротливые гиганты легко могут оказаться позади маленьких, почти не используемых в широких массах браузеров, таких как Epiphany, Midori, Aurora. Все они используют WebKit. Epiphany и Midori используют GtkWebKit, в нём планируется (или уже сделана) поддержка HTML5 video через gstreamer. Aurora использует QtWebKit, в нём для HTML5 планируется (или уже частично сделано) использование Phonon, который, с свою очередь, может использовать разные бэкэнды, в том числе и gstreamer.

Однако, на текущий момент, ни в одном из них работающей поддержки HTML5 нет. Остаётся верить в их скорое светлое будущее, ведь оно вполне реально.

Вместо послесловия

Искренне надеюсь, что именно 2010 год станет годом смерти Flash, и триумфа HTML5.

Поддержка HTML5 популярными браузерами

Привет всем посетителям и подписчикам блога 4remind.ru. Многие из вас знают, что стремительными темпами интернет наполняется сайтами, блогами и прочими ресурсам, созданными на основе 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, так и его сайта). Вы точно не пожалеете, если даже этот браузер не будет вашим основным, и больше зауважаете китайцев, его создателей 🙂

Ссылка на сайт Maxthon: http://ru.maxthon.com/

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

Последнее обновление: 08.04.2016

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

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

Что именно привнес HTML5?

  • HTML5 определяет новый алгоритм парсинга для создания структуры DOM

  • добавление новых элементов и тегов, как например, элементы video, audio и ряд других

  • переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:

  • HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4

  • HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Кто отвечает за развитие HTML5? Этим занимается World Wide Web Consortium (сокращенно W3C — Консорциум Всемирной Паутины) — независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/. И надо отметить, что организация продолжает работать над HTML5, выпуская обновления к спецификации.

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

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

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

Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com.

Необходимые инструменты

Что потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++, который можно найти по адресу http://notepad-plus-plus.org/. К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду ориентироваться именно на этот текстовый редактор.

Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code. Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.

И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров — Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

А насколько хорошо ваш браузер поддерживает HTML5? |

Все мы наслышаны новой версией спецификации языка HTML5. Но знаем ли мы насколько хорошо HTML 5  поддерживается нашим браузером, а на сколько остальными? Буквально сегодня я наткнулся на интересный ресурс, который поможет нам получить ответы на все вопросы по поддержке браузером языка HTML5.

А насколько хорошо ваш браузер поддерживает HTML5?

Начнем наше ознакомление с ресурсом по анализу поддержки HTML5 браузером:

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

 

 

Итак давайте немного разберемся с интерфейсом:

html5test-1st-view

 

В самом верху  у нас есть три вкладки:

1) Ваш браузер (на ней мы сейчас находимся) – выводить подробную статистику поддержки HTMl5 вашим браузером.

2) Другие браузеры, перейдя по этой вкладке мы можем посмотреть статистику по другим браузерам и их поддержкой спецификации языка HTMl5.

3) Сравнить – перейдя по этой вкладке ми можем добавить к сравнению между собой другие браузеры, в плане их поддержке спецификации языка HTMl5.

 

Большие цифры  показывают количество очков, которые набрал ваш браузер в результате прохождение теста по поддержке  языка HTMl5. Максимальное значение 555.

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

Цветные блоки содержат в себе ссылки для: 1. Сохранения результата тестирования; 2. Перехода на страницу сравнения с другими браузерами; 3. Зашарить ваш результат в сети; 4. Помочь проекту деньгами.

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

html5test-main

 

Так как основная часть сайта достаточно длинная и чтобы облегчить поиск нужного раздела, в правом верхнем углу сайта есть иконка меню, которая выводить сайдбар с удобной навигацией по разделам:

html5test-sidebar

Как мы видим в каждом блоке есть пункты – составляющие этого блока, например в блоке Eements  представлены новые теги HTML5, перейдем в подраздел Section elements и нажмем на section element, появится всплывающее окошко с информацией, в нем меня порадовало наличие двух ссылок на описание текущего элемента в спецификации HTML5:

html5test-links

 

Перейдя по ссылкам можно почитать рекомендации к использованию новых элементов:, лично для себя нахожу этот момент одним из самых полезных на этом ресурсе 🙂

specification

 

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

Теперь пара слов о вкладках, которые мы обозначили в самом начале.

Статистика  поддержки HTML5 разными версиями современных браузеров

Во второй вкладке мы можем наблюдать интересную статистику поддержки HTML5  разными браузерами.

html5-test-browsers

Обратите внимание что есть вкладки в которых браузеры сгруппированы по типам устройств (ПК, планшет, телефон и др.)

Также меня порадовал график динамики обновления версий браузеров, соответственно динамик работы над поддержкой и самого языка HTML5.

html5test-timeline

 

 

Сравнение разных браузеров в плане  поддержки HTML5

Последняя вкладка дает нам возможность сравнить разные версии браузеров между собой в области поддержки ими нововведений HTML5.

html5test-compare

При добавлении версии браузера обратите ваше внимание для какого устройства этот браузер, т.к. все устройства в одном списке.

Выбрав нужные версии, у вас получится сравнительная таблица браузеров по поддержке ими HTML5

html5test-compare-browsers

 

Обратите ваше внимание на вкладку Features, в ней вы можете сделать сравнительную таблицу поддержки браузерами определенных свойств языка HTML5

 

 

html5test-compare-features

 

На этом я пожалуй завершу свой обзор, очень надеюсь, что он будет вам полезен 🙂

 

Если у вас остались вопросы, пишите их в комментариях к посту, буду рад пообщаться с вами!

Поддержка браузера HTML5 и результаты тестирования браузера HTML5

Поддержка браузера HTML5 приобретает все большее значение с увеличением числа приложений HTML5 и веб-сайтов HTML5 . Поскольку HTML5 вводит новые стандарты HTML, новые API и новые функции, которые делают веб-страницу удивительной и интерактивной, разработчики HTML в ближайшем будущем предпочтут больше создавать веб-сайты с использованием HTML5. Чтобы проверить возможности HTML5 вашего любимого веб-браузера, вы можете посетить веб-сайт HTML 5 Test.Он предоставляет HTML5-браузер, тест . Он подготовит карточку оценки поддержки браузера HTML5 для вашего интернет-браузера, и вы сможете увидеть, какие функции HTML5 отсутствуют в вашем браузере. Вы также можете сравнить результатов поддержки HTML5 с результатами других веб-браузеров.

Вот поддержка браузера HTML5 . баллов, показывающих, насколько хорошо установлен браузер, поддерживающий функции HTML5 и API, на основе значений из http: // html5test.com /

Первое место по поддержке HTML5 среди установленных веб-браузеров на моем портативном компьютере с ОС Windows 7 занимает веб-браузер Maxthon . Веб-браузер Maxthon имеет наивысший балл в тестах HTML5 с указанием поддерживаемых функций и API. Интернет-браузер Maxthon также является основным браузером, который я использую при программировании приложений HTML5 именно по этой причине.


Maxthon имеет наивысший балл в тестах поддержки браузера HTML5

Я не использую браузер Google Chrome Canary, потому что он все еще находится в стадии бета-тестирования.Но даже со своими бета-сборками Canary даже обходит Maxthon и остается на первом месте с наивысшим показателем поддержки HTML5 среди всех браузеров.


Поддержка браузера Google Chrome HTML5 также очень высока по сравнению с другими инструментами интернет-браузера.


Новый веб-браузер Яндекс имеет хорошие показатели поддержки HTML5, достигнутые в версии браузера Яндекс 1.1.


Оценка поддержки Firefox HTML5 на компьютере с Windows 7 может считаться средней оценкой в ​​тесте браузера, даже если она увеличилась с последней версией Firefox 19.0 обновление веб-браузера


Результат тестирования браузера Opera для поддержки браузера HTML5


Хотя Microsoft недавно выпустила IE10 для Windows 7, Internet Explorer 10 для Windows 7 имеет средние результаты тестов поддержки браузера HTML5. На самом деле, этот результат для Internet Eexplorer 10 для Windows 7 действительно разочаровал меня в результате поддержки HTML5. Я ожидал лучшей поддержки HTML5 и совместимости с HTML5 от Internet Explorer 10 после того, как его предварительная версия набрала 313 баллов.Стоимость обновления между предварительной и финальной версией Internet Explorer в Windows 7 составляет всего с 313 до 320 баллов.


Результаты тестирования поддержки Safari HTML5 на ПК с Windows 7

Несмотря на то, что результаты тестирования Internet Explorer 9 IE9 с поддержкой HTML5 не очень хороши, я знаю (еще не добавлен здесь), что Internet Explorer 10, работающий в операционной системе Windows 8, имеет гораздо более хорошую поддержку языка разметки гипертекста HTML5.


Результаты тестирования Internet Explorer 9 IE9 HTML5 ниже, чем у всех основных веб-браузеров.В Internet Explorer IE9 в поддержке HTML5 отсутствуют многие функции HTML5.

Напоследок, Maxthon стал победителем в этом тесте поддержки браузера HTML5. С другой стороны, Internet Explorer 9 (IE9) не прошел этот тест браузера HTML5.

.

Насколько хорошо ваш браузер поддерживает HTML5?

Технические характеристики

Почему вы включаете спецификации, не являющиеся частью HTML5?

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

Многие из связанных спецификаций когда-то были частью HTML5. При разработке спецификации они были перенесены в отдельные спецификации.

Но WebGL даже не является спецификацией W3C!

W3C — не единственная организация, которая создает открытые спецификации для Интернета.Спецификация WebGL опубликовано Kronos, той же группой, которая также отвечает за OpenGL. WebGL связан с HTML5, хотя и указана как одна из технологий HTML5 на странице логотипа W3C HTML5. Спецификация W3C HTML5 позволяет Элемент холста будет расширен новыми методами рисования, и WebGL является одним из них.

Почему вы тестируете Web SQL?

Спецификация Web SQL устарела и заменена спецификацией IndexedDB.Однако это до сих пор широко используется на мобильных телефонах, и по крайней мере три поставщика предоставили настольные браузеры, поддерживающие Web SQL. Мы решили включить это спецификация, но сделайте это особым случаем. Web SQL оценивается в 5 баллов, но только если IndexedDB не поддерживается. IndexedDB стоит 10 баллов. Если браузер поддерживает оба варианта, начисляется только 10 баллов. Таким образом браузеры которые включены только IndexedDB, не наказываются, но браузеры, поддерживающие только Web SQL, получают некоторые баллы.

Подсчет очков

Какое максимальное количество очков вы можете набрать?

Если браузер пройдет все тесты, он получит максимальный балл 555. Назад версии HTML5test имели меньше тестов и, следовательно, также более низкий максимальный балл, такой как 160, 300, 450, 475 и 500 баллов. Предыдущие версии этого теста также давали бонусные баллы за некоторые функции, но начиная с версии 5, мы больше не делаю.

Подсчет очков кажется произвольным, кто решает, сколько очков будет начислено?

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

Отчетность

Можно ли добавить мой браузер на страницы «Другой браузер» и «Сравнение»?

Мы хотели бы добавить новые браузеры, но не все браузеры подходят для этого.Прежде всего, мы принимаем только те браузеры, которые общедоступны в виде бета-версии или финальной версии. Мы не принимаем оценки за сборки для внутренней разработки. Во-вторых, мы принимаем только те браузеры, которые доступны на английском языке. Мы хотим проверить браузеры перед их включением и к сожалению, мы не говорим на китайском, японском, корейском или русском языках. И, наконец, мы принимаем только те браузеры, у которых есть уникальный счет. Есть много браузеров, которые являются форками или модифицированными версиями Chromium или Firefox.Аналогично там Есть много браузеров, в которые встроен Internet Explorer или Webkit, как это предусмотрено операционной системой. Этот браузер не подходят. Для сравнения просто выберите исходный браузер, на котором он был основан.

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

Что происходит, когда браузер обманывает?

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

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

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

Методы

Почему вы используете анализатор браузера?

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

Пожалуйста, откройте новый выпуск на Github, если вы считаете, что браузер должен быть включен в белый список.

Конфиденциальность

Какие данные собираются от посетителей?

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

Мы не храним файлы cookie в вашем браузере, но мы используем несколько внешних компонентов, которые: в том числе: Google Analytics, BuySellAds, Facebook, Twitter и Google+.

.

Таблица совместимости браузера HTML 5 — HTML 5 в старых браузерах?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

HTML5 — веб-технология для разработчиков

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

Разработанная для использования всеми разработчиками Open Web, эта справочная страница содержит ссылки на многочисленные ресурсы о технологиях HTML5, разделенных на несколько групп в зависимости от их функций.

  • Semantics : позволяет более точно описать ваш контент.
  • Возможности подключения : позволяет взаимодействовать с сервером новыми и инновационными способами.
  • Автономный режим и хранилище : позволяет веб-страницам хранить данные на стороне клиента локально и работать в автономном режиме более эффективно.
  • Мультимедиа : создание видео и аудио для первоклассных граждан в открытой сети.
  • 2D / 3D-графика и эффекты : расширяет спектр возможностей презентации.
  • Производительность и интеграция : обеспечение большей оптимизации скорости и лучшего использования компьютерного оборудования.
  • Доступ к устройству : позволяет использовать различные устройства ввода и вывода.
  • Стиль : позволяет авторам писать более сложные темы.

Семантика

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