Браузерный зоопарк

wa11 29 июня 2011 в 18:08 26,2k
image

Уважаемые Хабравчане! Хотел поделиться с Вами статьей своего сотрудника. Думаю, она будет полезной.

Hello world! Меня зовут Слава, я работаю верстальщиком в агентстве Coalla. Эта статья не о разжигании холивара и рассуждения о том, какой браузер лучше, как бы всем легко жилось без Internet Explorer’a, а мой недавний полезный опыт по установке всех необходимых браузеров и их версий на одну операционную систему, а именно на Microsoft Windows 7 Ultimate x64.


Почему именно Windows, 7, Ultimate, x64?


Такие операционные системы, как MacOS и дистрибутивы, основанные на Linux сразу отпадают из-за специфического набора необходимого мне инструментария — под MacOS, например, нет всего необходимого программного обеспечения для работы с Ruby проектами более проблематично поднять все необходимые версии браузеров, а в Linux как известно, нет всеми нами любимого Photoshop, используемого для нарезки макетов.

Также давно уже в корне не верен стереотип о том, что верстальщику для работы достаточно маломощного железа. Такие среды разработки, как RubyMine, Eclipse, написанные на Java в совокупности с минимум как 5-ю запущенными браузерами с несколькими открытыми вкладками, запущенный на локальном сервере Ruby проект, который «собирается на лету» при обращении к страницам в браузере, Photoshop с загруженным в него макетом весьма требовательны к аппаратному обеспечению компьютера. Поэтому для того, чтобы иметь на борту как минимум 4 Гбайт оперативной памяти (мы все помним, что 32-битные ОС поддерживают максимальный объем ОЗУ в 3.2 Гбайт) и использовать все возможности 64-битных процессоров и приложений я установил 64-битную Windows 7. Версия Ultimate была выбрана из-за необходимости установки Windows XP Mode, о чем описано чуть ниже.

Еще один довод в необходимости установки Windows 7 — Internet Explorer 9 в принципе не ставится на Windows XP, также его нет в сборке Internet Explorer Collection, о которой также будет рассказано ниже.

Необходимый минимум


Теперь вернемся к сути статьи. Первым делом стоит определить, какие версии браузеров нам потребуются для проверки кроссбраузерности проектов. Лично я использую следующую выборку:
  • Последний релизы Google Chrome и Safari;
  • Последние релизы Firefox, Opera и Internet Explorer + 2 последних релиза с предыдущими числами версий.

Таким образом, на 29 июня текущего года список версий браузеров выглядит следующим образом:
  • Google Chrome 12;
  • Apple Safari (для Windows) 5.0.5;
  • Mozilla Firefox: 3.6.17, 4.0.1, 5.0;
  • Opera Software Opera 9.64, 10.63, 11.50;
  • Microsoft Internet Explorer 7, 8, 9.

Хочу обратить ваше внимание, что во избежании проблем с отображением страниц стоит использовать только финальные версии, никаких alpha/beta.

Установка браузеров


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

Chrome — качаем по ссылке http://www.google.com/chrome?hl=ru. Проблем с установкой никаких — загрузил, установил.


Safari — качаем по ссылке http://www.apple.com/ru/safari/download/.


Firefox. Существует достаточно качественная сборка Firefox начиная с версии 2.0 под названием Utilu Mozilla Firefox Collection (http://utilu.com/UtiluMFC/), но я предпочитаю не использовать сборки браузеров сторонних производителей без крайней на то необходимости.

Поэтому скачать все необходимые релизы Firefox можно по ссылке с официального сайта — http://mozilla-russia.org/products/firefox/history.html#release.

Ставим по порядку все требуемые нам версии, только в разные папки. В моем случае я устанавливал версии Firefox в папки /mozilla/firefox %номер версии%/.

Далее придется исполнить танец с бубном. Для того, чтобы Firefox позволял запускать несколько разных версий одновременно, нужно проделать 2 нехитрые операции:
  1. Создать отдельные профили для каждой из версий Огнелиса — процедура подробно описана на Хабре.

    Я задаю имена профилям по версиям Firefox, в которых эти профили будут запускаться, например: firefox5, firefox4, firefox36. Рекомендую задавать имена профилей без пробелов и дополнительных символов;
  2. Далее необходимо указать дополнительные параметры для запуска каждому из ярлыков Firefox.

    Для этого открываем свойства ярлыка, на вкладке «Ярлык» в поле «Объект» в самый конец строки добавляем параметры: -no-remote -p %имя профиля%, например: -no-remote -p firefox5 — прописываем в ярлык запуска 5-й версии Огнелиса.
    • Параметр «-no-remote» разрешает запуск нескольких различных версий Firefox;
    • Параметр «-p %имя профиля%» указывает, какой профиль использовать при загрузке ярлыка программы.

    Итого в нашем случае у вас должно быть создано 3 профиля Firefox:
    • firefox5
    • firefox4
    • firefox36

    И 3 ярлыка Firefox — для 5-й, 4-й и 3.6 версий, в каждом из которых в поле «Объект» будут добавлены параметры соответственно:
    • -no-remote -p firefox5
    • -no-remote -p firefox4
    • -no-remote -p firefox36


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

Переходим к установке Opera.


Opera. Качаем по ссылке 11-ю и 10-ю версии — http://www.opera.com/browser/download/?os=windows&list=all. 9-ю версию берем из архива Opera — http://arc.opera.com/pub/opera/win/964/int/Opera_964_int_Setup.exe.

При установке есть особенность, что нужно ставить версии от большей к меньшей, т.е. сначала 11-ю, затем 10 и 9. В противном случае при установке 11-й версии на момент уже существующей 9-й или 10-й, Opera обновит вам предыдущую версию автоматически.

Все необходимые версии Opera я ставил по аналогии с Firefox в отдельные папки — /opera/opera %номер версии%/.


Internet Explorer, как говорится, оставляем на десерт. Как всем известно, нельзя установить несколько версий IE на одну операционную систему. Поэтому я придерживаюсь следующего правила — обновляю родной IE до последней возможной версии (в нашем случае до 9-й), а остальные версии доставляю при помощи чудеснейшей сборки под названием Internet Explorer Collection — http://utilu.com/IECollection/, раздел Download.

Но проблема заключается в том, что даже самая последняя версия IE Collection 1.7.1.0 не поддерживает запуск Internet Explorer версий 7 и 8 под операционной системой Windows 7 (пруфлинк — http://utilu.com/IECollection/, раздел Compatibility). Выходов из сложившейся ситуации несколько:
  1. Содержать второй компьютер с установленной на нем Windows XP (глупо, не правда ли?);
  2. Установить альтернативную сборку версий Internet Explorer под названием IETester — http://www.my-debugbar.com/wiki/IETester/HomePage.
  3. Выход казалось бы, достаточно простой, но имеет существенные для меня минусы, а именно:
    • IETester часто падает с критической ошибкой;
    • От интерфейса программы хочется блевать бабочками и гадить радугой.

  4. Установить виртуальную машину, например WMware или VirtualBox. Затем установить на нее Windows XP, или же найти уже готовый образ для этой виртуальной машины;
  5. Настроить среду Windows XP Mode для Windows 7 — этот вариант видится мне наиболее простым и удобным. Преимущества данного способа перед предыдущим заключается в том, что мы получаем официальный образ уже установленной Windows XP от самой Microsoft, и интегрированную в Windows 7 родную среду Windows Virtual PC для запуска виртуальной машины.

О данном способе и поговорим далее.


Что такое Windows XP Mode?

Данный режим объединяет лучшие качества двух различных систем: новый режим Windows XP позволяет запускать старое программное обеспечение Windows XP прямо на рабочем столе Windows 7.

Подробнее здесь — http://windows.microsoft.com/ru-RU/windows7/products/features/windows-xp-mode.

Также обратите внимание на то, что Windows XP Mode можно установить только на следующие версии Windows 7:
  • Профессиональная;
  • Корпоративная;
  • Максимальная.

Пруфлинк — http://ru.wikipedia.org/wiki/Windows_7.

Чтобы установить Windows XP Mode на нашу Windows 7 переходим по ссылке http://www.microsoft.com/windows/virtual-pc/download.aspx и следуем инструкциям.
Если у вас нелицензионная версия операционной системы (мы же в Рашке, или как?), то качаем с Рутрекера — http://rutracker.org/forum/viewtopic.php?t=2838518.

Для тех, кто качал с торрента, необходимо ставить компоненты именно в следующей последовательности:
  1. Windows XP Mode (это официальный образ операционной системы Windows XP для Windows Virtual PC);
  2. Windows KB958559 — этот патч и есть Windows Virtual PC; После установки данного обновления необходимо обязательно перезагрузить компьютер;
  3. Windows KB977206 — этот патч необходимо установить, если ваш процессор не поддерживает аппаратную виртуализацию.

Узнать, поддерживает ли ваш процессор данную технологию можно по ссылке — http://www.parallels.com/ru/products/novt.

После всех проведенных процедур в меню «Пуск» -> «Все программы» -> «Windows Virtual PC» запускаем ярлык «Windows XP Mode» и после применения системой всех необходимых настроек, запустится Windows XP в среде Microsoft Virtual PC.

Теперь, придерживаясь правила, описанного выше, обновляем Internet Explorer до последней возможной версии — 8, качаем отсюда — http://windows.microsoft.com/ru-RU/internet-explorer/downloads/ie-8.

После установки IE8, ставим IE Collection с набором необходимых нам браузеров — я ставлю версии 6 и 7 (IE6 приходится держать в арсенале на те клинические случаи, когда клиент невменяем).

Кстати, помимо IE на виртуальную машину можно установить дополнительные браузеры, которые проблематично подружить на основной ОС — лично я добавил в Windows XP Mode 4-й Safari (4.0.5).

На выходе мы получаем все необходимые нам браузеры:
image

И все необходимые версии Internet Explorer, запускаемые через Windows 7 XP Mode:
image

Кстати, очень наглядный и интересный сервис определения вашего браузера от Яндекса с долей юмора — http://browsers.yandex.ru.

Несколько советов


  1. Помимо проверки кроссбраузерности во всех требуемых браузерах под Windows, необходимо также проверять верстку хотя бы в одном браузере под Mac и Linux. Обусловлена такая необходимость тем, что Mac и Linux используют отличные от Windows шрифты, и одно и тоже слово/один и тот же абзац, отображаемые разными шрифтами, могут иметь разный вес/размер, что тем самым в некоторых конкретных случаях может «порвать» верстку;
  2. Для того, чтобы максимально приблизить отображения шрифтов Safari под Windows как в Safari для Mac, можно в меню «Правка» -> «Настройки» -> Вкладка «Внешний вид» -> Параметр «Сглаживание шрифта» -> выбрать параметр «Средний — оптимально для плоских экранов». Рендер шрифтов в браузере Safari для Windows будет максимально походить на рендер шрифтов на Mac;
  3. Отключайте отображение шрифтов ClearType — это позволит увидеть, не слишком ли рублено/топорно будет выглядеть тот или иной шрифт с примененными к нему размером/гарнитурой.


Послесловие


Верстайте! До скорых встреч.

;) http://clientsfromhell.ru/2011/06/20/09-02-11125640/
Проголосовать:
+34
Сохранить: