Поддержка браузерами технологий HTML5 и CSS3 Текст научной статьи по специальности «Прочие социальные науки»

УДК 004.442

ПОДДЕРЖКА БРАУЗЕРАМИ ТЕХНОЛОГИЙ HTML5 И CSS3

© А.В. Новожилов, Г.С. Акулов

Ключевые слова: HTML5; CSS3; стандарты; технологии веб-программирования.

Исследованы вопросы перехода на новые технологии веб-программирования HTML5 и CSS3, которые упрощают процесс создания интерактивных веб-сайтов за счет внедрения новых элементов и атрибутов. Проведено исследование уровня поддержки браузерами указанных технологий, выявлено, что не все браузеры на данный момент в полной мере поддерживают HTML5 и CSS3. Рассмотрены такие браузеры, как Google Chrome, Opera, Safari, Firefox, Internet Explorer.

В течение последних лет в сети Интернет наблюдается бум развития и популяризации интерактивных веб-сайтов [1]. Серьезным шагом в этом направлении стало появление HTML5 - технологии, призванной сделать Интернет быстрее, проще и доступней для каждого, а также в связке с CSS3 заменить Adobe Flash во многих ее нишах. Дополнительно к этому HTML5 является единственным унифицированным разметочным языком, полноценно работающим наравне с родными языками программирования большинства современных мобильных операционных систем, таких как Android, iOS, Windows Mobile, Blackberry and WebOS [2].

Несмотря на то, что спецификация 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.

2. Meier R., Mahemoff M. Google I/O 2011: HTML5 versus Android: Apps or Web for Mobile Development? URL: http://www.you-tube.com/watch?v=4f2Zky_YyyQ (accessed: 29.10.2013).

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: novozhilov_andrey68@inbox.ru

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: novozhilov_andrey68@inbox.ru

Акулов Геннадий Сергеевич, Тамбовский государственный университет им. Г.Р. Державина, г. Тамбов, Российская Федерация, бакалавр по направлению подготовки «Информационная безопасность» института математики, физики и информатики, e-mail: genaj4@rambler.ru

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: genaj4@rambler.ru