Home

Автор:  Макеенков Сергей

Теория

Википедия:

«Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кросс-браузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями.»

Тестирование кросс-браузерности как сущность является подвидом конфигурационного тестирования. Переведя термин на русский язык, мы увидим громоздкое словосочетание «перекрёстное тестирование под разными браузерами». В действительности же, термин тестирование-кроссбраузерности подразумевает не только проверку под разными браузерами, но об этом чуть позже…

Если же говорить о написании, то зачастую используют термин кросс-браузерность в виде кроссбраузерность, но с точки зрения русского языка это не правильно, т.к. правила написания существительных через дефис русского языка гласят:

«§ 79. Пишутся через дефис:
13. Слова, первой составной частью которых являются иноязычные элементы обер-, унтер-, лейб-, штаб-, вице-, экс-, например: обер-мастер, унтер-офицер, лейб-медик, штаб-квартира, вице-президент, экс-чемпион.»

т.к. по-русски этот подвид тестирования должен называться «перекрёстное тестирование под разными браузерами», то делаем вывод, что составная часть «кросс» иноязычная, а следовательно термин кросс-браузерность пишется по правилам русского языка через дефис.

Предыстория

Начинающие веб-программисты рано или поздно сталкиваются с тем, что их скрипт, любовно написанный и прекрасно работающий на домашнем компьютере с MSIE, почему-то не работает у соседа или клиента на его Opera, Mozilla, FF или Netscape.

Давайте разбираться. Введение всё более новых стандартов и следование им разработчиков браузеров позволяет добиться высокой степени совместимости, но, несмотря на совершенствование стандартов в области сайтостроения не все браузеры работают с этими стандартами одинаково. Это происходит не столько из-за багов и глюков браузера, сколько из-за того, что разработчики не успевают за совершенствованием стандартов или же попросту пренебрегают ими. Плюс ко всему современные браузеры имеют набор фич, которые тоже накладывают отпечаток на обработку HTML/CSS кода. Также не стоит и забывать о том, что старые браузеры совсем ничего не знают о новых стандартах, следовательно, в большинстве случаев обрабатывают нововведения некорректно.

Зачем?

По данным W3Counter от 1 до 22% пользователей используют 10 браузеров отличающихся как разработчиками, так и версиями. 

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

Исходя из всего вышесказанного, создавая сайт, разработчик должен учесть все факторы и сотворить нечто универсальное. Вы спросите: «Зачем же здесь тестирование кросс-браузерности?!», а я вам отвечу: «Неужели вы всерьёз думаете, что разработчик будет устанавливать хотя бы 5 браузеров и под каждым просматривать работу своего творения?!». В общем, тестирование кросс-браузерности необходимо для того же, для чего необходимы любые другие виды тестирования, т.е. для обеспечения качества.

Почему?

Из истории:

В такой ситуации Netscape Navigator сначала рисовал background, а потом всё закрашивал чёрным цветом. Именно поэтому сначала указывали bgcolor, а потом backgorund. Остальные же браузеры, как и сейчас сначала обрабатывают bgcolor, потом background.

Жизнь:

«У меня есть форма с текстовым полем ввода Input вида:
< inрut style="background: url('/12.jpg'); float:left; border:0; width: 100%; height: 26px; text-align:center; font-family:'Times New Roman'; font-size:18px; vertical-align:middle" name="username" id="login" type="text" class="inputbox" alt="username" size="10" /> В Opera и FF всё работает нормально, текст в любых количествах вводится без проблем, фон стоит на месте. В IE при вводе текста, выходящего за ширину поля Input фон начинается двигаться вместе с текстом. Если поставить background-attachment:fixed – в IE начинает всё работать нормально, а в Opera и FF фон фиксируется и при прокрутке скролинга в браузере - стоит на месте.»

«Сделайте «хак» для IE через CSS: < inрut style="*background-attachment: fixed; ..." .... Свойство со звёздочкой «*» вначале поймут лишь IE, если нужно только для IE6 и ниже, то можно применить _background-attachment: fixed;»

Теория:
В разных браузерах по-разному вызываются такие свойства, как размеры окна, размеры документа, показатели прокрутки и т.д.

Размеры рабочей области окна

• MSIE — document.body.clientWidth, clientHeight
• Netscape, Mozilla, Opera — innerWidth, innerHeight

Координаты верхнего левого угла рабочей области окна

• MSIE, Opera 7 — screenLeft, screenTop
• Netscape, Mozilla, Opera 5, 6 — screenX, screenY

Размеры содержимого документ

• MSIE, Opera 7 — document.body.scrollWidth, scrollHeight
• Netscape, Mozilla — document.width, height
• Opera 5, 6 — document.body.style.pixelWidth, pixelHeight

Прокрутка (scrolling)

• MSIE, Opera 7 — document.body.scrollLeft, scrollTop
• Netscape, Mozilla, Opera 5, 6 — pageXOffset, pageYOffset

В MSIE в документе должен присутствовать тег , иначе document.body может быть не определено.

Размеры шрифтов не одинаковы в различных системах, а некоторые шрифты могут просто отсутствовать на компьютере пользователя, именно поэтому Firefox в Linux отображает сайты не так, как Firefox в Windows.

Пример:
Главная страница багтрекера в IE 1.5 (0.1.0.10)

Главная страница багтрекера в IE 8.0 (8.00.6001.18702)

Как?

Основные моменты, на которые нужно сделать упор при тестировании кросс-браузерности:

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

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

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

Инструментарий

Проблема:
Основной проблемой при тестировании кросс-браузерности является проблема наличия на тестовом стенде множества браузеров и их версий, а также нескольких операционных систем. Конечно, же, в общем случае при тестирование не стоит учитывать, например Netscape или наиболее распространённые браузеры старых версий. Т.е. по сути, для тестирования достаточно FF, IE, Opera, Chrome и Safari последних 2-3 версий. Но всё же сложности возникают, например в Windows предусмотрена возможность установки только одной версии Internet Explorer, а в MacOS только одной версии Safari.

Решение:
Самым полезным, стабильным и в какой-то мере производительным решением по моему скромному мнению является использование виртуальных машин, хотя конечно, это проблематично при первоначальной развёртке. Зато, имея несколько развёрнутых виртуальных машин, Вы приобретаете гибкость и возможность тестировать кросс-платформенность, кросс-браузерность, а также без проблем изменять разрешения экрана. На сегодняшний день, лидерами в сфере производства средств виртуализации являются компании VMware, Microsoft, SWSoft (вместе с принадлежащей ей компанией Parallels), XenSource, Virtual Iron и InnoTek. Помимо продуктов этих вендоров присутствуют также такие разработки как QEMU, Bosch и прочие, а также средства виртуализации разработчиков операционных систем (например, Solaris Containers), которые не получили широкого распространения и используются узким кругом специалистов. В случае с Linux можно использовать Live Linux CD, который, как правило включают в себя Konqueror и Firefox, но это вариант, как правило, означает медленную работу, что не всегда допустимо. Минусом виртуальных машин по-прежнему остаётся «в Windows предусмотрена возможность установки только одной версии Internet Explorer, а в MacOS только одной версии Safari».

Решить проблему с IE и Safari можно с помощью специальных программ, несущих в себе или позволяющих установить сразу несколько версий вышеуказанных браузеров. С IE поможет справиться программа Multiple IEs от TredoSoft. В установке программа очень проста, достаточно следовать инструкциям, а в результате вы получаете IE3, IE4.01, IE5, IE5.5, IE6 абсолютно не зависящие друг от друга, причем установочный файл занимает всего 10Mb. Обратите внимание, что браузеры установленные таким образом работают не очень устойчиво и иногда падают без видимых причин, но, несмотря на это, свои задачи пакет выполняет в полном объеме. Программа конечно не панацея, ибо уже есть и IE6, и IE8, но всё же. К числу программ частично решающих проблему с IE можно отнести IEs 4 Linux и IE Tester. Проблему же с Safari призвана помочь решить программа Multi-Safari позволяет установить более 10 версий Safari, начиная от 1.0 и до 3.2.1. Честно говоря, это программа мной не опробована и поэтому советовать и описывать я её не буду.

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

• browsercam
• browserpool
• browsershots
• browsrcamp
• iCapture
• IE NetRenderer
• Litmus
• lixlpixel
• superscreenshot.com
• Thumbalizr
• WebshotsPro 

Немного статистики
http://www.w3counter.com/globalstats.php
http://www.artlebedev.ru/tools/browsers

Источники
http://designformasters.info/posts/browser-compatibility-testing
http://xpoint.ru/know-how/Articles/KrossbrauzernyiyDHTML
http://ru.wikipedia.org/wiki/Сравнение_виртуальных_машин
http://ru.wikipedia.org/wiki/Webkit
http://ru.wikipedia.org/wiki/Microsoft_Virtual_PC
http://www.vmgu.ru
http://www.vmgu.ru + http://www.vmgu.ru/articles/Besplatnie-servernie-platformi-virtualizatsii
http://michelf.com/projects/multi-safari
http://tredosoft.com/Multiple_IE


http://ipinfo.info/html/rendering_services.php

http://www.netmechanic.com/products/browser-index.shtml