Почему не работает HTML5? HTML5 простыми словами
Наверняка, после всего сказанного, у вас появится вопрос «как мне узнать поддерживает ли мой браузер новую версию HTML ?» Это хороший вопрос, требующий скорейшего ответа. Ведь прежде чем тестировать новые возможности, рассматривать новые теги, в первую очередь необходимо узнать, возможно ли это вообще. Например, в HTML 5 существует поддержка видео или графики. Однако нет смысла пробовать внедрить в страничку видео, если оно не поддерживается программно.
К счастью, в Интернете есть хороший ресурс – HTML 5 test . com , который поможет вам в этой ситуации. Он проанализирует данные о вашем браузере и расскажет, какие новые теги версии HTML 5 браузер поддерживает, а какие нет. Также здесь можно посмотреть краткую информацию и о других браузерах, сравнить данные и сделать соответствующие выводы.
К примеру, при тестировании браузера Mozilla Firefox 8.0 для ОС Ubuntu C anonical 1.0 через сайт www.HTML 5 test . com суммарное количество баллов составило 330 (+ 9 бонусных очков) из 475 (табл. 8.1).
Это не так много по сравнению с браузером Google Chrome 16.0, у которого 373 очка (+15 бонусных очков). Но достаточно много по сравнению с браузером Microsoft Internet Explorer 9, у которого всего 141 очко (+ 5 бонусных очков) (табл. 8.2).
В табл. 8.1. приводятся примеры тех нововведений, в которых есть недочеты. Те технологии, которые приведены на английском языке, находятся в разработке или разработаны W 3C . На сайте-анализаторе также есть ссылки на соответствующие страницы. Все остальные моменты, введенные в версии HTML 5, полностью поддерживаются указанным выше браузером.
Таблица 8.1
Данные по браузеру Mozilla Firefox 8.0
|
Нововведение |
Количество баллов/из (+ бонус) |
Что есть |
Чего нет |
|
Видео |
21/31 (+4) |
Видеоэлемент с поддержкой ogg и Вебm |
Нет поддержки mpeg-4, h.264 |
|
Аудио |
20 (+3) |
Аудиоэлемент с поддержкой ogg, pcm и Вебm |
Нет поддержки mp3, aac |
|
Элементы формы |
56/100 |
Для элемента input есть новые типы search, tel, url, email. Новыеэлементыfieldset, datalist, output |
Нетподдержкитиповinput datetime, date, month, week, time, color. Не поддерживаются элементы progress и meter |
|
Общение |
34/36 |
Cross-document messaging |
Server-Sent Events |
|
Взаимодействие с файлами |
10/20 |
Поддржка FileReader API (чтение) |
Нет поддержки FileWriter API (запись) |
|
Хранение данных |
Поддержка сессий и локального хранения |
Нет поддержки связи с sql базами данных |
|
|
Workers |
10/15 |
Веб Workers |
Shared Workers |
|
Уведомления |
0/10 |
Не поддерживается полностью |
|
|
Microdate |
0/15 |
Не поддерживается полностью |
|
|
Доступ к камере |
0/20 |
Не поддерживается полностью |
|
|
Элементы защиты |
0/10 |
Не поддерживаются полностью |
Таблица 8.2
Даные по браузерам
|
Браузер |
Версия |
Баллы (+ бонус) |
|
Google Chrome |
16.0 |
373 (15) |
|
Mozilla Firefox |
330 (9) |
|
|
Opera |
11.60 |
329 (9) |
|
Apple Safari |
302 (7) |
|
|
Microsoft IE |
141 (5) |
В табл. 8.2 приведены данные для браузеров персональных компьютеров. Но, не стоит забывать и о планшетах, и о браузерах в мобильных телефонах, и о старых браузерах, которые также могут использоваться людьми. Данные о них также приведены на указанном выше сайте.
Так или иначе, настоящий веб-разработчик никогда не будет писать программу под какой-то конкретный браузер, понимая, что в других его детище работать не будет. Если, конечно, иное не указано в техническом задании, и если хочется, чтобы работа была видна всем.
Поэтому, если вы решили сделать нечто потрясающее, обязательно ответьте на вопрос «в каких браузерах это будет работать?» и только потом, взвесив все за и против, приступайте к работе .
Теперь, когда вы осознали важность проверки вашего браузера на совместимость с новым стандартом HTML 5, рассмотрим несколько новых возможностей, а именно – взаимодействие с видео- и аудиоинформацией.
Перед изучением новых тегов необходимо ознакомится с инструментами поддержки тегов браузерами. Для проверки тега, можно использовать htmlbook с иллюстрациями:
Поддержка тега center в спецификациях HTML
Видно, что тег
Рекомендация не использовать тег center в коде html5
Таким образом, используя данные ресурсы можно ориентироваться в правильности применения тегов и их поддержке со стороны браузеров.
Рассмотрим новые введенные элементы.
Тег audio
Тег
Если тег не поддерживается, то будет выведено сообщения внутри тега с предложением скачать файл напрямую.
Тег audio не поддерживается вашим браузером.
|
Атрибуты описанные в примере:
- controls – выводят проигрыватель. Если их не указать, то получим играющую музыку без возможности выключения
- autoplay – автоматическое проигрывание после загрузки, не стоит использовать данный атрибут без крайней необходимости
- loop – зациклить проигрывание
Обратите внимание, что внешний вид проигрывателя в разных браузерах разный.
Тег video
Позволяет внедрить на страницу видеопроигрыватель без использования сторонних сервисов. Также, как и тег
Тег video не поддерживается вашим браузером. Скачайте видео.
|
Атрибуты аналогичны тегу
Данный тег используется для создания блоков с видео в виде фона.
Тег canvas
Используется для рисования в HTML5. Применение canvas позволило отказаться от технологии Flash. Рисование производится с помощью JavaScript. Использования тега
Ваш браузер не поддерживает рисование.
|
Тег datalist
Используется для создания «умных» выпадающих списков. Дублирует функционал выпадающего списка, но добавляет к нему возможность поиска пунктов по буквам входящим в слова и введения своего варианта. Идеален для применения к спискам, пункты которых известны заранее.
К сожалению, поддержка браузерами очень ограничена. Более того, на сегодняшний момент браузеры демонстрируют абсолютно разную работу с данным элементом. Пока стоит воздержаться от применения.
Тег details
Позволяет создавать раскрывающийся при клике блок. Используется совместно с тегом
Бендер Родригез
|
Поддержка данного тега – частичная, как следствие, на данном этапе лучше применять решения на основе JS или jQuery.
Тег meter
Используется для визуализации диапазонов величин. Пример применения:
Позволяет задавать минимально, максимальное значение диапазона, значения которые считаются низкими и высокими, текущее значение (value). Возможно управление с помощь JS. Хороший инструмент для простой визуализации.
Тег nav
Тег используется для обозначения главной навигации по сайту. Содержит внутри себя список (хотя могут быть и другие элементы). Пример:
|
Последнее время я стал с завидной регулярностью получать вопросы, сводящиеся к одному: "". Помимо этого, я стал видеть большое количество заказчиков вёрстки, которые требуют, чтобы всё было написано на HTML5 . И чтобы было поменьше таких вопросов и не было таких безграмотных заказчиков (которым всегда радуются всякие мошенники на фрилансе, понимая, что заказчик не смыслит ничего), я и решил ответить на вопрос, почему не работает HTML5 .
Всё очень и очень просто. Поскольку HTML - это клиентский язык, следовательно, он выполняется браузером. Но разработчики браузеров не могут сразу прикрутить все новые теги и возможности, на это нужно много времени, даже очень много.
Из вышесказанного следует, что HTML5 не работает, поскольку он ещё просто не поддерживается браузерами . Но идёт постепенное внедрение данной технологии, и уже сейчас есть достаточно много тегов, которые уже можно использовать. Вы можете проверить, насколько Ваш браузер "продвинут" в HTML5 , здесь: тестирование браузера на поддержку HTML5 . Мой браузер (Firefox 15.0.1 ) набрал 346 очков, что, конечно, очень далеко до полной поддержки. Причём у меня стоит самая свежая версия Firefox . Думаю, у других современных браузеров ситуация не лучше.
Также не надо забывать, что даже, когда через пару лет, все современные браузеры будут полностью поддерживать HTML5 , останется ещё очень большая доля людей, которые будут пользоваться старыми браузерами. Что делать с ними? Чтобы уменьшить количество пострадавших, об HTML5 придётся подзабыть ещё на пару лет. И уже только потом можно будет делать вёрстку с использованием этой технологии.
Надеюсь, теперь Вы поняли, что можно, конечно, изучать HTML5 , но использовать его в полную силу у Вас не получится ни в качестве тренировки, ни в качестве практического использования.
Очень надеюсь, что количество жертв мошенников на фрилансе станет меньше (уж больно у многих написано в портфолио "Верстаю на чистом HTML5 ", что является ложью).
Adobe Flash Player доживает свои последние годы. Данная платформа морально устарела, и разработчики перестанут поддерживать её уже к 2020 году. Многие компании, программисты и энтузиасты уже начали отказываться от проверенного формата в пользу прогрессивных, но ещё «сырых» технологий. Одним из таких новшеств является видеоплейер «HTML5», который, потенциально может заменить старый добрый Флэш Плеер.
Не все пользователи могут похвастаться мощными и современными персональными компьютерами со всеми обновлениями операционной системы (драйвера, кодеки). Не у всех установлена (чем выше версия, тем меньше ошибок при работе). Но всем интересна жизнь, кипящая в глобальной сети Интернет. Тысячи фильмов и сериалов, десятки тысяч клипов, сотни тысяч забавных любительских видеороликов можно найти и посмотреть через всемирную паутину в любой точке планеты Земля.
Если при просмотре видео на компьютере возникают графические искажения, пользователю не стоит расстраиваться и искать альтернативу для просмотра. Первое что надо сделать – это проверить работоспособность своего ПК, все ли обновления, драйвера и кодеки есть и в рабочем состоянии. Второй нюанс – это проверка видеоплейера, встроенного в сам интернет обозреватель Мозила. Разработчики из Mozilla Corporation стараются угодить всем своим фанатам и просто пользователям поисковой системы. Поэтому у каждого есть возможность просмотра видеоизображений через различные плееры: Flash Player или HTML5. Чтобы проверить, какой плеер включён в браузере фаерфокс, достаточно нажать правой кнопкой мыши по экрану с видеорядом.
Как отключить HTML5 в Firefox
Если пользовательский персональный компьютер уступает по техническим характеристикам своим современным собратьям, можно попробовать сменить плеер с HTML5 на Adobe Flash Player. Для этого необходимо зайти в скрытые настройки браузера, набрав в поисковой строке «about:config ». Разработчики любезно предупреждают о рисках, связанных с изменениями в «тонких» настройках. Принимаем ответственность на себя.
В окне «Поиск:», для простоты нахождения для изменения параметров, надо набрать английское слово «media».
Четыре параметра, которые могут быть включены по-молчанию, надо сменить с «true» на «false». То есть выключить их двойным щелчком левой кнопкой мыши.
- media.ogg.enabled
- media.wave.enabled
- media.webm.enabled
- media.windows-media-foundation.enabled
После перезагрузки браузера Mozilla Firefox настройки вступят в силу, и новый плеер HTML5 сменится на Adobe Flash Player.
Как включить HTML5 в Firefox
Если необходимо провести обратную манипуляцию и сменить старый проигрыватель от Adobe на прогрессивный аналог, пользователю нужно провести те же манипуляции с вышеупомянутыми параметрами с «false» на «true». Перезапустив интернет обозреватель, видео должно показывать без помех и сбоев.
