Кроссплатформенная разработка web-сайтов

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

Целью данной статьи является анализ методов и технологий, обеспечивающих кроссплатформенность веб-приложений.

В данный момент наиболее популярными браузерами являются: Google Chrome, Opera, Firefox, Safari, Internet Explorer. Почти все из них идут в ногу со временем и стараются подстраиваться под общепринятые стандарты. Исключением является Internet Explorer. Этот браузер появился одним из первых и фактически является прародителем всех последующих. Разработчики долгое время поддерживали обозреватель на высоком уровне, имелся мощный функционал и приятный стиль отображения. Но вскоре он начал отставать от своих конкурентов по всем параметрам и, в итоге, перестал подстраиваться под быстроменяющиеся общепринятые стандарты обработки web-страниц. Остальные же браузеры сумели идти в ногу со временем, поэтому с ними в процессе web-программирования проблем возникает намного меньше. Тем не менее, стандарты меняются, версии web-обозревателей устаревают, им на замену создаются новые, с современным функционалом и методами обработки данных, что так же порождает множество проблем.

Рассмотрим основные проблемы кроссплатформенности и выделим причины разного отображения браузерами исходного кода:

• 1. Усовершенствование языков. Языки web-программирования, как и все другие, постоянно изменяются, дополняются и необходимо вовремя изучать и по назначению использовать их новые функции. Некоторые функции перестают существовать, появляются другие, изменяются уже имеющиеся. Это влечет за собой индивидуальное восприятие одних и тех же таблиц стилей разными версиями языка.
• 2. Версии браузеров. Вслед за языками программирования усовершенствуются и браузеры, но не все пользователи их обновляют, что порождает проблему устаревшего способа отображения web-страницы, использующей современные функции и методы.
• 3. Способ отображения браузеров. Некоторые web-обозреватели по-своему обрабатывают некоторые правила таблиц стилей. Браузеры стараются помочь разработчикам и при возможности скрывают явные ошибки.
• 4. Атрибуты по умолчанию. Разные версии web-обозревателей используют свои собственные атрибуты по умолчанию (рамки, шрифты, цвета).

Необходимо отметить, что единого алгоритма, подходящего для решения вышеперечисленных проблем для всех web-сайтов, так и не было создано, а, значит, необходимо использовать тот или иной метод в зависимости от задач, стоящих перед разработчиком.

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

сайт браузер программный кроссплатформенный Время от времени браузеры выпускают новые версии, но не все спешат их обновлять. Большинство пользователей довольствуются тем, что у них уже есть, а некоторые просто боятся навредить операционной системе. Это порождает множество проблем для «верстальщиков» сайтов, так как хороший сайт должен везде корректно отображаться. Используя такие программы как Dreamweaver, WordPress и многие другие или специальные модули для проверки корректности кода, можно отловить всевозможные ошибки браузеров и вовремя заменить подозрительные участки кода работоспособными аналогами. Часто для таких корректировок необходимо пожертвовать внешним видом сайта в общем или писать для некоторых версий браузеров отдельные таблицы стилей.

Зачастую именно способ отображения и использования некоторых параметров браузером доставляет много неудобств разработчикам web-сайтов. Примером послужит отображение сайта университета в браузерах Google Chrome (рис. 1) и Internet Explorer (рис. 2). На скриншотах видно, что отображение одного и того же сайта в разных браузерах очень отличается. Но даже из этой ситуации есть выход. Первым вариантом является написание таблиц стилей для каждого обозревателя отдельно, а вторым — написание сайта при постепенной проверке корректности отображения и, по возможности, упрощение стиля или подбор аналоговой версии кода. В случае, который показан на рис. 1 и рис. 2, проблема заключается в следующем:

Рисунок 1. Отображение в браузере Google Chrome.

Рисунок 2. Отображение в браузере Internet Explorer.

• 1. IE (Internet Explorer) не увеличивает размеры блочного элемента при использовании внутренних отступов (padding), что повлияло на смещение положения блоков в верхней части страницы;
• 2. IE игнорирует параметры top и left для элемента с параметром «position: fixed» и, более того, разрешает его позиционирование значением «text-align: center», указанным в родительском элементе;
• 3. IE отображает ошибки разработчика, которые большинство браузеров скрывают.

В данном случае это ошибочные значения «margin» внутри центрального блока, которые сдвинули блок новостей. Отлавливание ошибки разработчика в обозревателе IE, которую автоматически исправляют другие браузеры, показано на рис. 3.

Рисунок 3. Отлавливание ошибки в IE.

После отключения внешнего отступа (margin) для блока в режиме «Средства разработчика» была найдена ошибка, влияющая на местоположение основных блоков.

Самым простым способом решения проблемы с атрибутами по умолчанию является определение в таблице стилей правил, которые не дадут возможности браузеру некорректно отображать web-сайт [2]:

html, body, div, span, applet, object, iframe,.

h1, h2, h3, h4, h5, h6, p, blockquote, pre,.

a, abbr, acronym, address, big, cite, code,.

del, dfn, em, font, img, ins, kbd, q, s, samp,.

small, strike, strong, sub, sup, tt, var,.

dl, dt, dd, ol, ul, li,.

fieldset, form, label, legend,.

table, caption, tbody, tfoot, thead, tr, th, td {.

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 14px;

font-family: inherit;

vertical-align: top;

background: transparent;

font: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;

background-color: white;

}.

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

в разных браузерах может привести к непредсказуемым появлениям различных отступов, не поддающихся форматированию даже с использованием конструкции «! important». Такого рода проблема проявляет себя в браузере Google Chrome, в котором при просмотре страницы в режиме разработчика (F12) можно найти следующее правило:

user agent stylesheet.

p {.

display: block;

• — webkit-margin-before: 1em;
• — webkit-margin-after: 1em;
• — webkit-margin-start: 0px;
• — webkit-margin-end: 0px;

}.

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

значения «display: block;» в «display: inline-block;». Это приведет к тому, что браузер потеряет возможность управлять отступами данного тега и станет возможным последующее его наделение новыми стилями.

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

• · установить все браузеры и тестировать web-страницу;
• · установить Dreamweaver либо WordPress, которые включают в себя специальные модули для тестирования правильности кода.

При выборе первого варианта основным инструментом отладки является просмотр и изменение исходного кода в «среде разработчика». Желательно после каждого значимого изменения кода проверять состояние отображения во всех браузерах, а не откладывать до завершения его создания, так как, возможно, необходимо будет изменить не только таблицы стилей, а и разметку web-страницы. Выбрав второй вариант, будет проще находить ошибки, но время от времени необходимо проверять, помогла ли в полной мере среда разработки.

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

• 1. Необходимо использование сторонних специализированных программ;
• 2. Обязательна своевременная проверка корректности отображения в различных браузерах;
• 3. Выполнять сброс параметров атрибутов по умолчанию;
• 4. Определять версии языка разметки;
• 5. Постоянно следить за усовершенствованием языков программирования и состоянием хоста.

• 1. Кроссбраузерная верстка сайта — [Электронный ресурс]. — Режим доступа: http://artspektr.com/information/krossbrauzernaya-verstka-sayta (Дата обращения: 18.03.2016).
• 2. Полезные шорткоды CSS. — [Электронный ресурс]. — Режим доступа: http://mainview.ru/programming/css/poleznye-shortkody-css (Дата обращения: 17.03.2016).