Какие браузеры поддерживают HTML5
Обновлено: 04.07.2024
Браузер — это основной инструмент в Интернете. Поэтому для программирования на HTML5 и CSS3 у вас должны быть практические знания, потому что все ваши пользователи просматривают вашу страницу в том или ином браузере.
Microsoft Internet Explorer 10
Microsoft Internet Explorer (IE) остается доминирующим игроком в Интернете. Проводник по-прежнему чрезвычайно распространен, поскольку он устанавливается вместе с Microsoft Windows. Конечно, он также работает исключительно с Microsoft Windows. Mac и Linux не поддерживаются.
Версия 10 IE наконец-то соответствует основным требованиям стандарта HTML5. Если вы пишете страницы в соответствии с версией HTML5, вы можете ожидать, что ваша страница будет хорошо работать в IE10. Большинство функций также будут работать в IE9, но не все.
Старые версии Internet Explorer
Ранние версии IE по-прежнему чрезвычайно важны, потому что на многих компьютерах еще не установлено 10. Версия 6 какое-то время была доминирующим игроком в Интернете, и она отказывается умирать. Однако он не соответствует современным стандартам, поэтому большинство разработчиков считает его устаревшим.
Мозилла Фаерфокс
Firefox — это значительное улучшение IE с точки зрения программиста по следующим причинам:
Улучшенный просмотр кода: если вы просматриваете HTML-код страницы, вы видите код в специальном окне. Код имеет подсветку синтаксиса, что облегчает его чтение. Некоторые версии IE отображают код в Блокноте, что сбивает с толку, потому что вы думаете, что можете редактировать код, но вы просто редактируете копию.
Улучшенная обработка ошибок: вы будете делать ошибки. Как правило, Firefox лучше указывает на ошибки, чем IE, особенно когда вы начинаете использовать JavaScript и другие передовые технологии.
Отличные расширения. В Firefox есть несколько замечательных расширений, которые значительно упрощают веб-разработку. Эти расширения позволяют изменять код на лету, автоматически проверять код и динамически исследовать структуру страницы.
Многоплатформенная поддержка: IE работает только в операционной системе Windows, поэтому он недоступен для пользователей Mac или Linux. Даже если вы являетесь разработчиком только для Windows, ваши пользователи могут использовать что-то еще, поэтому вам нужно знать, как другие браузеры видят вещи.
Веб-кит/сафари
Браузер по умолчанию для Mac и операционной системы iPhone/iPad (iOS) называется Safari. Это мощный браузер, построенный на движке рендеринга WebKit. Safari был разработан с учетом соответствия стандартам и скорости. Пользователи Mac и iOS почти наверняка будут использовать Safari, поэтому вам следует кое-что об этом знать. Chrome также использует WebKit, поэтому, если в Chrome все идет хорошо, вы, скорее всего, не против своих пользователей Apple.
Google Chrome
Google видит будущее вычислений в браузерных приложениях с использованием технологий AJAX. Браузер Chrome чрезвычайно быстр, особенно в технологии JavaScript, которая служит основой этой стратегии. Кроме того, в Chrome есть ряд наборов инструментов для разработчиков, что делает его любимым браузером для многих веб-разработчиков. Вот основные моменты:
Редактирование страницы в режиме реального времени. Вы можете перейти на любую веб-страницу, щелкнуть правой кнопкой мыши «проверить этот элемент» и изменить текст этого элемента в режиме реального времени. Затем вы можете увидеть, как выглядит элемент с новым содержимым. Вы можете выбрать часть страницы, чтобы увидеть, какая страница соответствует коду, или вы можете выбрать код и посмотреть, какую часть страницы представляет этот код.
Контур страницы. Хорошо продуманная веб-страница создается в виде контура с различными элементами, вложенными друг в друга. Представление элементов позволяет вам просматривать веб-страницу в этом формате с возможностью сворачивания и развертывания элементов, чтобы четко увидеть структуру вашей страницы.
Редактирование CSS в реальном времени. Когда вы узнаете, как применять стили CSS, вам захочется увидеть, как различные правила CSS изменяют вашу страницу. В представлении «Проверить элемент» вы можете выделить часть своей страницы и изменить CSS, наблюдая за тем, как изменение повлияет на вашу страницу в режиме реального времени.
Вкладка «Сеть». Эта функция позволяет вам узнать, сколько времени требуется для загрузки каждой части вашей страницы. Это может быть полезно для устранения неполадок, связанных с медленной загрузкой страницы.
Просмотр источников: позволяет увидеть полный код вашей страницы. Это особенно полезно, когда вы начинаете программировать на JavaScript, поскольку включает в себя мощный набор инструментов для отладки.
Консоль. Представление консоли представляет собой небольшой инструмент командной строки, интегрированный непосредственно в ваш браузер. Это может быть очень полезно, потому что часто показывает ошибки, которые в противном случае скрыты от глаз. Консоль наиболее полезна при использовании JavaScript.
Другие известные браузеры
Firefox и IE — крупные игроки в мире браузеров, но они, безусловно, не единственные браузеры, с которыми вы столкнетесь.
Опера
Веб-браузер Opera, один из первых браузеров, соответствующих стандартам, является технически надежным браузером, который никогда не использовался широко. Если вы создаете свои страницы со строгим соблюдением требований, у пользователей Opera не будет проблем с доступом к ним. Opera очень хорошо совместима с HTML5. На многих игровых консолях и мобильных устройствах есть браузеры на базе Opera, так что вам стоит присмотреться.
Веб-кит/сафари
Apple включает веб-браузер во все последние версии Mac OS. Текущее воплощение — Safari — отличный браузер, соответствующий стандартам. Изначально Safari был разработан только для Mac, но доступна и версия для Windows. Платформа WebKit, основа для Safari, используется в ряде других онлайн-приложений, в основном на Mac. Модифицированная версия Safari является основой браузеров для iOS.
Текстовые браузеры
Некоторые браузеры, которые вообще не отображают графику (например, Lynx), предназначены для старых интерфейсов командной строки. Хотя эти браузеры кажутся неуместными, они невероятно быстры, потому что не отображают графику. Слуховые браузеры читают содержимое веб-страниц. Изначально они предназначались для людей с нарушениями зрения, но часто ими пользуются и люди без инвалидности. Fire Vox — это вариант Firefox, который читает веб-страницы вслух.
Об этой статье
Эта статья взята из книги:
Об авторе книги:
Энди Харрис сам научился программировать, потому что это было весело. Сегодня он преподает информатику, разработку игр и веб-программирование в университете; консультант по технологиям в штате Индиана; помог людям с ограниченными возможностями создать свои собственные компании по веб-разработке; и работает с семьями, которые хотят обучать компьютеру дома.
С момента окончательной доработки в октябре 2014 года HTML5 изменил способ предоставления в Интернете мультимедийных материалов. Новый тег позволяет веб-разработчикам добавлять видео на веб-сайты без использования плагинов. Flash, который был доминирующим видеоплагином в раннем Интернете, быстро теряет свою популярность, в основном из-за того, что он истощает ресурсы, неудобен для пользователя и не имеет специальных возможностей.
Надлежащая совместимость с HTML5 необходима для того, чтобы браузеры правильно отображали специальные возможности. Браузеры будут различаться тем, какие именно специальные возможности они поддерживают, насколько хорошо они работают и насколько они удобны для людей с ограниченными возможностями.
Какие функции необходимы для обеспечения доступности видео в формате HTML5?
Функции, которые делают видео в формате HTML5 более доступным для людей с ограниченным слухом, зрением или ловкостью, включают:
- Элементы управления с клавиатуры для навигации по видео без использования мыши.
- Четкое обозначение элементов и элементов управления для чтения с экрана.
- Сильный цветовой контраст текста на фоне для удобства чтения зрителями со слабым зрением или дальтониками.
- Скрытые титры, отражающие речь и основные звуковые эффекты для пользователей, которые не слышат звук.
- Аудиоописание в виде текстовой дорожки, описывающей основные визуальные эффекты в видео, которую может прочитать вслух программа чтения с экрана.
Примечание. В настоящее время ни один веб-браузер не поддерживает звуковое описание в качестве звуковой дорожки в HTML5. Тем не менее, платформа доступна для поддержки в будущих версиях.
Какой интернет-браузер лучше всего поддерживает видеоплееры HTML5?
Вот разбивка, во многом благодаря специалисту UW Tech по доступности Терриллу Томпсону за его подробный пост в блоге по этой теме.
Интернет-обозреватель
Самым надежным браузером для поддержки специальных возможностей HTML5 является Internet Explorer (IE) версии 10. IE поддерживает скрытые субтитры, принимая форматы субтитров WebVTT или TTML.
Браузер предлагает навигацию по элементам управления проигрывателем с помощью вкладок даже в полноэкранном режиме и имеет четкие описательные метки.
Самая интересная часть?
IE позволяет регулировать скорость воспроизведения, поэтому вы можете воспроизводить видео быстрее или медленнее, чем в реальном времени. Просто щелкните видео правой кнопкой мыши и выберите скорость воспроизведения. Эта привилегия отлично подходит для среднего зрителя и особенно полезна для людей с ограниченными возможностями обучения, когнитивными нарушениями или просто не является носителем языка, на котором показано видео.
Google Chrome
Chrome добился значительного прогресса, но все еще имеет некоторые проблемы с доступностью:
Некоторые функции неудобны для доступа с клавиатуры.
Требуется подключаемый модуль (ChromeVox) для доступа с помощью программы чтения с экрана.
Chrome отреагировал на жалобы пользователей на ошибки в субтитрах. Например, символ «CC» не будет отображаться на панели управления, если вы не включили «по умолчанию» в свою дорожку субтитров. С тех пор Chrome исправил эту ошибку.
Мозилла Фаерфокс
У Firefox есть некоторые преимущества и некоторые недостатки в отношении доступности медиаплеера. Почти все элементы управления плеером в Firefox доступны с клавиатуры (за исключением полноэкранного режима). Элементы управления имеют метки, но не описания.
Скрытые титры работают в Firefox с некоторыми ошибками. Одна известная ошибка в аудиофайлах в теге видео закрывает отображение субтитров. Firefox также страдает от прежней ошибки Chrome, которая требует «по умолчанию» в дорожке, чтобы отобразить опцию заголовка.
Самая большая проблема доступности, на которую указывали пользователи, — это плохой контраст цветов элементов управления. На изображении ниже показан снимок экрана с дисплеем управления при наведении указателя мыши на медиаплеер в Chrome, Firefox и Internet Explorer. Обратите внимание, что в Firefox используется мелкий и тонкий шрифт с серым тестом на сером фоне.
Сафари
Safari версии 5 не поддерживает ни субтитры, ни средства чтения с экрана Windows. В Safari 6 отсутствуют элементы управления с клавиатуры, и в нем возникают те же ошибки с субтитрами, что и в Chrome.
Опера
Медиаплеер HTML5 в Opera несовместим с программами чтения с экрана. Субтитры WebVTT поддерживаются, но содержат ошибки.
Самое большое преимущество? Управление с помощью клавиатуры.
На данный момент это состояние доступности браузера для видео HTML5. Явным победителем на данный момент является Internet Explorer.
HTML5 — это новейшая спецификация HTML, языка, который браузеры используют для отображения веб-страниц. HTML5 имеет много новых функций, предназначенных для упрощения создания веб-сайтов и повышения удобства использования этих веб-сайтов. Среди этих функций множество усовершенствований веб-форм.
Поддержка функций веб-форм HTML5 улучшается, но не все веб-браузеры одинаково поддерживают функции HTML5. Эта страница предназначена для изучения этих новых новых функций и поможет вам понять, какие браузеры поддерживают какие функции и в какой степени. В целом это представляет текущее состояние форм HTML5. Но даже если вам по-прежнему необходимо поддерживать старые браузеры, которые не поддерживают все новые функции, осознайте, что веб-формы HTML5 — это усовершенствование: вы можете использовать все новые атрибуты и типы ввода, и ваша форма по-прежнему будет работать в устаревших браузерах.
В приведенных ниже диаграммах перечислены самые последние версии всех основных браузеров. Отдельные страницы (например, страница для заполнителя) показывают прошлую поддержку браузера.
Поддержка браузерами новых типов ввода HTML5
Все новые типы ввода поддерживаются во всех браузерах, поскольку они будут отправлять свои данные, как если бы это был «текстовый» ввод. Эти оценки основаны на том, делают ли они что-то сверх того и/или проверяют тип данных, относящихся к ним.
Поддержка браузером новых входных атрибутов HTML5
Поддержка браузером новых элементов формы HTML5
Формы JavaScript и HTML5
Тестирование поддержки
Если вы намеревались написать JavaScript для имитации функциональности форм HTML5, вы можете сначала протестировать возможности текущих браузеров и написать JavaScript в качестве запасного варианта. Ниже описано, как вы можете протестировать поддержку атрибутов. Более точное тестирование функций можно выполнить с помощью превосходной библиотеки JavaScript Modernizr.
Пользовательские сообщения о проверке
Вы можете переопределить сообщения об ошибках действительности по умолчанию с помощью JavaScript
Еще больше удовольствия от JavaScript
HTML5 имеет ряд полезных методов JavaScript для управления формами.
Формы CSS и HTML5
Псевдоклассы
CSS3 содержит ряд новых псевдоклассов, которые могут выбирать элементы формы, находящиеся в определенных состояниях.
Селектор :not() не относится к формам, но полезен для таких селекторов, как :not([type=submit]), для выбора всех входных данных, кроме кнопок отправки.
Псевдоселектор :valid выберет элемент легенды набора полей, который содержит допустимый ввод в Safari 5.
Селекторы атрибутов
Селекторы атрибутов помогают выбирать элементы, содержащие определенные атрибуты. Поскольку формы HTML5 имеют много новых входных атрибутов, это может быть полезно для их таргетинга.
Специальные стили поставщиков
Есть несколько визуальных аспектов форм HTML5, которые могут быть неочевидны при стилизации с помощью CSS. Например, текст-заполнитель или как бороться со стилем поиска WebKit по умолчанию. Несколько фрагментов такого рода справа.
За последние несколько лет HTML5 превратился из мифического создания в яркую реальность и получил свою долю оценок со стороны скептиков и экспертов в отношении его готовности и жизнеспособности. Теперь, в 2012 году, HTML5 готов к использованию во всех современных браузерах, включая IE9. Кроме того, он был разработан для плавной деградации даже без помощи JavaScript или сброса CSS.
Даже при этом вы можете быть обеспокоены обеспечением полной обратной совместимости или не уверены, что будет работать в одном браузере, а не в другом. HTML5 обычно обвиняют в проблемах, связанных с jQuery и CSS3, как новыми технологиями, так и стандартами, развивающимися вместе с HTML5, но на самом деле не являющимися его частью. Чтобы получить представление о совместимости браузеров с HTML5, вы должны сначала понять, как браузеры воспринимают каждый из этих языков.
HTML5 против CSS3
HTML5 — это пересмотренная версия спецификации HTML-разметки, содержащая ряд рекомендаций и правил, с помощью которых производители браузеров и веб-разработчики могут найти общий язык. Впервые он был разработан и принят W3C в 2006 г., закрыт в 2009 г. и признан готовым к использованию, а полное одобрение кандидата, вероятно, произойдет в этом году. Он содержит новые элементы макета, которые вы, вероятно, уже видели, такие как , и . Он удаляет поддержку презентационных тегов и атрибутов, но вводит поддержку собственных функций браузера, таких как воспроизведение мультимедиа и автономное хранение. CSS3, с другой стороны, является отдельной спецификацией, которая все еще находится в активной редакции, и поэтому не все браузеры полностью поддерживают новые селекторы.
Обе эти спецификации направлены на то, чтобы вывести веб-разработку на более семантическое и осмысленное место с точки зрения создания набора простых для понимания стандартов, которые должны хорошо работать друг с другом. Поскольку HTML5 не привязан к CSS3, его можно использовать в самых разных приложениях, не страдая от проблем совместимости, которые могут возникнуть в некоторых передовых селекторах CSS3.
Примирение
Мы все слышали эти термины несколько раз, но концепция плавной деградации, прогрессивного улучшения, обратной совместимости и поддержки браузера может показаться полной ерундой, если вы новичок в дизайне или большую часть времени сосредоточены на дизайне внешнего интерфейса. . К счастью, на эти темы написано много, и было создано несколько очень полезных инструментов, облегчающих нам задачу. Давайте начнем с основ того, что это такое.
Так ли важна совместимость браузера?
Я видел, как дизайнеры утверждают, что нет смысла тратить ненужную энергию на поддержку устаревших браузеров. Зачем беспокоиться, если на современные браузеры WebKit приходится почти 75% всего использования браузеров? К сожалению, трудно убедить клиентов, которые хотят охватить как можно больше зрителей или поддержать аудиторию, которая зависит от старых технологий. Большая часть мира по-прежнему не имеет финансовых ресурсов или технических возможностей для модернизации. Вы также должны учитывать пользователей с потребностями в специальных возможностях. HTML5 и CSS3 устраняют огромный разрыв в совместимости, пытаясь стандартизировать то, как браузеры отображают веб-страницы, что со временем уменьшит дополнительные усилия, затрачиваемые на разработку решений совместимости в дизайне.
Мягкая деградация и постепенное улучшение
Кристиан Хайльманн из Opera определяет изящную деградацию как «предоставление альтернативной версии вашей функциональности или информирование пользователя о недостатках продукта в качестве меры безопасности, чтобы гарантировать, что продукт можно использовать». На практике это будет включать в себя предоставление резервной поддержки в виде условных операторов для IE, специальных сценариев JavaScript или Flash-аудио и видео, где используются новые элементы HTML5.
Совместимость с предыдущими версиями — аналогичный термин, означающий почти то же самое и относящийся к способности старого браузера отображать ваше приложение или веб-сайт или обеспечивать его функциональность.
Для сравнения, прогрессивное улучшение — это процесс, который начинается с определения базовой функциональности, а затем расширяет возможности пользователей с помощью различных методов тестирования. Таким образом, это инициатива, а плавная деградация — временное решение.
Совместимость браузера теперь
Как упоминалось ранее, новые теги HTML5 поддерживаются во всех современных браузерах. Все становится сложнее, когда вы начинаете реализовывать собственные функции браузера HTML5 и элементы холста, многие из которых все еще нуждаются в полной поддержке JavaScript. Многие селекторы CSS3 также зависят от JavaScript или небезопасны для мобильных браузеров.
Поддержка элементов HTML5:
- Internet Explorer 9 и 10
- Firefox 7 и выше
- Chrome 14 и выше
- Safari 5 и выше
- Опера 11 и выше
- Mobile Safari 3.2 и выше
- Opera Mobile 5 и выше
- Android 2.1 и выше
Ниже приведены еще несколько ресурсов, которые помогут вам понять, на каком этапе развития Интернета находятся CSS3 и HTML5. Добавьте их в свой набор инструментов, чтобы сэкономить время и нервы при работе над следующим проектом HTML5.
Найти меня по IP
HTML5 Пожалуйста
Проверив диаграмму на FindMeByIP или, если вы имеете в виду конкретную функцию, перейдите на HTML5Please, чтобы найти элемент или селектор и получить прямой совет о том, следует ли вам использовать его или нет, и что можно сделать, чтобы помочь обеспечить плавную деградацию с помощью полифиллов (дополнительных скриптов).
Браузершоты
Этот веб-сайт позволяет вам протестировать работающий веб-сайт практически в любой возможной комбинации браузера и операционной системы, предоставляя вам снимок экрана для каждого варианта, чтобы дать вам представление о том, как ваш сайт будет отображаться в различных браузерах. Снимки браузера не сообщат вам, какие разметки, скрипты или стили несовместимы, но визуальные подсказки позволяют быстро определить проблемные области и приступить к планированию решения.
Ложка
Как и Browsershots, Spoon – это бесплатная служба для тестирования веб-сайтов в самых разных браузерах, включая мобильные браузеры и версии-кандидаты, такие как Firefox Aurora и Chrome 18. Ваш сайт загружается в виртуальном браузере, а не возвращается в снимок экрана, чтобы лучше подготовиться к отладке.
Собираемся вместе
Итак, теперь, когда разница между HTML5 и CSS3 установлена и мы лучше понимаем, почему важна совместимость и как ее тестировать, давайте посмотрим, как этого добиться.
Заточка HTML5
Использование новых возможностей HTML5 и CSS3 может означать отказ от управления в старых браузерах. HTML5 shivs/shims/bims/bams/whatevers — это скрипты, которые вы можете использовать, чтобы компенсировать отсутствие обнаружения функций в старых браузерах, позволяя вашим передовым веб-сайтам и приложениям работать точно правильно независимо от того, какой браузер или устройство используют ваши посетители.
Внедрить один из этих скриптов на веб-сайт HTML5 довольно просто. Все, что нужно, это связать скрипт в заголовке документа:
Сброс CSS
Пионер сброса CSS, Эрик Мейер, объясняет: "Цель таблицы стилей сброса – уменьшить несоответствия браузера в таких вещах, как высота строки по умолчанию, поля и размер шрифта заголовков и т. д. Общая причина этого была следующая: обсуждалось в сообщении за май 2007 г., если вам интересно. Стили сброса довольно часто появляются в фреймворках CSS, а первоначальный «сброс meyerweb» нашел свое применение в популярных фреймворках CSS, таких как Blueprint и других». стили и селекторы, которые не распознаются старыми браузерами. Вы можете поместить их прямо в начало основной таблицы стилей, использовать @import или связать их в заголовке документа над основной таблицей стилей.
Ресурсы для сброса CSS:
Условные теги IE
Скрипты включения HTML5 и таблицы стилей сброса CSS нужны только в старых браузерах, поэтому нет смысла загружать их для всех. К счастью, Internet Explorer поддерживает условные теги, которые можно использовать для определения конкретной версии IE, чтобы передать ему специальную таблицу стилей, сценарий или сообщение. Например:
Условные операторы могут использовать ряд операторов для точной настройки управления. В приведенном выше примере «если lt IE 9» означает «если меньше, чем Internet Explorer 9», что означает, что любая версия IE ниже 9 получит преимущества от сценария.
Аудио и видео
Визуальное проектирование с помощью HTML5
Совместимость с браузером — это лишь один из многих сложных факторов, связанных с ручным кодированием ваших собственных веб-сайтов, о которых можно позаботиться с помощью правильных инструментов. Новый Конструктор веб-сайтов HTML5 от Wix — это совершенно бесплатный онлайн-инструмент для разработки полноценных веб-сайтов HTML5 с использованием визуального редактора с функцией перетаскивания, который дает вам полную свободу творчества.
Его чрезвычайно легко освоить, и он поставляется с обширной библиотекой анимаций, виджетов и графики, чтобы вы могли начать разработку с помощью HTML5 прямо сейчас. Вы можете быстро спроектировать и оформить любой макет с нуля, а также добавить HTML5-аудио, видео, слайд-шоу и многое другое без трудоемкого ручного кодирования.
Заключение
Надеемся, что это введение в HTML5 и совместимость браузеров послужило вам отправной точкой для создания более удобного интерфейса для ваших посетителей и клиентов.Спецификация HTMl5 находится на финишной прямой, и ожидается, что в течение следующих нескольких лет внедрение будет расти как на дрожжах, но всегда будет процент тех, кто нуждается в рассмотрении. По мере развития Интернета вы можете быть уверены, что потребность в плавной деградации и постепенном улучшении никогда не исчезнет, методы и требования будут просто меняться.
Читайте также: