Хорош для всех-2

Мой Компьютер, №1-2 (536-537), 26.01.2009

К сожалению, стандартизация не является стопроцентной гарантией кросс-браузерности сайта. Причину этого мы уже рассмотрели — не все браузеры интерпретируют страницы в строгом соответствии со стандартами. Определенные тэги и параметры, присутствующие в стандарте, могут не восприниматься браузером или же интерпретироваться неверно.

Как показывает практика, больше всего проблем возникает, когда в основе верстки сайта лежат блочные элементы (<div>), чье расположение и оформление задано таблицей стилей. «Камнем преткновения» зачастую становится всеми «любимый» продукт от Microsoft, вполне оправдывая упрямством и нежеланием идти на компромиссы свое народное название «ослик».

Я ни в коем случае не призываю использовать в верстке только табличный дизайн. Я просто хочу порекомендовать следующее: если есть участки кода, которые можно без особых проблем сверстать средствами табличного дизайна, его и используйте. Не стоит создавать себе лишние проблемы там, где их нет :-). Если же без div’ов никак не обойтись, делайте верстку на их основе.

Естественно, рекомендуется использовать только те тэги, которые поддерживаются и одинаково интерпретируются всеми браузерами. Неплохой справочник по основным кросс-браузерным HTML-тэгам можно полистать по адресу http://html.manual.ru.

С CSS дела обстоят чуть похуже. Так называемый safe list (список свойств, которые поддерживаются всеми браузерами) очень мал и включает в себя только самые базовые параметры разметки. Их для решения большинства задач верстки недостаточно. Но IE, Opera и Firefox поддерживают большинство свойств из стандарта CSS Level 2 (http://docs.luksian.com/internet/html/css2).

Иногда приходится прибегать к ухищрениям. Например, кроссбраузерный вариант таблицы с рамкой толщиной 1 пиксель выглядит как на рис. 1.

<style type=»text/css»>

             table.onepxtable {

                        background: Black;

             }

             table.onepxtable td {

                        background: White;

             }

</style>

……………………………………………..

<table class=»onepxtable» border=»0″ cellspacing=»1″>

<tr>

            <td>1</td>

……………………………………………..

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

Довольно неплохая подборка статей по написанию кросс-браузерных таблиц стилей лежит по адресу http://www.sitestroy.ru/css_10.html.

Бывает так, что сделать универсальный HTML-код или таблицы стилей для всех браузеров невозможно. Тогда необходимо определять по параметру User-Agent HTTP-запроса браузер клиента и выдавать соответствующий код. Пример php-кода, реализующего такую схему кросс-браузерности, приведен ниже. Для определения браузера использован специальный класс, код которого можно скачать по ссылке http://www.wmast.com.ua/web/articles.php?clause=53.

include(‘browser_class.inc’);

//создаем класс

$b = new browser();

// получаем информацию о браузере

$browserinfo = $b->whatBrowser();

…………………………..

// в зависимости от типа браузера

switch($browserinfo[«browsertype»])

{

 case «Firefox»: $Smarty->display(«news_ff.tpl»);

   break;

 case «Opera»: $Smarty->display(«news_op.tpl»);

   break;

 case «MSIE»: $Smarty->display(«news_ie.tpl»);

   break; 

}

Охотимся на «жуков»

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

«Подумаешь! — скажете вы. — Установить оперу, огнелис, сафари, а ослик в системе и так есть».

Да, под Windows с установкой различных браузеров проблем не будет. Но как быть с другими ОС, например, с Linux, которая, кстати, тоже является неплохой платформой для веб-разработки? Opera для Linux существует только для i386-версий, Internet Explorer при помощи дополнительного ПО (см. сайт http://www.tatanka.com.br/ies4linux/page/Main_Page) и набирающий ныне обороты Google Chrome (http://media.codeweavers.com/pub/crossover/chromium) можно худо-бедно запустить под wine, а как быть с Safari? И что делать, если надо протестировать сайт сразу под несколькими версиями одного и того же браузера?

Как говорится, «вихід є»!

Существует один очень удобный веб-сервис — http://browsershots.org, позволяющий осуществить предпросмотр сайта сразу во многих браузерах (рис. 2).

Интерфейс элементарный — вводим адрес странички, которую хотим проверить, нажимаем кнопку и ждем результата. Принцип работы сервиса очень прост: есть много участников-добровольцев по всему миру, которые поддерживают этот проект. Поданная вами заявка добавляется в очередь и рассылается им в соответствии с указанными ими при регистрации предпочтениями (ОС, браузер). После получения уведомления о новом запросе доброволец открывает браузер, загружает вашу страничку и присылает назад скриншот :-). Для обновления информации про статус заявки следует обновить страницу, полученные скриншоты добавляются автоматически (рис. 3).

Каждый скриншот можно посмотреть на отдельной страничке вместе с информацией про ОС, версию браузера, движка и JavaScript-интерпретатора (рис. 4), а также в полный размер.

Предусмотрена также удобная функция — скачать все скриншоты в одном архиве. По скорости работы сервис вполне удовлетворителен — выбранные мною для теста 15 комбинаций бразуров и ОС загрузились за 3 минуты «с хвостиком». Единственный совет — пользуйтесь сервисом утром или днем (добровольцы добровольцами, но вечером хотят отдохнуть все :-).

Конечно, полноценно заменить целевой браузер, на котором надо протестить сайт, сервис Browser Shots не сможет, но сделать беглый тест на кросс-браузерность — запросто.

Итоги

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

И потом, мы рассмотрели только верстку… а ведь браузеры еще и по-разному интерпретируют JavaScript! Но это уже другая статья.

Алексей «CyberAdmin» СЕРДЮКОВ