Кроссбраузерность остается одной из самых сложных проблем в веб-разработке. Следование веб-стандартам само по себе дает достаточно высокий уровень совместимости, но не все браузеры совершенны, старые браузеры часто удивляют разработчиков своим творческим подходом к обработке (X)HTML/CSS кода. Перед разработчиком стоит задача, обеспечения максимальной совместимости сайта с наиболее популярными браузерами, чтобы каждый посетитель мог с удобством его использовать.

Тестирование на кроссбраузерность необходимо

Вы не можете знать, каким браузером пользуется очередной посетитель вашего сайта, а различия в поведении и причудах браузеров все еще велики, чтобы можно было игнорировать их. К примеру, различные браузеры и операционные системы используют различные способы вывода шрифтов (Win vs. Mac on handling fonts). Размеры шрифтов тоже не одинаковы в различных системах, а некоторые шрифты могут просто отсутствовать на компьютере пользователя.

Internet Explore has the browser usage share of 46%
Глобальная статистика использования браузеров: IE6 доминирует; пользователей IE 7 уже больше чем пользователей Firefox 2.
По состоянию на: 01.10.2007. Источник.

Firefox в Linux отображает сайты не так, как Firefox в Windows. К тому же приходиться иметь дело с десятками различных версий браузеров, да еще и с Internet Explorer 6, божьим даром для хакеров, которым пользуются 46% пользователей. Практически невозможно постоянно помнить обо всех возможных проблемах, детальное тестирование в различных браузерах и операционных системах — это единственный способ обеспечить нормальное функционирование сайта.

Как протестировать сайт на кроссбраузерность

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

  • в различных браузерах (семейство Mozilla, Internet Explorer, Opera, Safari, мобильные браузеры),
  • при различных разрешениях экрана (обычно 640×480, 800×600, 1024×768, 1280×800)
  • в различных операционных системах (Mac OS, Linux, Win).

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

Проблема № 1: Internet Explorer

В Windows предусмотрена возможность установки только одной версии Internet Explorer, но, чтобы гарантировать правильное отображение сайта в наиболее популярных браузерах, вам нужно как минимум IE6 и IE7. Microsoft предлагает использовать Virtual PC, чтобы запускать браузеры одновременно, но есть и более простое решение, Multiple IE?s package от TredoSoft позволяет установить на компьютер несколько версий IE.

Screenshot

Установка очень проста, достаточно следовать инструкциям, а в результате вы получаете IE3, IE4.01, IE5, IE5.5, IE6 абсолютно не зависящие друг от друга, причем установочный файл занимает всего 10Mb. Обратите внимание, что браузеры установленные таким образом работают не очень устойчиво и иногда падают без видимых причин, но, несмотря на это, свои задачи пакет выполняет в полном объеме. Установщик работает в Windows XP, пользователям Windows Vista придется использовать have to use Microsoft Visual PC 2007.

Screenshot

Если вы хотите протестировать сайт в IE7, не устанавливая его на компьютер, обратите внимание на ieCapture. Мгновенный результат абсолютно бесплатно.

Проблема № 2: Safari

Только одна версия Safari может быть установлена в Mac OS X. Способ рендеринга сайта определяет установленная версия Web Kit Framework. Но, как и в случае с IE, есть решение от стороннего производителя, Multi-Safari позволяет установить 10 версий Safari, начиная от 1.0 и до 2.0.4.

Multiple Safari
Multi-Safari позволяет установить десяток версий Safari.

Проблема № 3: Linux

Чтобы протестировать сайт в браузерах для Linux, можно использовать Knoppix или Ubuntu. Knoppix позволяет запустить Debian GNU/Linux за 5 минут. В обоих случаях возможен запуск с CD-ROM без установки системы на компьютер.

Smashing Magazine в Firefox под Ubuntu
Smashing Magazine в Firefox под Ubuntu

В Knoppix установлены браузеры Konqueror и Mozilla, в Ubuntu Firefox 2.0. Загрузить обе системы можно бесплатно через BitTorrent или FTP (700Mb), а можно и заказать бесплатный CD.

Онлайновые сервисы и инструменты

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

  • IE Web Renderer
    IE NetRenderer позволяет посмотреть, как будет выглядеть сайт в IE 7, 6 или 5.5. Режимы Miixed и Difference показывают различия отображения в разных версиях (IE6 vs. IE7), накладывая скриншоты друг на друга

    Web Renderer

  • Browsershots
    Позволяет тестировать сайты не только в Firefox, Opera, IE и Safari, но и в экзотических браузерах (Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey), возможна настройка разрешения и глубины цвета, а также поддержки JavaScript и Flash.

    Screenshot

    Все отправленные URL добавляются в очередь, время ожидания их обработки зависит от загруженности сервера. Вы можете создать закладку, чтобы вернуться за результатами своего запроса или получить уведомление по E-Mail или RSS. Можно загрузить все свои скриншоты в виде zip архива.

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

    Screenshot

    Сейчас сервис создает скриншоты в 17 браузерах для Windows и 6 браузерах для Mac OS X, а вскоре будут добавлены еще некоторые браузеры. И хотя сервис не столь всеобъемлющий как другие, цена достаточно высока и составляет 39$ в месяц за индивидуальную лицензию. Есть интересная возможность создания скриншотов рассылок в почтовых клиентах Outlook 2007, Outlook 2003, Outlook 2002, Outlook 2000, Gmail, Hotmail и AOL Mail.

  • Browser Photo
    Скриншоты в Internet Explorer, Opera, FireFox и Safari под Windows, Mac, и Linux, всего 24 различных комбинации, 15$ за один раз и $150 за неограниченное использование в течении года или для определенного домена.

  • Browsrcamp
    Бесплатно генерирует скриншоты в Safari 2.0.4 в пяти разрешениях. Есть и платная услуга, OS X Live Test — тестирование с полным контролем над системой Mac OS X, для этого вам нужен клиент VNC (Virtual Network Computing) и быстрое соединение. В процессе тестирования доступны браузеры Camino, Firefox, Flock, iCab, Mozilla, Netscape, OmniWeb, Opera, Safari, SeaMonkey и Shiira. Цена от $3 за два дня до $99 за год.

    Screenshot

  • Browsercam
    Предводитель в семействе тестовых сервисов, кроме скриншотов возможно удаленное управление браузером. Количество доступных браузеров постоянно растет, на данный момент это более 70 браузеров под Linux, Win и Mac, а также эмуляторы мобильных устройств BlackBerry и Win Mobile. Есть настройка разрешений и доступа к защищенным сайтам, возможна загрузка скриншотов в zip архиве.

    Screenshot

    По большому счету этот сервис предоставляет все, что вам может понадобиться. Возможны тарифные планы от $20 до $1000 в месяц.

    Screenshot

    Широкий выбор……

    Screenshot

    …и гибкая настройка!

  • BrowserPool
    При создании скриншота можно настроить все, что только можно придумать. Сотни различных сочетаний, десятки браузеров, тысячи скриншотов. Есть и удаленное управление браузером через VNC клиент. Цена $40 в месяц, в них включены 40 бесплатных часов. Возможна бесплатная тестовая регистрация.

    Screenshot

Статьи

  • Как протестировать сайт в различных браузерах на одном компьютере
    Количество браузеров в которых нужно тестировать сайты давно перешло все границы, это Internet Explorer (IE) 7, 6, 5.5 и 5.0, Firefox 2.0 и 1.5, Opera 9 и 8, несколько версий Safari, и еще множество не столь распространенных. При этом, они работают на различных платформах: Windows, Mac, Linux. Есть еще и проблема невозможности совместной установки различных версий для некоторых браузеров (наиболее заметный пример Internet Explorer для Windows. Автор этой статьи предлагает несколько способов преодоления проблем с установкой нескольких версий различных браузеров на одном компьютере.

На что способен ваш браузер?

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

  • Acid 2 Test
    Современные браузеры должны отображать это сложно изображение созданное с помощью CSS. У большинства браузеров с этим пока проблемы.

    Acid 2 Test

  • Селекторы CSS 3
    Поддерживает ли ваш браузер селекторы CSS3?
  • Набор страниц для тестирования поддержики CSS2 браузером
    автор Эрик Майер
  • Acidic Float Tests
    Тесты показывающие поведение плавающего блока, выходящего за границы родительского.
  • Набор CSS тестов
    Набор страниц тестирующих все возможности CSS 2.
  • CSS Тесты и эксперименты
    Множество примеров иллюстрирующих возможности браузеров.
    Acid 2 Test
  • Cascading Style Sheets Test Suites
    Набор для тестирования поддержки CSS от W3C
  • PNG Test
    Набор PNG иконок для тестирования PNG декодеров, программ для просмотра PNG и браузеров. Множество различных вариантов иконок с глубиной цвета от 1 до 64 бит, в оттенках серого, с палитрой и в truecolor, interlaced и нет, с простой прозрачностью и с альфа-каналом, с фоном, гамма коррекцией, комментариями и др. есть даже некорректные и поврежденные в результате ошибки при передаче.

    Acid 2 Test