Браузеры поддерживающие html5: Поддержка браузерами технологий HTML5 и CSS3 Текст научной статьи по специальности «Прочие социальные науки»
Поддержка браузерами технологий HTML5 и CSS3 Текст научной статьи по специальности «Прочие социальные науки»
УДК 004.442
ПОДДЕРЖКА БРАУЗЕРАМИ ТЕХНОЛОГИЙ HTML5 И CSS3
© А.В. Новожилов, Г.С. Акулов
Ключевые слова: HTML5; CSS3; стандарты; технологии веб-программирования.
Исследованы вопросы перехода на новые технологии веб-программирования HTML5 и CSS3, которые упрощают процесс создания интерактивных веб-сайтов за счет внедрения новых элементов и атрибутов. Проведено исследование уровня поддержки браузерами указанных технологий, выявлено, что не все браузеры на данный момент в полной мере поддерживают HTML5 и CSS3. Рассмотрены такие браузеры, как Google Chrome, Opera, Safari, Firefox, Internet Explorer.
В течение последних лет в сети Интернет наблюдается бум развития и популяризации интерактивных веб-сайтов [1].
Несмотря на то, что спецификация HTML5 еще целиком не готова, и W3C планирует полностью ее выпустить лишь к 2022 г., большинство современных веббраузеров уже сегодня осуществляет качественную поддержку многих возможностей, описанных в вышедших модулях упомянутой спецификации. Этому способствует сама модульная структура спецификации, что, в свою очередь, позволяет производителям вебобозревателей с каждой новой версией своих продуктов улучшать поддержку HTML5 и оказывать благоприятное влияние на растущую популярность этой технологии.
Данная технология может предоставить важные преимущества, способные оказать позитивное влияние на развитие интерактивных веб-сайтов, особенно если учесть тот факт, что в последнее время для работы в сети все чаще используются различные мобильные устройства, такие как современные сотовые телефоны и планшеты, доля рынка которых постоянно растет [3].
CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web» [4]. CSS3 — это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта. Многие возможности, которые были труднодоступны в CSS2.1 и требовали использования дополнительных внешних программ, написания скриптов (JavaScript, VBScript), могут легко достигаться в CSS3 за счет использования новых свойств оформления.
Отметим, что новые CSS3 свойства поддерживаются только в современных браузерах: IE9+, Firefox 3.6+, Opera 10+, Chrome 12+, Safari 5+. Наиболее полно под-
держивающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera). Бывший когда-то самым распространенным браузером Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но все еще содержит значительное количество ошибок. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.
Для проверки поддержки браузером веб-стандартов (в т. ч. и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.
В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5 эту модель также понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.
В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.
В браузере Mozilla при поддержке этого свойства под собственным «рабочим» названием -moz-box-sizing ввели еще одно значение -padding-box, таким образом, создав третью блочную модель, в которой width — это размер содержимого и отступов блока, не включая рамки.
HTML5 — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете [5]. Это пятая версия HTML-стандарта (изначально созданного в 1990 г. и последней версией которого являлся HTML4, стандартизированный в 1997 г.) и находится в стадии разработки по состоянию на февраль 2013 г. Основной ее целью является улучшение языка,
Рис. 1. График динамики уровня поддержки браузерами технологии HTML5
поддерживающего работу с новейшими мультимедийными приложениями, при этом сохраняя легкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.).
В HTML5 появляется множество синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования структурированной векторной графики. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам [6].
Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 г. После этого глава компании Apple Inc. Стив Джобс написал публичное письмо, заголовок которого гласил: «Мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash. Но разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash.
Технология HTML5 имеет несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных и строчных элементов, например, <nav> (блок навигации по сайту), <footer> (обычно относится к нижней части страницы или последней строке HTML-кода) или <audio> и <video> вместо <object>. Некоторые устаревшие элементы, которые можно было использовать в HTML, были исключены, включая чисто оформительские элементы, такие как <font> и <center>, чьи эффекты выполняются с помощью каскадных таблиц стилей [7].
Наиболее популярным тестом в сети Интернет, позволяющим проверить совместимость используемого
посетителем браузера с будущим стандартом HTML5, является тест html5test.com, который оценивает браузер пользователя и ставит ему оценку от 0 до 550. На рис. 1 представлен график динамики уровня поддержки браузерами технологии HTML5 по данным html5test.com [8]. Стоит отметить, что использование последних версий браузеров позволит работать с сайтами, написанными на технологиях HTML5 и CSS3. Однако еще многие пользователи используют старые версии браузеров.
Несмотря на то, что IE отстает по многим показателям поддержки технологий HTML5 и CSS3, процент использования этого браузера достаточно высок. На рис. 2 представлен процент использования разных браузеров по данным Statcounter [9].
Таким образом, на данный момент HTML5 и CSS3 поддерживают не все браузеры, однако Google Chrome, Opera и Mozilla FireFox обеспечивают максимально возможную поддержку новых стандартов. Технологии HTML5 и CSS3 заметно упрощают процесс создания интерактивных веб-сайтов, и скорее всего большинство пользователей со временем перейдет на браузеры с поддержкой HTML5 и CSS3.
; WeBrcws«
Рис. 2. Процент использования браузеров по Statcounter
ЛИТЕРАТУРА
1. Clarke A. Hardboiled Web Design. Penarth, UK, 2010. 400 p.
3. Доля рынка мобильных устройств. URL: http://www.netmarket-share.com/ (дата обращения: 29.10.2013).
4. История создания и развития CSS3. URL: http://kulibaba.net/web-development/css (дата обращения: 29.10.2013).
5. Результат исследования рынка технологий HTML5. URL: http://www.advertology.ru/article115910.htm (дата обращения: 20.06.2013).
6. Differences from HTML4. W3C Working Draft 28 May 2013. URL: http://www.w3.org/TR/html5-diff/ (дата обращения: 30.10.2013).
7. Pilgrim M. Dive into HTML5. URL: http://diveintohtml5.info/ (accessed: 25.10.2013).
8. HTML5 Test. Timeline. URL: http://html5test.com/results/desk-
top.html (дата обращения: 25.10.2013).
9. Статистика браузеров за октябрь 2013 г. URL: http://webrowser.ru/ rynok/statistika-internet-brauzerov-v-oktyabre-2013-goda.html (дата обращения: 11.10.2013).
Поступила в редакцию 20 ноября 2013 г.
Novozhylov A.V., Akulov G.S. BROWSERS SUPPORT OF HTML5 AND CSS3
The problem of transition to the new web-programming technologies HTML5 and CSS3 are researched in the article. These technologies simplify the process of web-programming by introducing new elements and attributes. A study of the level of browser support these technologies, it is revealed that not all browsers at the moment to fully support HTML5 and CSS3. Considered browsers such as: Google Chrome, Opera, Safari, Firefox, Internet Explorer.
Key words: HTML5; CSS3; standards; technology; webprogramming.
Новожилов Андрей Вячеславович, Тамбовский государственный университет им. Г.Р. Державина, г. Тамбов, Российская Федерация, бакалавр по направлению подготовки «Информационная безопасность» института математики, физики и информатики, e-mail: [email protected]
Novozhylov Andrey Vyacheslavovich, Tambov State University named after G.R. Derzhavin, Tambov, Russian Federation, Candidate for Bachelor’s Degree of Direction of Preparation of “Information Security” of Mathematics, Physics and Informatics Institute, e-mail: [email protected]
Акулов Геннадий Сергеевич, Тамбовский государственный университет им. Г.Р. Державина, г. Тамбов, Российская Федерация, бакалавр по направлению подготовки «Информационная безопасность» института математики, физики и информатики, e-mail: [email protected]
Akulov Gennadiy Sergeyevich, Tambov State University named after G.R. Derzhavin, Tambov, Russian Federation, Candidate for Bachelor’s Degree of Direction of Preparation of “Information Security” of Mathematics, Physics and Informatics Institute, e-mail: [email protected]
Какие браузеры на ПК до сих пор поддерживали html5?
Я знаю, что большинство браузеров уже поддерживают HTML5 на мобильных телефонах, но как обстоят дела с PC браузерами, особенно для HTML5 <video>
?
Каковы хорошие веб-сайты и ресурсы для того, чтобы идти в ногу с тем, насколько хорошо различные браузеры поддерживают HTML5?
html html5-videoПоделиться Источник libnet 11 июня 2010 в 01:11
5 ответов
- Какие браузеры поддерживают HTML SHORTTAGs?
Какие браузеры (исторические или текущие версии) поддерживают любую из конструкций SHORTTAG HTML/SGML ? Поддерживали ли когда-либо какие-либо widely используемые браузеры SHORTTAGS каким-либо образом? (IE6 я смотрю на тебя.) Пример SHORTTAG: <p<a href=/>first part of the text</>…
- Какие компании до сих пор нанимают C программистов?
Я начинаю поиск работы, в идеале заканчиваю в магазине C. До сих пор я пустовал в своих местных объявлениях и начинаю думать, что мне нужно расширить свой поиск, ориентируясь на конкретные виды бизнеса. Итак, какие места обычно используют этот язык?
Поделиться mpen 11 июня 2010 в 01:15
Поделиться Gert Grenander 11 июня 2010 в 01:21
1
Статус браузера для реализации HTML5 и CSS3.
Презентация, написанная на HTML5 с живыми примерами для ручного тестирования.
Поделиться Anurag 11 июня 2010 в 01:25
1
Chrome-это браузер, который лучше всего поддерживает HTML5… во второй очереди-FIREFOX, после этого-safari, затем opera… и после opera много единиц…
Тот, который вы должны знать, который в любом случае не поддерживает HTML5 (правда, только 10%)-это Интернет Explorer.
Попробуйте этот сайт, чтобы проверить поддержку thi HTML5 для браузеров..
http://html5test.coms/
Поделиться Garis M Suero 11 июня 2010 в 02:10
0
На этой странице есть хорошее объяснение различных функций и того, какой браузер, более старый, текущий или планируемый, будет его поддерживать.
http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf
Поделиться James Black 11 июня 2010 в 02:07
Похожие вопросы:
Принятие HTML5 полиглота послужило application/xhtml+xml
С точки зрения поддержки браузера и соответствия HTML5 (предполагая, что страница на самом деле хорошо сформирована XML), насколько удобно обслуживать страницу HTML5 polyglot с заголовком…
Какие веб-браузеры поддерживают Gelocation через HTML5?
Какие веб-браузеры (и версии) поддерживают Gelocation через HTML5?
Какие браузеры были последними, кто поддерживал только SSLv2?
Я пытаюсь найти или составить список последних версий наиболее распространенных браузеров (например, IE, Firefox, Chrome, Safari, Opera), которые поддерживали только SSLv2. Пожалуйста, обратите…
Какие браузеры поддерживают HTML SHORTTAGs?
Какие браузеры (исторические или текущие версии) поддерживают любую из конструкций SHORTTAG HTML/SGML ? Поддерживали ли когда-либо какие-либо widely используемые браузеры SHORTTAGS каким-либо…
Какие компании до сих пор нанимают C программистов?
Я начинаю поиск работы, в идеале заканчиваю в магазине C. До сих пор я пустовал в своих местных объявлениях и начинаю думать, что мне нужно расширить свой поиск, ориентируясь на конкретные виды…
Какие браузеры поддерживают встраивание шрифтов
Я читал о правиле @font-face и пытался понять, стоит ли использовать его в проекте для рендеринга franklin gothic medium для заголовка вместо чего-то вроде sIfr. Я подумал, что для браузеров,…
Какие браузеры (и версии) поддерживают метод Canvas.toBlob?
Я работаю над минималистским проектом создания изображений, и мне нужно иметь возможность создавать изображения в браузере, которые, в свою очередь, используются на сервере. До сих пор метод…
Поддерживают ли какие-либо браузеры контекстное меню HTML5?
Поддерживают ли какие-либо браузеры атрибут контекстного меню HTML5 ?
какие браузеры я должен поддерживать и как бы вы это сделали на mac?
Я использую много HTML5/CSS3 и нахожусь на mac. Все выглядит отлично для меня, но я не мой клиент :(. Если вы хотите настроить что-то для лучшего кроссбраузерного тестирования, 1) какие браузеры вы…
Как протестировать мобильную веб-страницу html5 на ПК
Я разрабатываю мобильную веб-страницу html5 с html5,css3 и javascript.but, как протестировать макеты на ПК. Я попытался добавить несколько плагинов для изменения размера браузера до разрешения…
Насколько Chrome, Safari, Firefox, IE и Opera удовлетворяют требованиям HTML5?
Аналитика
Chrome и Opera лидируют по соответствию с последними веб-функциями, но различий между браузерами меньше, чем кажется на первый взгляд.
Прошло уже четыре года с момента появления HTML5. Сегодня об HTML5 снова вспомнили, потому что комитет W3C, наконец, решил, что пора прекратить возиться со спецификацией HTML 5.0 и перейти к HTML 5.1. Это знаменует собой историческое событие, потому что документ HTML4 был завершен в 1997 году.
Что же делал мир во время становления стандарта? Конечно, не дожидался окончательного проекта. Сайты, использующие преимущества стандарта HTML5, распространились повсеместно. Браузеры поддерживают многие из функций HTML5, и они становятся все лучше с каждой новой версией. Различий между веб-сайтами и нативными приложениями меньше, чем когда-либо, а сложные, интерактивные веб-сайты, ведущие себя как нативные приложения, реальнее, чем когда-либо.
Давайте посмотрим, как браузеры приняли рекомендации комитета по стандартам HTML5. Новые элементы форм, теги, атрибуты, и фоновые функции бесполезны на бумаге, если они не используются в реальном мире.
Хорошей новостью является то, что браузеры сошлись на стандарте. По оценке HTML5Test.com, они ближе и ближе к идеальным, хотя разница между некоторыми браузерами все-таки есть.
Стоит отметить, что HTML5Test оценивает соответствие всем стандартам одной цифрой (от 0 до 555). Автоматизированный тест проверяет — поддерживается ли функция, создавая объекты DOM. Он не может сказать, будет ли функция реализована правильно, элегантно, или без ужасных багов.
В то время как эту цифру трудно игнорировать, реальные ответы лежат несколько глубже. Потратив всего несколько минут на просмотр списков, можно увидеть приоритеты развития команды каждого браузера. Некоторые из новых функций, которые еще не поддерживаются, не особенно важны. Chrome поддерживает кастомные схемы хэндлеров, но не поддерживает кастомные хэндлеры контента. Firefox не поддерживает некоторые из новых полей ввода для форм, такие, как время, месяц или неделя. Есть, по крайней мере, дюжина упущений в каждой платформе, и лишь немногие из них в настоящее время влияют на разницу в опыте обычного пользователя. Но это пока. Соответствие нужно для строительства прочной основы для будущего.
Политика браузеров
Некоторые из этих различий обусловлены глубокими политическими и финансовыми баталиями, скрывающимися за кулисами. Firefox и Chrome поддерживают видео кодеки WebM и Ogg Theora, но не MPEG-4. Safari поддерживает MPEG-4, но не WebM или Ogg Theora. По крайней мере, все они согласны с поддержкой H.264. Эти кодеки не являются официальной частью HTML5, но они являются настолько большой частью современного Интернета, что работа над ними является более важной для многих веб-разработчиков, чем все другие функции.
Другие пункты в тесте даже не являются частью официального проекта HTML5, потому что они — часть другой спецификации, которая может быть выделена из официальной спецификации HTML5. Часто бывает трудно для веб-разработчиков, программистов и особенно пользователей, нарисовать линию между тем, что есть в HTML5 и что является новой или лучшей функцией. Некоторые из наиболее привлекательных функций, таких как Web Storage и Web Workers не находятся под зонтиком HTML5, хотя они также введены консорциумом W3C. При этом, они могут иметь даже большее влияние.
Ядро спецификации HTML5 завершает добавление ряда новых тегов, предназначенных для указания роли воспроизводимого контента внутри тега. Они определяют области, разделы, отступы, нижние колонтитулы и заголовки. Раньше, мы бы отметили их тегами, которые определяют оформление <h4>. Теперь они будут отмечены своей ролью, так что у них могут быть собственные стили CSS, и браузер соответственно отобразит эти элементы. Тенденция отделять текст и изображения от их расположения и представления на странице продолжается.
За этими изменениями стоят увлекательные дискуссии, но они важны только для людей, которые беспокоятся о внешнем виде веб-страниц. Например, есть такие, которые хотят избавиться от использования таблиц для разметки, а другие хотят помешать этому. Можно определять наличие таблицы интуитивно, по чтению атрибутов тега таблицы. Добавление границы или заголовка столбца означает, что это, вероятно, табличные данные. Выключение границы означает, что может быть разметка.
Использование элементов неправильным способом может иметь последствия не только в виде обиженных сторонников правил в Интернете. Умное перепрофилирование тегов (например, таблиц) также разрушает другие системы. Команда HTML5 тратит много ресурсов, чтобы упростить слепым и инвалидам использование Интернет. Использование тегов таблиц для чего-то, кроме данных таблиц, путает программы для чтения с экрана и другие механизмы.
Теперь есть новый класс атрибутов ARIA (Accessible Rich Internet Applications), обеспечивающий альтернативные описания данных внутри. В общем, усилия по отделению сообщения от представления помогает сделать это гораздо легче.
От веб-страниц к веб-приложениям
Множество работ осуществляется в направлении обращения статических страниц в полноценные динамические приложения. Спецификации для Web Storage, WebSockets и Web Workers стали намного толще, по мере того, как создатели браузеров выяснили, что работает, а что нет. Эти данные делают возможным для программистов создание полнофункциональных пакетов программного обеспечения, как Google Docs. Локальное сохранение данных, возможность фоновой коммуникации и многопоточность — очень важны для работы с нетривиальными наборами данных.
Изменения в основном сосредоточены на мелких деталях, которые могут быть даже не заметны для многих разработчиков. Существуют десятки небольших изменений, а также дебатов вокруг них, которые не могут быть закончены. Из-за того, что многие детали остаются неопределенными, создатели браузеров часто принимают разные решения. Спецификация Web Storage говорит, что браузеры должны «ограничить общее количество пространства, доступного для хранения» и предлагает 5MB в качестве хорошего лимита. Между тем, реализации отличаются.
Одна из наиболее спорных областей может заключаться в обработке медиа. Веб-браузер становится доминирующим способом получения доступа к видео и команда, занимающаяся спецификацией HTML, настроилась на завоевание гостиной. Спецификация Encrypted Media Extensions включает в себя сложный механизм для работы с лентой видео и ключами, так что только должным образом лицензированные браузеры смогут показать изображения. Chrome, Opera и Safari поддерживают эти мультимедийные расширения; Firefox и Internet Explorer — нет.
Существует много другой работы, направленной на создание изменяющихся частей. Один из новых проектов, который называется Web Video Text Tracks, исследует стандартный механизм для синхронизации видео с другими частями сайта. Он, в основном, направлен на подписи, но нет никаких причин, почему он не найдет другие применения: слова, графики и изображения, перемещающиеся везде; и все браузеры его поддерживают.
Будущее Web
В то время как естественно думать о внедрении спецификации HTML5 в конце длительного процесса ее развития, лучше рассматривать это как начало следующего поколения. Некоторые из идей были выброшены из спецификации 5.0, потому что не было достаточно «опыта внедрения». Другими словами, функции не существовали достаточно долго, чтобы все узнали — являются ли они тем, что мы хотим.
Быстрый просмотр спецификации HTML 5.1 в виде проекта, включает в себя такие функции, как атрибут accesskey для добавления клавиатурных эквивалентов щелчкам мыши. Существует боле расширенная поддержка во всех браузерах для API редактирования HTML, которые делают каждую веб-страницу потенциально редактируемой, а всю сеть потенциально одной большой Википедией.
Могут появиться даже большие изменения, поскольку некоторые предпочитают, чтобы HTML был более похож на XML. Это не просто попытка закрыть все открытые теги, что, очевидно, приведет к багам у некоторых разработчиков. Некоторый члены сообщества, обсуждающего спецификации HTML5, уже говорят о возможностях «взлома» следующей версии. То есть, они хотят спецификацию, которая позволит нам определять наши собственные тэги и наш собственный механизм для обработки тегов после того, как они будут проанализированы.
Это может сделать разметку гораздо более эффективной. Любой, кто нажимал на кнопку «View Source», видел, что многие файлы HTML на 50-60% состоят из тегов <div> и <span>, каждый из которых с несколькими различными прилагаемыми классами. Отладка файлов CSS стилей становится все более трудной. Один из способов избавиться от этого, заключается в полностью расширяемой системе тегов.
Все эти решения ожидают нас в будущем. Этап 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.
Поддержка браузеров HTML5
Современные браузеры поддерживают HTML5.
Кроме того, все браузеры, включая старые и новые, непризнанного элемента будет автоматически обрабатываться как строковый элемент.
Из — за этого, вы можете«церковь» браузеры обрабатывать «неизвестные»HTML элементы.
Вы можете даже церковь IE6 (Windows XP 2001) браузер обрабатывает HTML неизвестные элементы. |
Элемент HTML5, определяется как элемент блока
HTML5 набор из восьми новых HTML семантика (семантических) элементов. Все эти элементы являются элементами уровня блока.
Для того , чтобы обеспечить более старые версии браузеров отображать эти элементы правильно, то вы можете установить блок CSS дисплей значение свойства:
примеров
заголовок, раздел, сноска, в сторону, нав, главным образом , статья, рисунок { дисплей: блок ;}
Добавление нового элемента в HTML
Вы можете добавлять новые элементы в HTML.
Примеры новых элементов , добавленных в HTML, а также элементы стиля , определенный для элемента под названием <myHero>:
примеров
<! DOCTYPE HTML> <HTML> <Head> <Meta Charset = «UTF-8»> <Title> HTML , чтобы добавить новый элемент </ title> <Script>
документ. createElement ( «myHero»)
</ Script> <Style>
myHero { дисплей: блок ; Цвет фона: #ddd ; Обивка: 50 точек ; Размер шрифта: 30 точек ;}
</ Style> </ Head> <Body> <h2> Мой первый заголовок </ h2> <P> Мой первый абзац. </ P> <MyHero> Мой первый новый элемент </ myHero> </ Body> </ HTML>
Попробуйте »
JavaScript заявление document.createElement ( «myHero»), чтобы добавить новый элемент в браузере IE.
вопросы обозревателя Internet Explorer
Вы можете использовать метод, описанный выше, чтобы добавить элементы HTML5 браузеры IE, но:
Internet Explorer 8 и более ранних версиях IE браузер не поддерживает более одного пути. |
Мы можем использовать Сьерд Висшера создан «HTML5 Включение JavaScript», «заточку » , чтобы решить эту проблему:
<! — [Если л IE 9]>
<Script SRC = «http://html5shiv.googlecode.com/svn/trunk/html5.js»> </ скрипт>
<! [Endif] ->
Приведенный выше код является комментарием, роль, когда браузер версии IE меньше IE9 будет читать html5.js файл и разобрать его.
Примечание: Пожалуйста , отечественные пользователи используют сайт статического хранилища (репозитория нестабильности Google в стране):
<! — [Если л IE 9]>
<Script SRC = «http://cdn.static.w3big.com/libs/html5shiv/3.7/html5shiv.min.js»> </ скрипт>
<! [Endif] ->
Для IE браузера html5shiv является лучшим решением. html5shiv основным решением предложены новые элементы HTML5 IE6-8 не признают эти новые элементы не могут быть обернуты в качестве родительского узла дочерних элементов, и не может применить стили CSS.
Шив идеальное решение
примеров
Render HTML5 title>
</ скрипт>
Head>
<Body>
<h2> Моя первая статья </ h2>
<Статья>
Этот учебник — наука не только технологии, но и мечта! ! !
</ Статья>
</ Body>
</ HTML>
Попробуйте »
html5shiv.js код ссылки должны быть помещены в элемент <HEAD>, так как браузер IE при разборе HTML5 новые элементы необходимо загрузить файл.
12 альтернативных браузеров, о которых почти никто не знает
На сегодняшний день браузер стал одной из главных компьютерных программ, без которой не может обойтись ни один пользователь. Обычно при выборе браузера мы ограничиваемся совсем небольшим списком, состоящим из нескольких хорошо всем известных названий — Google Chrome, Mozilla Firefox, Internet Explorer, Opera, Safari. Однако этими программами число существующих веб-обозревателей далеко не исчерпывается. Мы хотим вас познакомить с самыми интересными альтернативными браузерами, которые, может быть, не слишком известны, но определенно заслуживают вашего внимания.
Современный браузер является сложной программой, которая включает в себя несколько независимых компонентов, в том числе механизм рендеринга страниц, пользовательский интерфейс, движок обработки Javascript, XML парсер и так далее. Такая многоуровневая архитектура позволяет довольно легко изменять отдельные модули браузеров, чем успешно пользуются сторонние разработчики, выпуская свои модификации веб-обозревателей на основе существующих браузерных движков (browser engine). Самые распространенные движки браузеров на сегодня: Trident (Internet Explorer),
Gecko (Mozilla Firefox) и Webkit (Chrome, Safari), поэтому в этом обзоре все программы разделены именно по этому признаку.
Браузеры на основе Mozilla Firefox
Gecko — это движок вывода веб-страниц, известный нам прежде всего по браузеру Mozilla Firefox. При создании Gecko разработчики обеспечили поддержку открытых стандартов Интернета, кроссплатформенность, а самое главное – свободное распространение, благодаря чему этот движок успешно используется в самых разных программных продуктах.
Waterfox (Windows Vista x64, Windows 7 x64)
Несмотря на популярность 64-битных систем, Mozilla пока не планирует выпуск специальной версии браузера для этой архитектуры. Проект Waterfox восполняет этот пробел, предоставляя нам специально оптимизированную для выполнения в этой среде версию браузера. Хотя Waterfox имеет практически ту же самую функциональность, что и Firefox, смысл попробовать эту программу все же имеется, так как разработчики обещают нам значительное увеличение производительности в 64-битных системах.
Назначение. Если у вас 64-битная система и вы хотите приобрести небольшой выигрыш в скорости, то стоит испробовать эту программу.
Pale Moon (Windows 2000/XP/Vista/7, x86/x64)
Еще одна оптимизированная и ускоренная версия Firefox, которая доступна только для Windows и имеет как 32, так и 64-битную версию. Разработчики направили основные усилия на создание специально оптимизированной для полного использования всех возможностей современных процессоров программы. Кроме скрытых под капотом браузера изменений, направленных на максимальное ускорение работы, есть и некоторые твики пользовательского интерфейса, но они весьма незначительны. Однако в следующих версиях, по словам разработчиков, отличия от родительского браузера будут более заметны, так как Firefox скоро ожидает значительный редизайн, а Pale Moon оставит себе свой привычный вид.
Назначение. Для любителей выжать все возможное из своего железа, а также тем кому не нравятся изменения в интерфейсе Firefox.
SeaMonkey (Windows, Linux, MacOS)
Было бы большой ошибкой считать SeaMonkey дочерним продуктом браузера Firefox, скорее это родные братья, имеющие в своей основе один и тот же проект Mozilla Suite. В Firefox пошли по пути максимального облегчения программы, а SeaMonkey сохранил в своем составе все существующие компоненты, в том числе веб-обозреватель, почтовую программу, редактор html-страниц, адресную книгу и клиент IRC. Таким образом, в одной программе мы получаем полный джентльменский набор функций, необходимых для работы в интернете, которые в одном комплекте потребляют гораздо меньше ресурсов, чем установленные по отдельности Firefox, Thunderbird и т.д.
Назначение. Этот комбайн может понравиться любителям многофункциональных решений «все-в одном», готовых мириться с откровенно устаревшим интерфейсом и невысокой скоростью работы.
Wyzo (Windows, MacOS)
Этот браузер основан на ветке 3.6 браузера Firefox, так что тем пользователям, которые не приняли кардинального обновления программы в четвертой версии, стоит обратить на него внимание. Кроме этого, Wyzo может похвастаться встроенной поддержкой протокола BitTorrent, усовершенствованным загрузчиком файлов и полной совместимостью с темами и расширениями Firefox.
Назначение. Если вы по каким-то причинам прикипели к Firefox семейства 3.6, то этот браузер для вас.
Браузеры на основе Internet Explorer
Internet Explorer более чем какой-либо другой браузер нуждается в усовершенствовании. Несмотря на наличие довольно стабильного, а в последних версиях еще и очень быстрого механизма обработки страниц Trident, браузер от Microsoft проигрывает конкурентам из-за скромной функциональности и медленного внедрения новых технологий. Тем ценнее для нас те продукты, в которых сторонние разработчики пытаются исправить присущие IE недостатки.
Avant Browser (Windows)
Этот веб-обозреватель является одним из самых успешных отпрысков Internet Explorer. Если не принимать во внимание немного устаревший вид, то можно сказать, что Avant Browser – это именно тот браузер, которым хотел стать IE в детстве. Посудите сами, рекордно низкое потребление памяти, встроенная блокировка рекламы и всплывающих окон, автозаполнение форм и менеджер паролей, возможность хранения своих закладок, паролей, настроек в онлайновом хранилище, поддержка жестов мышью, система чтения RSS-лент и многие другие функции делают этот браузер, пожалуй, лучшим выбором среди IE-совместимых обозревателей. Добавьте к этому отличную локализацию, регулярные обновления и многочисленное сообщество пользователей, и становится ясно, что этот браузер непременно нужно попробовать всем поклонникам майкрософтовского движка отображения страниц Trident.
Назначение. Этот браузер понравится тем пользователям, которые хотят использовать все преимущества движка Trident, но не могут мириться с функциональностью Internet Explorer.
Lunascape (Windows)
Экзотический браузер от разработчиков из далекой Японии. Как и многие изделия родом из этой страны, обладает целым рядом уникальных особенностей. Прежде всего это возможность использования не только движка Trident, идущего в комплекте по умолчанию, но и Gecko с WebKit. Таким образом, пользователям предоставляется возможность использования функций всех самых популярных на сегодня браузеров в одном интерфейсе. Есть даже возможность закрепления определенного движка для отображения отдельных сайтов, так что при проблемах с какой-либо страницей браузер будет автоматически переключаться на более подходящий механизм рендеринга. Кроме этого, браузер обладает возможностью установки дополнений (в том числе для Chrome и Firefox), изменения внешнего вида с помощью скинов, а также такой развитой системой настройки, что с ее помощью можно изменить буквально любой аспект работы программы.
Назначение. Сложный продукт, требующий настройки и изучения. Может пригодиться, если вам нужно видеть отображение сайтов в разных браузерах.
SlimBrowser (Windows)
Несмотря на то что обновляется SlimBrowser довольно регулярно (последняя версия вышла буквально на днях), выглядит он как IE 8. Тем не менее, под капотом программы скрывается целый набор востребованных функций, таких как автоматическое заполнение веб-форм, встроенный переводчик, панель быстрого поиска, продвинутый менеджер загрузок, блокиратор рекламы, редактор HTML и скриптов, интеграция с Facebook и другими социальными сервисами, поддержка скинов и т.д. Хотя SlimBrowser стал одним из двенадцати браузеров, предлагаемых для пользователей Европейского экономического пространства, я бы не называл его самостоятельным продуктом – скорее это просто комплект полезных настроек и дополнений для Internet Explorer, собранных под одной оболочкой.
Назначение. Хотя разработчики на домашней странице смело утверждают, что это лучший браузер для Windows, это все же просто набор полезных дополнений.
Браузеры на основе Google Chrome
Сейчас многие уже забыли, но движок WebKit ведет свою родословную от проекта KHTML, изначально разработанного для среды KDE в Unix-системах. Его исходный код открыт, то есть доступен для использования в проектах любого назначения. Самыми известными из них являются браузеры Safari и Google Chrome, но существует также огромное количество других программ, в той или иной мере использующих компоненты WebKit.
Chromium (Windows, MacOS, Linux)
Несмотря на то что Google Chrome и Chromium разрабатывает одна и та же фирма, и в обоих использован один и тот же движок и интерфейсные решения, все же между ними имеется целый ряд существенных отличий. В Chromium отсутствует автообновление, поддержка некоторых проприетарных аудио-видео форматов и Flash, нет модуля для работы с PDF. Но при этом браузер Chromium предлагает все самые свежие и экспериментальные функции, которые разработчики еще только собираются внедрять в Google Chrome.
Назначение. Если вы хотите раньше всех попробовать все нововведения, которые появятся в Google Chrome, то это ваш выбор.
Comodo Dragon (Windows)
Компанию Google последнее время частенько попрекают в неуважении к конфиденциальности. В частности, браузер Chrome уже неоднократно был замечен в сборе различной информации о действиях пользователя в Сети. Именно поэтому появился целый ряд альтернативных браузеров, в которых повышенное внимание уделено секретности и безопасности. Программа Comodo Dragon разработана компанией Comodo, которая хорошо известна своим антивирусом и файрволом. В ней используется соединение через сервер SecureDNS, позволяющее блокировать зловредные сайты, использован более совершенный механизм анонимного серфинга, а также сделан ряд других изменений, повышающих вашу безопасность.
Назначение. Этот браузер предназначен для тех, кто всерьез озабочен своей безопасностью и секретностью.
RockMelt (Windows, MacOS)
Этот браузер предназначен для любителей социальных сетей и напоминает уже закрытый проект Flock. С его помощью можно легко получать обновления в своих учетных записях, общаться с друзьями, обмениваться любым содержимым просматриваемых страниц. Браузер имеет специальные дополнительные панели, которые служат для отображения кнопок подключенных социальных сервисов, списка друзей, встроенного чата. RockMeIt, в отличие от Chrome, хранит пользовательский профиль на серверах Facebook и, соответственно, для работы требуется войти в свою учетную запись в этой социальной сети.
Назначение. Если вы являетесь активным участником социальных сетей, особенно Facebook, то вам непременно надо обратить внимание на эту программу.
CoolNovo (Windows, Linux, MacOS (beta))
Наши китайские товарищи славятся своим умением повторять и усовершенствовать самые различные продукты. Не обошла эта участь и браузер компании Google. CoolNovo имеет все возможности Chrome плюс ряд дополнительных полезных функций, которые делают работу с браузером более комфортной. Благодаря усилиям китайских разработчиков браузер стал понимать жесты мыши, обзавелся удобным менеджером закачек, встроенным механизмом блокировки рекламы, функцией «суперперетаскивания» и многими другими возможностями. Кроме этого, в программе позаботились о защите личной информации пользователя: более тщательно происходит очистка приватной информации и отключены шпионские компоненты Google Chrome.
Назначение. Никакого волшебства – это просто Chrome в комплекте с несколькими полезными расширениями и твиками. Пригодится всем, кому необходима «прокачанная» версия Google Chrome.
Maxthon (Windows, Android)
Один из старейших альтернативных браузеров, успевший с 2004 года не только сменить основной движок отображения страниц с Trident на WebKit, но и обрести заслуженную популярность среди многочисленной армии пользователей. Причиной для этого послужила довольно серьезная оснащенность Maxthon, предоставляющего «из коробки» множество удобнейших функций, доступных в других браузерах только после установки десятков расширений. К ним относятся возможность настройки внешнего вида с помощью скинов, функция Super Drag&Drop, управление жестами мыши, блокировка рекламы, встроенный RSS-ридер, служба автообновления, встроенный блокнот, менеджер загрузок, функция хранения пользовательских данных в облачном сервисе с возможностью синхронизации между разными компьютерами и многое другое. При этом необходимо подчеркнуть, что Maxthon, в отличие от многих конкурентов, является самостоятельным проектом, а не переработанной версией Google Chrome.
Назначение. Быстрый, удобный и функциональный веб-обозреватель, имеющий свое собственное лицо и долгую историю развития. Реальная и очень достойная альтернатива фаворитам.
Заключение
В этом обзоре мы постарались познакомить вас с самыми интересными представителями альтернативных браузеров. Некоторые из них предназначены для выполнения узкоспециализированных задач, другие предоставляют пользователям широчайший спектр возможностей при работе в интернете. Как вы можете убедиться, список современных веб-обозревателей гораздо шире известных всем четырех названий и включает в себя достойные для применения программы. Среди всех рассмотренных альтернатив особое внимание читателей мы бы хотели обратить на Avant Browser и Maxthon, которые содержат целый ряд оригинальных решений и полностью способны выполнять роль штатного веб-обозревателя.
Зачем нам нужен HTML5: пять простых ответов
Все вы наверняка хоть что-то слышали о HTML5 — новой версии языка разметки страниц в интернете. Она до сих пор считается находящейся в разработке, хотя со времени официального утверждения действующей версии HTML4 прошло более пятнадцати лет — фактически всё время активного развития Всемирной сети. В чём же заключаются преимущества HTML5 и принципиальные его отличия от HTML4?
1. HTML5 — новый подход к разметке: мультимедиа внутри
В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.
Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.
Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это — «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.
Эта система до сих пор вполне работоспособна, однако отсутствие общепринятых стандартов приводит к тому, что на разных сайтах используются разные технологии, для просмотра их медиаконтента требуются разные плагины и, самое главное, поскольку такие плагины не входят непосредственно в составе браузера, необходима их отдельная установка.
В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.
Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.
Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них — изменение идеологического подхода.
2. Проблема обратной совместимости: сначала HTML, потом плагины
К сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор считающейся самой популярной для этого браузера. Последующие версии — IE 9 и 10 — уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».
Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» — и лишь при невозможности сделать это применять код плагинов.
Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js, обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.
3. Единый подход к десктопным и мобильным платформам
Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.
Кроме того, многие современные мобильные устройства поддерживают аппаратное декодирование видео в широко распространённом формате H.264, что вновь избавляет веб-мастеров от лишней работы и необходимости выкладывания видео в нескольких разных кодеках. Владельцы же таких устройств получают низкую нагрузку на систему и длительное время автономной работы.
4. Поддержка разных форматов видео и звука
Несмотря на то что HTML5 позволяет размещать на веб-страницах медиафайлы простыми стандартными тэгами, такие файлы могут быть закодированы в самые разные форматы и самыми разными кодеками. Между тем пока не существует какого-то стандартного сочетания формата (контейнера) и кодека, которое с равным успехом работало бы во всех браузерах и мобильных системах.
Самые популярные контейнеры для интернет-видео — это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 — MP4, Theora — OGG, VP8 — WebV.
Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом — более качественное видео.
Хотя H.264 — коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.
Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.
Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.
Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.
5. Существует обширная общедоступная документация
Несмотря на то что HTML5 пока ещё не имеет статуса окончательного стандарта, его поддерживает подавляющее большинство современных браузеров и мобильных устройств. Потому не удивительно, что для веб-разработчиков уже существует обширная общедоступная документация — большая часть которой, естественно, опубликована на английском языке.
Прежде всего речь об официальной последней рабочей версии консорциума W3C, в рамках которого ведётся непосредственная разработка HTML5.
На сайте разработчиков Mozilla приводится справочник тэгов, причём элементы, которые были добавлены в HTML5, выделены особо.
Подробные описания подхода к интеграции видео в HTML5 можно найти здесь и здесь (тоже на английском языке).
На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.
Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».
Браузеры и устройства. Начало работы · Bootstrap. Версия v4.0.0
Узнайте больше о браузерах и устройствах всех видов, которые поддерживаются Bootstrap и об известных багах для каждого из них.
Поддерживаемые браузеры
Bootstrap поддерживает все новейшие, стабильные релизы браузеров и платформ. В Windows поддерживается IE10-11 / Microsoft Edge.
Альтернативные браузеры, поддерживающие последнюю версию Webkit, Blink или Gecko, поддерживаются не полностью. Однако и в них BS4 должен отображаться и работать корректно. Более точная информация – ниже.
Мобильные устройства
В общем, BS4 поддерживает последние версии браузеров по умолчанию для каждой платформы. Заметьте, что прокси-браузеры (такие как Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) не поддерживаются.
Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
---|---|---|---|---|---|
Android | Поддерживается | Поддерживается | Нет | Android v5.0+ поддерживается | Поддерживается |
iOS | Поддерживается | Поддерживается | Поддерживается | Нет | Поддерживается |
Windows 10 Mobile | Нет | Нет | Нет | Нет | Поддерживается |
Браузеры PC
Аналогично, последние версии большинства таковых браузеров поддерживаемы.
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | Поддерживается | Поддерживается | Нет | Нет | Поддерживается | Поддерживается |
Windows | Поддерживается | Поддерживается | Поддерживается, IE10+ | Поддерживается | Поддерживается | Не поддерживается |
Для Firefox, дополняя поддержку последнего стабильного релиза, BS4 также поддерживает последний релиз Firefox с «расширенной поддержкой» — Extended Support Release (ESR).
Предположительно BS4 должен работать нормально в Chromium и Chrome в Линуксе, Firefox для Линуска, и IE9, хотя эти браузеры и не поддерживаются официально.
Для получения списка некоторых «багов» браузеров, с которыми довольно трудно бороться, загляните на стену «багов».
Internet Explorer
IE 10+ поддерживаются, IE9 и ниже – нет. Знайте, что некоторые свойства CSS3 и элементы HTML5 поддерживаются не полностью в IE10, или требуют предустановленных свойств для нормальной работы. Посетите Can I use… для подробностей по поддержке браузерами свойств CSS3 и HTML5.
Если вам потребуется поддержка IE8-9, пользуйтесь BS3. Это наиболее стабильная версия и она все еще поддерживается нашей командой в наиболее критических случаях. Но туда уже не добавятся новые возможности и свойства.
Всплывающие окна и выпадающие меню на мобильниках
Прокрутка и отображение содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Поддержка свойства overflow:hidden;
достаточно ограничена в iOS и Андроидах. По этой причине, когда вы прокручиваете ниже верха или низа всплывающего окна в этих устройствах, содержимое <body>
начнет прокручиваться. Смотрите Chrome bug #175502 (решено в Chrome v40) и WebKit bug #153852.
Текстовые поля и прокрутка в iOS
Что касается iOS 9.2, — пока всплывающее окно открыто – если начальное касание жеста прокрутки происходит внутри границ <input>
или <textarea>
, прокручиваться вместо окна будет содержимое <body>
. Смотри WebKit bug #153856.
Выпадающие элементы навигационной панели
Элемент .dropdown-backdrop
не используется на iOS в навигационной панели из-за сложности z-индексирования. Таким образом, чтобы закрыть выпадающий элемент, необходимо коснуться его (или другой элемент, который вызовет событие «клик» в iOS).
«Зум» в браузере
Масштабирование страницы неизбежно влечет искажения прорисовки некоторых компонентов BS4 и остальной страницы. В зависимости от вида проблемы, мы можем «починить» этот баг (пожалуйста, перед обращением к нам поищите решение сами). Однако, мы часто игнорируем подобные обращения, т.к. часто иного решения, чем временные «костыли», просто нет.
«Липкий»
:hover
/:focus
на мобильных
Хотя реальный «hover» невозможен на большинстве тачскринов, большинство мобильных браузеров симулируют его и делают :hover
«липким». Другими словами: стили :hover
начинают работать после постукивания на элементе и останавливаются лишьпосле того как юзер «стукнет» по другому элементу. На сайтах концепции «mobile-first» такое поведение обычно нежелательно.
Bootstrap имеет решение для описанного поведения, хотя оно и отключено по умолчанию. При установке значения переменной $enable-hover-media-query
на true
при компиляции Sass, BS4 будет использовать mq4-hover-shim для дезактивации стилей :hover
в браузерах, имитирующих «hovering», таким образом предотвращая «липкое» поведение стилей :hover
.
Печать
Даже в современных браузерах она может вызвать проблемы.
Что касается Safari v8.0 – использование класса с фиксированной шириной .container
может заставить браузер использовать необычно мелкий шрифт при печати. Смотрите issue issue #14868 и WebKit bug #138192. Есть еще один обход этого бага (код внизу):
@media print {
.container {
width: auto;
}
}
Встроенный браузер Андроида
По умолчанию Android 4.1 (и даже некоторые более его новые релизы ) поставляются с браузером-приложением по умолчанию (в противоположность Chrome). К несчастью, это приложение имеет множество «багов» и несовместимостей с CSS в целом.
По элементам <select>
: встроенный браузер андроида не отобразит их элементы управления (кнопки), если применен border-radius
и\или border
. (Смотрите вопрос на StackOverflow). Используйте кусок кода ниже для удаления мешающего CSS и отрисовки элемента <select>
встроенным браузером андроида как «нестилизованного» элемента. В этом случае при определении браузера пользователя не происходит взаимодействия с браузерами Chrome, Safari и Mozilla.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
Хотите пример? JS Bin demo.
Валидаторы
Для обеспечения наилучшей работы на старых и глючных браузерах для применения определенных настроек CSS к определенным версиям браузеров и исправления «багов» в самих браузерах, BS4 иногда использует CSS browser hacks. Эти «хаки» по понятным причинам заставляют «ругаться» валидаторы CSS. Кое-где мы используем не до конца проверенные и стандартизированные, но нужные для прогресса, свойства CSS.
Эти «ругательства» валидатора не следует воспринимать серьезно, поскольку остальной наш CSS полностью валиден, а «хаки» не мешают правильному функционированию остального CSS. Посему смело игнорируйте эти предупреждения.
Наши HTML–документы также вызывают некоторые тривиальные и несущественные предупреждения – потому что в них есть «костыли» для исправления определенного «бага» в Firefox.
Введение в совместимость с браузером HTML5
За последние несколько лет HTML5 превратился из мифического существа в живую реальность, и его готовность и жизнеспособность получили признание как скептиков, так и экспертов. Теперь, в 2012 году, HTML5 готов к использованию со всеми современными браузерами, включая IE9. Он также был разработан для изящной деградации даже без помощи JavaScript или сброса CSS.
Тем не менее, вы можете быть обеспокоены обеспечением полной обратной совместимости или не уверены в том, что будет работать в одном браузере, а не в другом.HTML5 часто обвиняли в проблемах, связанных с jQuery и CSS3, как новыми технологиями, так и стандартами, развивающимися вместе с HTML5, но фактически не являющимися его частью. Чтобы получить представление о совместимости браузера HTML5, вы должны сначала понять, как браузеры смотрят на каждый из этих языков.
HTML5 против CSS3
HTML5 — это пересмотренная версия спецификации разметки HTML, содержащая несколько передовых методов и правил, по которым производители браузеров и веб-разработчики могут найти общий язык.Впервые он был разработан и принят W3C в 2006 году, закрылся в 2009 году и признан готовым к использованию, а полное одобрение кандидата, вероятно, ожидается в этом году. Он содержит новые элементы макета, которые вы, вероятно, видели, такие как
Обе эти спецификации нацелены на то, чтобы вывести веб-разработку на более семантический и значимый уровень с точки зрения создания набора простых для понимания стандартов, предназначенных для хорошей работы друг с другом. Поскольку HTML5 не привязан к CSS3, его можно использовать в самых разных приложениях, не страдая от проблем совместимости, которые могут возникнуть из-за некоторых передовых селекторов CSS3.
Переход к условиям
Мы все слышали эти термины несколько раз, но концепция изящной деградации , прогрессивного улучшения , обратной совместимости и поддержка браузера может звучать как полная ерунда, если вы новичок в дизайне или сосредоточены на интерфейсный дизайн большую часть времени.К счастью, по этим темам написано много, и было создано несколько очень полезных инструментов, которые упростят нам задачу. Начнем с основ того, что это такое.
Так ли важна совместимость браузера?
Я видел, как дизайнеры утверждали, что нет смысла тратить лишнюю энергию на поддержку устаревших браузеров. Зачем беспокоиться, когда на современные браузеры webkit приходится почти 75% всего использования браузеров? К сожалению, трудно убедить клиентов, которые хотят охватить как можно больше зрителей или поддержать аудиторию, которая зависит от старых технологий.В значительной части мира по-прежнему не хватает финансовых ресурсов или технических возможностей для обновления. Вы также должны учитывать пользователей с потребностями в специальных возможностях. HTML5 и CSS3 устраняют огромный пробел в совместимости, пытаясь стандартизировать то, как браузеры отображают Интернет, что со временем уменьшит дополнительные усилия, затрачиваемые на создание решений совместимости в дизайне.
Изящная деградация против прогрессивного улучшения
Кристиан Хейльманн изOpera определяет изящную деградацию как «предоставление альтернативной версии вашей функциональности или информирование пользователя о недостатках продукта в качестве меры безопасности, гарантирующей его пригодность к использованию.«На практике это будет включать в себя обеспечение резервной поддержки в форме условных операторов для IE, специальных сценариев JavaScripts или Flash-аудио и видео, в которых используются новые элементы HTML5.
Обратная совместимость — это похожий термин, означающий почти то же самое, относящийся к способности старого браузера отображать ваше приложение или веб-сайт или поддерживать его функциональность.
Для сравнения: Progressive Enhancement — это процесс, который начинается с определения базовой функциональности, а затем расширяет возможности пользователя с помощью различных методов тестирования.Следовательно, это инициатива, в то время как постепенная деградация — временное решение.
Теперь совместимость с браузером
Как упоминалось ранее, новые теги HTML5 поддерживаются во всех современных браузерах. Все усложняется, когда вы начинаете реализовывать собственные функции браузера HTML5 и элементы холста, многие из которых по-прежнему нуждаются в полной поддержке JavaScript. Многие селекторы CSS3 также либо зависят от JavaScript, либо небезопасны для мобильных браузеров.
Поддержка элементов HTML5:
- Internet Explorer 9 и 10
- Firefox 7 и выше
- Chrome 14 и выше
- Safari 5 и выше
- Opera 11 и выше
- Мобильное Safari 3.2 и выше
- Opera Mobile 5 и выше
- Android 2.1 и выше
Ниже приведены еще несколько ресурсов, которые помогут вам понять, где находится Интернет с помощью CSS3 и HTML5. Добавьте их в свой инструментарий, чтобы сэкономить время и нервы при работе над следующим проектом HTML5.
FindMeByIP
HTML5 Canvas использует ту же поддержку современного браузера для графического рендеринга, что и элементы HTML5, что является отличной новостью, если вы планируете реализовать слайд-шоу холста, текстовые эффекты или анимацию Canvas в свое приложение или веб-сайт.FindMyByIP предлагает несколько наглядных диаграмм для проверки определенных функций HTML5 и CSS3 в различных браузерах, хотя он не предлагает решений, что делать, если что-то не поддерживается. Если вам нужно проверить расширенные функции, API или функции JavaScript в дополнение к HTML5 и CSS3, посетите caniuse.com.
HTML5 Пожалуйста,
После проверки диаграммы на FindMeByIP или если у вас есть конкретная функция в голове, перейдите на HTML5 Пожалуйста, найдите элемент или селектор и получите простой совет о том, следует ли вам его использовать или нет, и что можно сделать, чтобы обеспечить изящный деградация через полифиллы (дополнительные скрипты).
просмотров
Этот веб-сайт позволяет вам протестировать действующий веб-сайт практически в любой возможной комбинации браузера и ОС, предоставляя вам снимки экрана каждого варианта, чтобы дать вам представление о том, как ваш сайт будет отображаться в различных браузерах. Browsershots не скажет вам, какая разметка, скрипты или стили несовместимы, но визуальные подсказки позволят вам быстро определить проблемные области и начать планирование решения.
Ложка
Подобно Browsershots, Spoon — это бесплатный сервис для тестирования веб-сайтов в самых разных браузерах, включая мобильные браузеры и версии-кандидаты, такие как Firefox Aurora и Chrome 18.Ваш сайт загружается в виртуальном браузере, а не отображается на снимке экрана, поэтому вы лучше подготовлены для отладки.
Собираемся вместе
Итак, теперь, когда разница между HTML5 и CSS3 установлена и мы лучше понимаем, почему важна совместимость и как ее проверять, давайте посмотрим, как этого добиться.
HTML5 Шайба
Использование преимуществ новых возможностей HTML5 и CSS3 может означать отказ от контроля над интерфейсом в старых браузерах.HTML5 shivs / shims / bims / bams / whatevers — это скрипты, которые вы можете использовать, чтобы компенсировать отсутствие функции обнаружения в старых браузерах, позволяя вашим передовым веб-сайтам и приложениям работать точно, независимо от того, какой браузер или устройство используют ваши посетители.
Реализовать один из этих скриптов на веб-сайте HTML5 довольно просто. Все, что нужно, — это привязать скрипт к заголовку документа:
& lt; script src = & quot; // html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Обратите внимание, что нам больше не нужен атрибут "type ="
, который обесценивается в HTML5.
Ресурсы скрипта:
Сброс CSS
Пионер CSS Reset, Эрик Мейер объясняет: «Цель сброса таблицы стилей — уменьшить несогласованность браузеров в таких вещах, как высота строки по умолчанию, поля и размер шрифта заголовков и т. Д. публикация в мае 2007 г., если вам интересно. Стили сброса довольно часто появляются в фреймворках CSS, а первоначальный «сброс meyerweb» нашел свое применение в таких фреймворках CSS, как Blueprint, среди других.»Реализация сброса предоставляет резервные варианты для стилей и селекторов, которые не распознаются старыми браузерами. Вы можете поместить их прямо в начало своей основной таблицы стилей, использовать @import
или связать их в заголовке документа над основной таблицей стилей.
Ресурсы для сброса CSS:
Условные теги IEСценарии включения HTML5 и таблицы стилей сброса CSS необходимы только старым браузерам, поэтому нет смысла загружать их для всех.К счастью, Internet Explorer поддерживает условные теги, которые можно использовать для обнаружения определенной версии IE и передачи ей специальной таблицы стилей, сценария или сообщения. Например:
& lt;! - [если IE 6] & gt; & lt; p & gt; Мне искренне жаль, что вы потеряли опыт. Желаю вам вскоре получить доступ к браузеру webkit. & Lt; / p & gt; & lt;! [endif] - & gt; & lt; link rel = & quot; таблица стилей & quot; href = & quot; reset.css & quot; / & gt; & lt; link rel = & quot; таблица стилей & quot; href = & quot; стиль.css & quot; / & gt;
& lt;! - [если lt IE 9] & gt; & lt; script src = "js / libs / modernizr-2.0.6.min.js" & gt; & lt; / script & gt; & lt;! [endif] - & gt;
Условные операторы могут требовать нескольких операторов для точной настройки управления. В приведенном выше примере «if lt IE 9» означает «если меньше, чем Internet Explorer 9», то есть любая версия IE ниже 9 получит выгоду от сценария.
Подробнее:
Аудио и видео
Элементы
и в HTML5 получили самое быстрое распространение во всем мире благодаря обещанию лучшей мобильной совместимости и свободы с легкостью обслуживать собственные мультимедиа с помощью настраиваемого проигрывателя.К сожалению, аудио и видео HTML5 имеют наименьшую поддержку браузером из всех спецификаций HTML5 из коробки. Для реализации полной поддержки аудио или видео HTML5 требуется в два или три раза больше рутинных операций по кодированию, чем поддержка Flash, и по-прежнему отсутствуют многие важные функции, доступные в настоящее время в технологиях на основе подключаемых модулей. У Speckyboy уже есть отличный пост на эту тему, посвященный правильной реализации.
Визуальное проектирование с помощью HTML5
Совместимость с браузером — это лишь один из многих сложных факторов, связанных с ручным кодированием ваших собственных веб-сайтов, о которых можно позаботиться с помощью подходящих инструментов.Новый конструктор веб-сайтов HTML5 от Wix — это полностью бесплатный онлайн-инструмент для создания действительных, насыщенных веб-сайтов HTML5 с использованием визуального редактора перетаскивания, предоставляющего вам полную свободу творчества.
Его чрезвычайно легко освоить, и он поставляется с обширной библиотекой анимации, виджетов и графики, которые помогут вам начать проектирование с помощью HTML5 прямо сейчас. Вы можете быстро разработать и стилизовать любой макет с нуля и добавить аудио, видео, слайд-шоу и многое другое в формате HTML5 без сложного и трудоемкого ручного кодирования..
Заключение
Надеюсь, это введение в HTML5 и совместимость с браузерами предоставило вам начальную схему для создания лучшего опыта для ваших посетителей и клиентов. Спецификация HTMl5 находится на финише, и ожидается, что в ближайшие несколько лет ее принятие будет расти не по дням, а по часам, но всегда найдется процент, требующий рассмотрения. По мере развития сети вы можете быть уверены, что потребность в постепенной деградации и прогрессивном улучшении никогда не исчезнет, методы и требования просто изменятся.
Я что-то пропустил? Расскажите об этом в комментариях!
Какие требования к браузеру и компьютеру для …
Canvas поддерживает текущую и первые предыдущие основные версии следующих браузеров:
- Хром 94 и 95
- Firefox 92 и 93 (расширенные версии не поддерживаются *)
- Edge 94 и 95
- Браузер Respondus Lockdown (с поддержкой последних системных требований)
- Safari 14 и 15 (только Macintosh)
Вы можете убедиться, что браузер, который вы используете в настоящее время, обновлен, используя инструмент проверки браузера на шаге ниже.
Вы всегда должны использовать самую последнюю версию предпочитаемого вами браузера. Ваш браузер сообщит вам, если доступна новая версия.
Примечание. Safari 13.1 и более поздние версии содержат обновление, которое может вызывать проблемы с загрузкой файлов, отображением изображений и воспроизведением предупреждений чата в Canvas. Инженеры Canvas в настоящее время работают над решением этой проблемы. До тех пор вы можете избежать ошибок с файлами, изображениями и предупреждениями, отключив предотвращение межсайтового отслеживания в Safari при использовании Canvas.Если отключение межсайтового отслеживания не решает эти проблемы, попробуйте один из других поддерживаемых браузеров.
Баннер неподдерживаемого браузера
Некоторые поддерживаемые браузеры могут по-прежнему отображать баннер с сообщением Ваш браузер не соответствует минимальным требованиям для Canvas . Если вы обновили свой браузер, но по-прежнему видите предупреждающий баннер, попробуйте выйти из Canvas и удалить файлы cookie браузера.
Корпоративные браузеры расширенной версии
Chrome и Firefox предлагают расширенные версии для организаций, управляющих клиентскими рабочими столами.Chrome ESR можно обновлять с помощью существующей полной версии Chrome в любое время. Однако Firefox ESR обновляется только с каждой седьмой основной версией, что приводит к перекрытию Firefox ESR с устаревшими версиями. На веб-странице Firefox ESR отмечается, что ESR может поддерживаться не во всех веб-приложениях из-за задержки выпуска этой версии. Учреждениям, использующим Firefox ESR, следует рассмотреть возможность развертывания последней версии, чтобы обеспечить наилучшее взаимодействие с пользователем Canvas.
* Для расширенных версий браузеров предупреждающий баннер по-прежнему применяется и отображается в Canvas для любого браузера, версия ниже минимальной.
Известное поведение браузера
Как и все функции Canvas, наши продуктовые группы отдают приоритет противоположному поведению в отношении браузеров, и некоторые варианты поведения в предыдущей версии могут не быть устранены. Если в предыдущей версии браузера существует поведение, которого нет в текущей версии, лучшим решением является обновление до новейшей версии браузера.
Доступность
Canvas поддерживает инициативу W3C по обеспечению доступности Интернета.Чтобы узнать о поддерживаемых комбинациях программ чтения с экрана и браузера, см. Документ стандартов доступности Canvas.
Почему людям нравится HTML5-вывод Storyline
Мы все уже некоторое время готовимся к концу Flash. На самом деле прошло почти 10 лет с тех пор, как HTML5 стал будущим Интернета.
Мы начали использовать HTML5 еще в 2012 году, когда он был еще совсем новым. Но он быстро развивался, поэтому в 2018 году мы решили перестроить наш движок HTML5 с нуля, чтобы воспользоваться всеми новейшими веб-технологиями и предоставить учащимся наилучшие возможности.
Теперь, с выходом HTML5 в Storyline 360, ваши курсы выглядят лучше, к ним легче получить доступ учащихся, и они поддерживают больше функций, чем когда-либо прежде. Давайте посмотрим на некоторые важные улучшения.
Улучшение №1: ваши курсы выглядят лучше
Независимо от того, насколько индивидуален или сложен наш переработанный движок HTML5, ваш курс Storyline всегда будет выглядеть наилучшим образом в различных браузерах и на различных устройствах.
Например, в прошлом Storyline использовала векторные фигуры для отображения шрифтов.Это может привести к нечеткому содержанию курса в определенных веб-браузерах и разных размерах. Теперь наши выходные данные HTML5 генерируют веб-шрифты, которые четко отображаются в сети, поэтому содержание курса всегда идеально подходит для пикселей и легко читается. Взгляните:
Улучшение № 2: ваши курсы легче использовать
При использовании Flash пользователям приходилось устанавливать подключаемый модуль для просмотра курсов. И если они не будут обновлять его, они могут оказаться уязвимыми для угроз безопасности. Не говоря уже о том, что пользователям Apple пришлось искать другое устройство, так как на них Flash не работал.
Благодаря нашим выходным данным в формате HTML5 ваши курсы станут более безопасными и уменьшатся затруднения в процессе доступа к вашему содержанию. Учащиеся могут мгновенно получить доступ к вашему контенту на любом устройстве — подключаемый модуль не требуется. Кроме того, мы провели обширное тестирование производительности нашей продукции HTML5, чтобы убедиться, что курсы проходят быстро и плавно на любом устройстве, а учащиеся получают беспрепятственный опыт.
Улучшение № 3: ваши курсы включают больше функций
Благодаря улучшенному выводу HTML5 в Storyline вы можете воспользоваться всеми замечательными функциями — создавать интересные и доступные курсы для любого устройства.
В предыдущих версиях Storyline некоторые интерактивные элементы в вашем курсе не работали при публикации в HTML5 (но они работали во Flash). В новом выводе HTML5 поддерживаются почти все функции (см. Полный список). Курсы, опубликованные в HTML5, обеспечивают плавную анимацию и переходы, высокопроизводительное воспроизведение мультимедиа и сложную интерактивность.
Это означает, что у ваших учеников будет постоянный опыт, независимо от того, какое устройство они используют. А для учащихся, находящихся в пути, HTML5 использует преимущества новейших веб-технологий, поддерживая мобильные жесты, такие как пролистывание и масштабирование пальцем.
Кроме того, перестройка нашего механизма рендеринга HTML5 позволила нам значительно улучшить наши специальные возможности. Все эти функции раньше были доступны только при выводе Flash (или не были доступны вообще), но теперь они поддерживаются и при выводе HTML5:
- Раздел 508 Поддержка
- Поддержка WCAG 2.0
- Скрытые титры
- Столы
- Заказ настраиваемой вкладки
- Размер шрифта проигрывателя
- Альтернативный текст для СМИ
- Пропуск навигации игрока с программами чтения с экрана
- Идентификатор языка для программ чтения с экрана
Попробуйте наш вывод HTML5
Раньше все наши варианты публикации были ориентированы на Flash с дополнительным резервным HTML5.Теперь HTML5-only является форматом публикации по умолчанию как в Storyline 360, так и в Storyline 3.
Убедитесь сами в улучшении качества вывода, попробовав один из наших примеров на своем планшете или смартфоне:
Дополнительные ресурсы
Хотите узнать больше о HTML5? Или, может быть, вам нужна помощь в подготовке к концу Flash? Мы поможем вам:
Хотите испытать улучшенный вывод HTML5, но у вас нет Articulate 360? Начните бесплатную 60-дневную пробную версию и регулярно возвращайтесь в E-Learning Heroes за более полезными советами по всему, что связано с электронным обучением.Если у вас есть вопросы, поделитесь ими в комментариях.
Браузеры и устройства · Bootstrap
Узнайте о браузерах и устройствах, от современных до старых, которые поддерживаются Bootstrap, включая известные особенности и ошибки для каждого из них.
Поддерживаемые браузеры
Bootstrap поддерживает последние стабильные версии всех основных браузеров и платформ. В Windows мы поддерживаем Internet Explorer 10-11 / Microsoft Edge .
Альтернативные браузеры, которые используют последнюю версию WebKit, Blink или Gecko, напрямую или через API веб-просмотра платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) правильно отображаться и работать в этих браузерах. Более конкретная информация о поддержке представлена ниже.
Мобильные устройства
Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для всех основных платформ. Обратите внимание, что прокси-браузеры (такие как Opera Mini, Opera Mobile’s Turbo Mode, UC Browser Mini, Amazon Silk) не поддерживаются.
Хром | Firefox | Safari | Браузер Android и WebView | Microsoft Edge | |
---|---|---|---|---|---|
Android | Поддерживается | Поддерживается | НЕТ | Android v5.0 + поддерживается | Поддерживается |
iOS | Поддерживается | Поддерживается | Поддерживается | НЕТ | Поддерживается |
Windows 10 Mobile | НЕТ | НЕТ | НЕТ | НЕТ | Поддерживается |
Настольные браузеры
Аналогичным образом поддерживаются последние версии большинства настольных браузеров.
Хром | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | Поддерживается | Поддерживается | НЕТ | НЕТ | Поддерживается | Поддерживается |
Окна | Поддерживается | Поддерживается | Поддерживается, IE10 + | Поддерживается | Поддерживается | Не поддерживается |
Для Firefox, помимо последней нормальной стабильной версии, мы также поддерживаем последнюю версию Firefox с расширенной поддержкой (ESR).
Неофициально Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux и Internet Explorer 9, хотя официально они не поддерживаются.
Список некоторых ошибок браузера, с которыми приходится бороться Bootstrap, можно найти в нашей Стене ошибок браузера.
Internet Explorer
ПоддерживаетсяInternet Explorer 10+; IE9 и ниже нет. Имейте в виду, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются в IE10 или требуют свойств с префиксом для полной функциональности.Посетите Могу ли я использовать… для получения подробной информации о поддержке браузером функций CSS3 и HTML5.
Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самая стабильная версия нашего кода, и наша команда по-прежнему поддерживает критические исправления ошибок и изменения документации. Однако никаких новых функций к нему добавляться не будет.
Модальные окна и раскрывающиеся списки на мобильном телефоне
Переполнение и прокрутка
Поддержка переполнение: скрыто;
в элементе
довольно ограничен в iOS и Android.С этой целью, когда вы прокручиваете верхнюю или нижнюю часть модального окна в браузерах этих устройств, содержимое
начнет прокручиваться. См. Ошибку Chrome № 175502 (исправлена в Chrome v40) и ошибку WebKit № 153852.
Текстовые поля iOS и прокрутка
Начиная с iOS 9.2, пока модальное окно открыто, если начальное касание жеста прокрутки находится в границах текстового
или , содержимое
под модальным будет прокручиваться вместо самого модального окна.См. Ошибку WebKit № 153856.
Выпадающие меню панели навигации
Элемент .dropdown-backdrop
не используется в iOS в навигации из-за сложности z-индексации. Таким образом, чтобы закрыть раскрывающиеся списки на панели навигации, вы должны непосредственно щелкнуть элемент раскрывающегося списка (или любой другой элемент, который вызовет событие щелчка в iOS).
Масштабирование в браузере
При масштабировании страницы неизбежно появляются артефакты рендеринга в некоторых компонентах как в Bootstrap, так и в остальной части Интернета. В зависимости от проблемы мы можем ее исправить (сначала выполните поиск, а затем при необходимости откройте проблему).Однако мы склонны игнорировать их, поскольку они часто не имеют прямого решения, кроме хитрых обходных путей.
Sticky
: hover
/: focus
на iOS
В то время как : hover
невозможно на большинстве сенсорных устройств, iOS эмулирует это поведение, что приводит к «липким» стилям наведения, которые сохраняются после нажатия одного элемента. Эти стили наведения удаляются только тогда, когда пользователи касаются другого элемента. Такое поведение считается в значительной степени нежелательным и, похоже, не является проблемой для устройств Android или Windows.
На протяжении всей нашей альфа- и бета-версии v4 мы включали неполный и закомментированный код для включения прокладки медиа-запросов, которая отключала бы стили наведения в браузерах сенсорных устройств, которые имитируют наведение. Эта работа никогда не была полностью завершена или включена, но, чтобы избежать полной поломки, мы решили исключить эту прокладку и оставить миксины как ярлыки для псевдоклассов.
Печать
Даже в некоторых современных браузерах печать может быть необычной.
Начиная с Safari v8.0, использование класса .container
с фиксированной шириной может привести к тому, что Safari будет использовать необычно маленький размер шрифта при печати. Подробнее см. В выпуске № 14868 и об ошибке WebKit № 138192. Одним из возможных способов решения проблемы является следующий код CSS:
@media print {
.container {
ширина: авто;
}
}
Стандартный браузер Android
По умолчанию Android 4.1 (и даже некоторые более новые версии) поставляются с приложением Browser в качестве предпочтительного веб-браузера по умолчанию (в отличие от Chrome).К сожалению, в приложении «Браузер» много ошибок и несоответствий с CSS в целом.
Для элементов
стандартный браузер Android не будет отображать боковые элементы управления, если применяется граница border-radius
и / или border
. (Подробности см. В этом вопросе StackOverflow.) Используйте приведенный ниже фрагмент кода, чтобы удалить неправильный CSS и отобразить
как элемент без стиля в стандартном браузере Android. Обнюхивание пользовательского агента позволяет избежать вмешательства в браузеры Chrome, Safari и Mozilla.
<сценарий>
$ (function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf ('Mozilla / 5.0')> -1 && nua.indexOf ('Android')> -1 && nua.indexOf ('AppleWebKit')> -1 && nua.indexOf ('Chrome') === -1)
if (isAndroid) {
$ ('select.form-control'). removeClass ('form-control'). css ('ширина', '100%')
}
})
Хотите увидеть пример? Посмотрите эту демонстрацию JS Bin.
Валидаторы
Чтобы обеспечить наилучшее взаимодействие с устаревшими браузерами и браузерами с ошибками, Bootstrap в нескольких местах использует взломы браузера CSS для нацеливания специального CSS на определенные версии браузера, чтобы обойти ошибки в самих браузерах.Эти хаки по понятным причинам заставляют валидаторов CSS жаловаться на их недействительность. В некоторых случаях мы также используем передовые функции CSS, которые еще не полностью стандартизированы, но используются исключительно для прогрессивного улучшения.
Эти предупреждения о проверке не имеют значения на практике, так как часть нашего CSS, не являющаяся хакерской, действительно полностью проверяется, а хакерские части не мешают правильному функционированию нехакерской части, поэтому мы сознательно игнорируем эти конкретные предупреждения.
В наших документах HTML также есть несколько тривиальных и несущественных предупреждений проверки HTML из-за того, что мы включили обходной путь для определенной ошибки Firefox.
Поддержка браузера HTML5
Вы можете научить старые браузеры правильно обрабатывать HTML5.
Поддержка браузера HTML5
HTML5 поддерживается всеми современными браузерами.
Кроме того, все браузеры, старые и новые, автоматически обрабатывают нераспознанные элементы как встроенные элементы.
Благодаря этому вы можете «научить» старые браузеры обрабатывать «неизвестные» HTML-элементы.
Вы даже можете научить IE6 (Windows XP 2001), как обрабатывать неизвестные элементы HTML. |
Определить элементы HTML5 как блочные
HTML5 определяет восемь новых семантических элементов HTML. Все это блочного уровня элементов.
Чтобы обеспечить правильное поведение в старых браузерах, вы можете установить CSS отображает свойство в блоке :
верхний колонтитул, раздел, нижний колонтитул, в сторону, навигация, главная, статья, рисунок {
дисплей: блок;
}
Добавление новых элементов в HTML
Вы также можете добавить любой новый элемент в HTML с помощью уловки браузера.
В этом примере добавляется новый элемент
Пример
Создание элемента HTML
document.createElement («myHero»)
myHero {
display: block;
цвет фона: #ddd;
отступ: 50 пикселей;
font-size: 30px;
}
Мой первый заголовок
Мой первый абзац.
Оператор JavaScript document.createElement («myHero») является добавлен только для удовлетворения IE.
Проблема с Internet Explorer
Вы можете использовать решение, описанное выше, для всех новых элементов HTML5, но:
Internet Explorer 8 и более ранние версии не позволяют стилизовать неизвестные элементы. |
К счастью, Sjoerd Visscher создал «HTML5, поддерживающий JavaScript», « the заточка «:
Код выше является комментарием, но версии, предшествующие IE9, будут прочтите (и поймите).
Полное решение для затворов
Пример
Стиль HTML5
Моя первая статья
Лондон — столица Англии.Это самый
густонаселенный город в Соединенном Королевстве, с пригородами более 13
миллион жителей.