Хорош для всех-2
06.03.09Мой Компьютер, №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» СЕРДЮКОВ
Web-droid editor

влажность:
давление:
ветер:

Обзор игрового ноутбука Lenovo Legion 5i 15IMH05: дуализм



Аналитики говорят о важности умения быть гибким, что в жизни, что в бизнесе. Рассматриваемый ноутбук Lenovo Legion 5i 15IMH05 – хороший пример того, как можно успешно работать на две стороны – и в работе, и в развлечениях

Viber дозволив блокувати дзвінки від невідомих контактів
Viber блокировка мессенджер обновлениеУ Viber з’явилась функція “Блокування невідомих абонентів”, користувачі не будуть отримувати дзвінки від невідомих контактів
Игровой смартфон Asus ROG Phone 5 стоит 35 000 грн в Украине
ASUS Republic of Gamers игры смартфон события в УкраинеКомпания ASUS начинает продажи в Украине нового игрового смартфона ROG Phone 5. Модель имеет очень впечатляющие характеристики и некоторые необычные решения
