alexilin

Проблемы кроссбраузерности

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

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

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

Internet Explorer

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

Браузеры установленные таким образом работают не очень устойчиво и иногда падают без видимых причин, но, несмотря на это, свои задачи пакет выполняет в полном объеме. Установщик работает в Windows XP, пользователям Windows Vista придется использовать have to use Microsoft Visual PC 2007. (У меня поставить на Vista Home Premium не получилось)

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

Safari

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

Linux

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

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

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

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

• IE NetRenderer (бесплатный) – E NetRenderer позволяет посмотреть, как будет выглядеть сайт в IE 7, 6 или 5.5. Режимы Miixed и Difference показывают различия отображения в разных версиях (IE6 vs. IE7), накладывая скриншоты друг на друга.
• Browsershots (бесплатный) – Позволяет тестировать сайты не только в Firefox, Opera, IE и Safari, но и в экзотических браузерах (Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey), возможна настройка разрешения и глубины цвета, а также поддержки JavaScript и Flash.Все отправленные URL добавляются в очередь, время ожидания их обработки зависит от загруженности сервера. Вы можете создать закладку, чтобы вернуться за результатами своего запроса или получить уведомление по E-Mail или RSS. Можно загрузить все свои скриншоты в виде zip архива.
• Litmus (платный) – Не просто предоставляет вам скриншоты, но и содержит систему управления тестированием. Скриншоты создаются в почти в 30 различных браузерах в течении секунд, причем можно видеть всю страницу а не только ее верхнюю часть как в других сервисах. Сервис содержит систему контроля версий и отслеживания багов.
• Browser Photo (платный) – Скриншоты в Internet Explorer, Opera, FireFox и Safari под Windows, Mac, и Linux, всего 24 различных комбинации, 15$ за один раз и $150 за неограниченное использование в течении года или для определенного домена.
• Browsrcamp (платный) – Бесплатно генерирует скриншоты в Safari 2.0.4 в пяти разрешениях. Есть и платная услуга, OS X Live Test15 — тестирование с полным контролем над системой Mac OS X, для этого вам нужен клиент VNC16 (Virtual Network Computing) и быстрое соединение. В процессе тестирования доступны браузеры Camino, Firefox, Flock, iCab, Mozilla, Netscape, OmniWeb, Opera, Safari, SeaMonkey и Shiira. Цена от $3 за два дня до $99 за год.
• Browsercam (платный) – Предводитель в семействе тестовых сервисов, кроме скриншотов возможно удаленное управление браузером. Количество доступных браузеров постоянно растет, на данный момент это более 70 браузеров под Linux, Win и Mac, а также эмуляторы мобильных устройств BlackBerry и Win Mobile. Есть настройка разрешений и доступа к защищенным сайтам, возможна загрузка скриншотов в zip архиве. По большому счету этот сервис предоставляет все, что вам может понадобиться. Возможны тарифные планы от $20 до $1000 в месяц.
• BrowserPool (платный) – При создании скриншота можно настроить все, что только можно придумать. Сотни различных сочетаний, десятки браузеров, тысячи скриншотов. Есть и удаленное управление браузером через VNC клиент. Цена $40 в месяц, в них включены 40 бесплатных часов. Возможна бесплатная тестовая регистрация.

Тесты браузеров

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

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

Баги браузеров

• Explorer Exposed! – CSS баги в Internet Explorer версии 5 и выше.
• Browser bugs – Баги в Mozilla, IE6-7, Opera. Также множество ссылок на налогичные ресурсы.

Статистика

• W3counter
• Spylog глобальная статистика

Оригинал Browser Tests, Services and Compatibility Test Suites.