Тестирование в IE

В браузерах IE9, IE8 можно переключать движок сайта на любую версию, начиная с 7.0. Переключение реализовано довольно точно, и указав режим документа IE7 можно получить документ таким, как если бы его просматривали в этой версии, со всеми её ошибками. Само переключение делается двумя способами.

1. Через режим представления совместимости.

2. Через средства разработчика.

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

Рис. 5.4 Адресная строка в IE9

Эта кнопка не всегда отображается, к примеру, её нет для локальных страниц и нет для документов, в коде которых содержится одна из этих строк.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="X-UA-Compatible" content="IE=7" />

Эти строки насильно переводят браузер IE в режим 7.0.

Если требуется протестировать локальную страницу (вроде c:\www\page.html) для отображения в IE7, в настройках режима (Сервис > Параметры режима представления совместимости) следует поставить галочку в пункте «Отобразить узлы интрасети в режиме представления совместимости» (рис. 5.5).

Рис. 5.5. Параметры режима представления совместимости

С тестирование под IE6 всё сложнее. Браузер довольно тесно интегрируется с операционной системой Windows, поэтому установить одновременно несколько разных версий IE не получится. Некоторые вебразработчики обходят это ограничение, устанавливая Windows на разные разделы жёсткого диска (или разные диски) или используя виртуальную машину. Компания Microsoft предлагает бесплатную

виртуальную машину Virtual PC 2007, которую можно скачать с её сайта. Именно этот способ рекомендуется специалистами Microsoft для одновременной работы нескольких версий IE. Важно и то, что вам не придётся покупать дополнительную лицензию на Windows.

Также имеются программы, которые обходят указанное ограничение. Лучшей в этом роде можно считать MultipleIE, она устанавливает несколько старых версий IE сразу. Из них полезной является только IE6, остальные вроде IE5.5 или IE4 явно устарели. К сожалению MultipleIE работает только под

Windows 2000 и Windows XP и не ставится на Windows Vista и Windows 7. Впрочем, некоторые утверждают, что им это удалось, но способ нетривиальный и не подходит большинству пользователей.

Наибольшей популярностью пользуется программа IETester, соединяющая в одной оболочке сразу несколько версий IE. IETester имеет простой и наглядный интерфейс, поддерживает русский язык и умеет во вкладках отображать страницу в разных версиях IE, начиная с 5.5. Достаточно щёлкнуть по желаемой кнопке на панели (рис. 5.6).

Рис. 5.6. Кнопки для открытия вкладок с версиями IE

Адрес страницы вводится в адресной строке текущей вкладки. Чтобы не запутаться, какая вкладка какой версии IE соответствует, на них отображается соответствующий номер (рис. 5.7).

Рис. 5.7. Вкладки с версиями

Пока IETester ещё даже не добрался до стабильной версии 1.0 и содержит массу мелких ошибок. Некоторые документы отказываются загружаться, версия IE7 иногда не работает с локальными страницами, возможны вылеты программы. Среди веб-разработчиков IETester носит славу «глючного», но кроме виртуальной машины, альтернатив ему нет.

Полезные ссылки

Пит Лепэйдж. Работа обозревателей IE6 и IE7 на одном компьютере (англ.) http://msdn.microsoft.com/ru-ru/library/cc308490.aspx

Virtual PC 2007 http://www.microsoft.com/downloads/en/details.aspx?FamilyID=04d26402-3199-48a3-afa2- 2dc0b40a73b6

MultipleIE http://tredosoft.com/Multiple_IE

IETester http://www.my-debugbar.com/wiki/IETester/HomePage

Условные комментарии

Из-за возможных различий в отображении браузерами одного и того же кода возникает проблема идентификации браузера и его версии, чтобы «подсунуть» ему персональный код. Браузер IE поддерживает специальную технологию определения версии под названием «условные комментарии». Синтаксис их применения следующий.

<!--[if условие]> невидимый HTML-код <![endif]--> <![if условие]> видимый HTML-код <![endif]>

В первом случае синтаксис схож с обычными комментариями HTML имеющими вид <!-- -->. Такая мимикрия обеспечивает валидность кода, поскольку всё, что находится внутри любой браузер кроме IE считает обычным комментарием. Они не выводятся на странице и не интерпретируются как код, поэтому могут содержать любые, даже ошибочные теги и текст.

Во втором случае всё с точностью наоборот, это уже не комментарий, а специфический тег, как его воспринимают браузеры. Поэтому применение указанного синтаксиса приведёт к ошибке валидации кода. Зато IE при соблюдении условий позволяет выводить любой текст и теги.

В силу практичности и соблюдения валидности кода в дальнейшем будем включать только синтаксис вида <!--[if условие]> <![endif]-->.

Условие работает аналогично языкам программирования. Если оно истинно (true), то браузер выполняет HTML-код, если условие ложно (false), то код не выполняется и пропускается. В формировании условий используются ключевые слова для идентификации версии браузера (табл. 5.1).

Табл. 5.1. Ключевые слова для определения браузера

Условные комментарии для изменения стиля для браузера IE7 показаны в примере 5.1.

Пример 5.1. Стиль для IE7 XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Условные комментарии</title>

<style type="text/css"> P {

}color: green; /* Для всех браузеров, кроме IE7 */

</style>

<!--[if IE 7]>

<style type="text/css"> P {

}color: red; /* Для браузера IE7 */

</style> <![endif]-->

</head>

<body>

<div>Lorem ipsum dolor sit amet...</div>

BODY {

}background: url(images/star.png); /* Фон веб-страницы */

.transparent {

background-color: rgba(0, 120, 201, 0.7);

/* Цвет фона и значение прозрачности */ padding: 10px; /* Поля вокруг текста */

}color: #fff; /* Цвет текста */

</style>

<!--[if (lt IE 9) & !(IE 6)]> <style type="text/css">

.transparent { filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr=#c80078c9, } endColorstr=#c80078c9);

</style> <![endif]--> <!--[if IE 6]>

<style type="text/css">

.transparent { background: #0078c9; } </style>

<![endif]-->

</head>

<body>

<div class="transparent">

Исполинская звездная спираль с поперечником в 50 кпк, это удалось установить по характеру спектра, прекрасно иллюстрирует

метеорный дождь, тем не менее, Дон Еманс включил в список всего 82 Великие Кометы.

</div>

</body>

</html>

Результат примера в браузере IE9 показан на рис. 5.9.

Рис. 5.9. Полупрозрачность в браузере IE

Фильтр gradient предназначен, как понятно из его названия, для создания градиентов. Он позволяет делать переход от одного цвета к другому с учётом прозрачности, поэтому его можно использовать как аналог RGBA. Достаточно только задать одинаковое значение цвета у параметров startColorstr и endColorstr, тогда заливка будет сплошной. Для этих параметров цвет указывается в специфическом формате ARGB вида #aarrggbb. Первые два символа это уровень прозрачности от 0 до 255 в шестнадцатеричном формате, остальные шесть символов привычное значение цвета. В табл. 5.3 показано сопоставление между процентной записью прозрачности и шестнадцатеричной. Ноль соответствует полной прозрачности, а FF полной непрозрачности.

Табл. 5.3. Значения прозрачности

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

<!--[if !IE]>-->

Для всех браузеров кроме IE

<!--<![endif]-->

В первой и третьей строке добавляется -->, браузеры воспринимают эти строки как комментарий и игнорируют. Internet Explorer в свою очередь считает их условными комментариями и обрабатывает согласно своей логике.

Условные комментарии это главное средство для исправления ошибок Internet Explorer. Простой и понятный синтаксис делает ненужными всяческие хаки, заменяя их стандартной конструкцией. Стили для IE правильнее выделить в отдельный CSS-файл, который будет загружаться только при необходимости.

<link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]><link href="ie.css"

rel="stylesheet" type="text/css" /><![endif]-->

Для всех браузеров подключается файл style.css, а для IE версии 7.0 и ниже ещё один файл ie.css. При этом остальные браузеры этот файл будут игнорировать и не загружают.