14 инструментов для проверки кросс браузерности сайта


Содержание

Блог о дизайне и веб-мастеринге
Полезные ресурсы для разработчиков и дизайнеров
Статьи о движке WordPress и сервисе Twitter

Лучшие статьи категории «Ресурсы»

Подписка

  • Статьи (500+)
  • Twitter (2350+)
  • Google Plus (150+)
  • E-mail подписка
  • Реклама
  • О блоге и команде

Онлайн инструменты для проверки кроссбраузерности

Когда дело доходит до изучения просторов глобальной сети, у пользователей интернета есть весьма широкий выбор браузеров («просмотровщиков»). Наша обязанность, как дизайнеров и разработчиков веб-сайтов — обеспечить совместимость сайта со всеми видами браузеров, иными словами обеспечить кроссбраузерность сайта.

Но сразу возникает вопрос — какие браузеры используют пользователи? Сейчас самыми популярными «просмотровщиками» веб-страниц являются Internet Explorer 7 и 8, Mozilla Firefox, Google Chrome и Opera. Однако для каждого вида сайта, в зависимости от того к какой тематике он относится, процент посетителей с разными браузерами может сильно варьироваться. Поэтому, довольно часто, разработчики определяются, с какой аудиторией им предстоит работать и в зависимость от результатов «подготавливают» сайт только под определенные виды браузеров.

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

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

Browsershots

Browsershots — это самый популярный сервис для тестирования кроссбраузерности. Он делает скриншоты вашего сайта практически во всех видах браузеров. Благодаря тонкой настройке можно выбрать как виды движков (WebKit или Gecko), так и виды операционных систем (Linux, Windows, Mac OS X или BSD). Так же в настройках есть выбор разрешения экрана, присутствие установленного javascript, flash, java и другие виды параметров.

NetRenderer

Благодаря этому онлайн инструменту можно бесплатно проверить кроссбраузерность сайта во всех версиях Internet Explorer (версии 5.5, 6, 7, 8, а так же 7-6 Mixed и 7-6 Difference). Из функционала стоит выделить отображение времени обработки и ограничение размера экрана в 1024px.

Browser Sandbox

С помощью этого сервиса вы можете запускать страницы в разных браузерах, таких как IE, Firefox, Safari, Chrome и Opera непосредственно из своего браузера. Единственное отличие от других сервисов в обзоре — необходимость установки небольшого дополнения, которое обеспечивает дальнейшее тестирование.

Browsrcamp

Browsrcamp позволяет проверить совместимость вашего сайта с браузерами в Mac OS X. Бесплатная версия позволяет проверить сайт только в Safari 3.1.2. Но при оплате подписки можно будет тестировать сайт в 12 различных браузерах, которые могут быть установлены на этой OC. Полный список браузеров, как и стоимость подписки, можно найти на страницах сервиса.

Adobe BrowserLab

Еще один популярный веб-сервис, который позволяет проверять отображение сайтов в разных браузерах и на разных ОС. Среди функционала есть такие полезные возможности как проверка сайта в разных разрешениях, настройка, редактирование и сохранение различных сочетаний браузеров для тестирования.

Browsera

Платный онлайн сервис предназначенный для тестирования сайта в целом, а не только для проверки кроссбраузерности сайта. Большой набор всевозможных функций и настроек делает Browsera мощным средством для отладки веб-сайта. Из возможностей отметим: анализатор ошибок сценариев на JavaScript; возможность тестирования всего сайта, а не только отдельных страниц; тестирование страниц с динамическим содержанием. У сервиса есть бесплатно-тестовая версия, которая позволяет отлаживать не более 25 страниц в месяц, а так же бесплатный 30-дневный пробный период.

Litmusapp

Еще один платный сервис с большим количеством разнообразных функций, как мелких и довольно специфичных, так и крупных и очень полезных (чего стоит только возможность тестирования сайта на мобильных устройствах с Windows Mobile, Symbian или iPhone). О полном списке возможностей и разнообразных «плюсов» можно прочитать на страницах сервиса.

А какими сервисами и инструментами пользуетесь вы когда тестируете кроссбраузерность сайта?

7 инструментов для тестирования кроссбраузерности

Повсеместное распространение концепций адаптивного дизайна и прогрессивного улучшения не избавило нас от проблем с кроссбраузерной версткой. Ручная проверка отображения сайта на всех необходимых браузерах во всех возможных операционных системах занятие утомительное и, по сути, бессмысленное: инструменты для тестирования кроссбраузерности сайта значительно упростят эту задачу.

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

1. Browsershots

Browsershots это простой бесплатный инструмент, но его функционал мало чем уступает его платным конкурентам. Благодаря Browsershots вы сможете получить скриншот того, как ваш сайт будет выглядеть в каждом конкретном случае. В вашем распоряжении просто гигантский список поддерживаемых браузеров, а также возможность выбрать размер экрана, насыщенность цветов, включить и выключить JavaScript (вы можете указать конкретную версию JavaScript) Java и Flash.

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

Если Вам требуется больше возможностей и инструментов для тестирования, можно перейти на платную версию за 29.95$ в месяц.

2. Browser Sandbox

К сожалению, Browser Sandbox будет полезным только для пользователей Windows, хотя разработчики обещают выкатить версию для Mac в самое ближайшее время. Он может похвастаться довольно внушительным списком поддерживаемых браузеров, который включает IE, Firefox, Chrome, ChromiumCanary, Firefox Mobile, Safari, Opera, и FirefoxNightly. Правда, в бесплатном варианте доступна возможность тестирования только в последней версии конкретного браузера.

Если вы должны проверять и старые версии, вам придется воспользоваться платной версией. К счастью, ее цена всего 4.95 доллара в месяц.

3. IE Testers

Если корректное отображение вашего сайта в IE ваша главная головная боль, к вашим услугам несколько инструментов, которые помогут вам проверить отображение сайта в браузере от Microsoft.

3.1. Netrenderer

Благодаря Netrenderer вы можете протестировать свой проект в версиях IE от 5.5 до 11. Это простая и интуитивно понятная утилита, хотя она и не может похвастаться впечатляющим списком функций.

3.2. Microsoft Edge

Microsoft Edge это целая платформа для тестирования сайта в IE. Хотя он и дает возможность получить скриншот вашего сайта и в других браузерах, в том числе и в мобильных, есть важная причина, по которой мы отнесли этот инструмент к группе IE Testers. Microsoft Edge предоставляет в ваше распоряжение виртуальную машину только для тестирования в IE7 и новее.

3.3 My Debugbar

My Debugbar, также известный, как IETester, представляет собой десктопное приложение, которой устанавливается только под Windows. Программа очень подробно документирована и имеет ряд ограничений, поэтому прежде, чем начинать тестирование, стоит ознакомиться с разделом помощи.

4. Webshot by Mobile Ready

В отличие от других инструментов, представленных в этом списке, Webshot by Mobile Ready, как становится понятно из его названия, предназначен только для тестирования сайта на мобильных устройствах. Он бесплатный, но требует регистрации.

На момент написания обзора попытка зарегистрироваться на сайте сервиса выдавала 500 ошибку и никакой информации о том, когда возобновится его работа, мы не нашли. Но мы надеемся, что этот полезный ресурс станет доступным в скором времени.

5. Browsera

Browsera открывает собой раздел платных утилит. Это действительно многофункциональный инструмент и он определенно стоит тех денег, которые придется заплатить за его полноценное использование. Он позволяет тестировать не только кроссбраузерность макета, но и работоспособность скриптов в разных ситуациях, отображение динамических страниц, степень защищенности сайта и т.д.

Вы можете воспользоваться бесплатной тридцатидневной пробной версией или остановиться на базовом бесплатном варианте, который ну уж очень урезан в функционале. Также существуют планы с оплатой 39 и 99$.

6. CrossBrowserTesting

Действительно классная особенность CrossBrowserTesting в том, что он использует реальные устройства для тестирования вашего сайта. Хотя эмуляторы работают довольно неплохо, ничто не даст вам столь исчерпывающей информации, как боевое тестирование на реальных девайсах. Список функций довольно объемный, и в общем, этот инструмент реально стоит своих денег. Существует подозрение, что CrossBrowserTesting может похвастаться самым большим списком поддерживаемых браузеров (около 900) и операционных систем (около 40), включая iOS, Android,Windows, Mac и другие.

Еще одна отличительная особенность режим live testing , в котором вы можете тестировать свой сайт в реальном окружении, получая возможность проверить работоспособность AJAX, HTML-форм, JavaScript, Flash и всего остального. Кроме того, представлена возможность автоматизации тестов и сравнения скриншотов.

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

7. BrowserStack

BrowserStack это еще одно громкое имя в кроссбраузерном тестировании. Он также использует реальные устройства для тестирования и поддерживает 700+ браузеров. Существует возможность локального тестирования и быстрого получения скриншотов на разных разрешениях экранов от 800 600 до 2048 1536. Основной план стоит 29$, но у них есть план для фрилансеров, который стоит 12,5 долларов в месяц. Для некоторых open source проектов они даже предлагают бесплатные услуги.

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

Инструменты для проверки кроссбраузерности сайта

21 ноября 2012 | Опубликовано в Веб-дизайн | 10 Комментариев »

Browsershots

Данный сервис поддерживает большое количество браузеров — более 164 комбинации браузеров на четырех операционных системах (Windows, Mac, Linux, BSD). Некоторые из них могут даже не понадобиться. Маловероятно, что найдется пользователь, который работает в браузере Dillo или Kazehakase в операционной системе BSD, хотя все равно можете проверить.

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

Browsershots предоставляет платные и бесплатные услуги. Однако бесплатный сервис является довольно медленным и есть ограничение на количество скриншотов, которые вы можете запросить в день. Платной версии составляет $ 29,95 или € 23,95 в месяц, и вы сможете получить от 30 до 50 скриншотов в течение двух-пяти минут.

Adobe BrowserLab

Adobe BrowserLab — бесплатный инструмент тестирования кроссбраузерности от Adobe. Он как через Windows, так и через Mac OS, позволяет протестировать сайт в современных и некоторых устаревших браузерах, включая различные версии Chrome, Safari, IE и Firefox. Просмотр возможен в нескольких режимах: полноэкранном, в режиме сравнения, а также в режиме «наложенных слоев». Сервис может получать доступ к страницам, размещенным в интернете, или работать локально как дополнение к Firebug или Adobe Dreamweaver CS5.

SuperPreview

SuperPreview является предложением Microsoft в области кроссбраузерной проверки. Он совместен только с Windows. Инструмент позволяет определять набор браузеров для проведения тестов. Он работает с любым браузером, установленным на вашей системе. В него встроен механизм вывода IE6. Данный факт является причиной его быстрой работы (не нужно ждать загрузки или окончания обработки на удаленном сервисе), но и ограничивает набор доступных браузеров для сравнения.

SuperPreview является бесплатным инструментом и планируется как часть Expression Web. В онлайн версии имеется поддержка Chrome, Safari (Mac) 4+5, Firefox 3+4. Также можно использовать интерактивный режим для веб сайтов, которые требуют регистрации перед выводом страниц, которые надо проверить. Есть инструмент отладки для DOM. К сожалению, отсутствует поддержка Opera, даже если она установлена локально.

Lunascape 6

Lunascape 6 — это первый и единственный в мире браузер, работающий сразу на трех платформах: Trident, WebKit и Gecko. Первая из них лежит в основе популярного браузера Internet Explorer, вторая – в основе Safari, и, наконец, третья – в основе программы FireFox. Lunascape способен автоматически переключаться между всеми движками при осуществлении интернет-серфинга.

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

Browsera (бесплатная и коммерческая версии)

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

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

Browsrcamp
Browsrcamp — платный сервис позволяет разработчикам просматривать веб-страницы в различных браузерах и операционных системах. Он поддерживает любой браузер / комбинации операционных систем. Также позволяет проверить код на любой платформе. Поддерживаемые браузеры: Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, Opera, Chrome NXS 2.3, Explorer 5.0 (RQVGA), Opera 9.7b и многое другое. Поддерживаемые операционные системы: Windows 98, Windows 2000 Professional, Windows XP, Windows Vista, Mac OSX 10,3-10,5, Fedora Core 6, BlackBerry O 5, BlackBerry OS 6, Apple IOS, Google Android, Windows Mobile 5.0 (RQVGA), Windows Mobile 6.0, Windows Mobile 6.5.

IE Tester

IE Tester — бесплатный браузер для Windows, позволяющий тестировать сайт в IE 5.5, IE 6, IE 7, IE 8, IE 9 и IE 10 Previev. Можно тестировать как рендеринг HTML+CSS, так и JavaScript. Доступна только альфа-версия инструмента. Необходимыми требованиями для запуска программы является наличие ОС Windows 7, Windows Vista или Windows XP и браузера Internet Explorer 7 или выше.

Browserling

Browserling — сравнительно новое приложение для проверки кросс браузерности. Оно поддерживает ограниченный набор браузеров (и необязательно новейших версий), что ограничивает круг его пользователей среди разработчиков. Browserling все еще находится в стадии бета-тестирования, и, может быть, список браузеров, расширится в ближайшем будущем.

Бесплатная версия имеет ограничение по времени сессии в размере 5 минут, а коммерческий вариант без ограничений стоит $20в месяц.


Sauce Labs

Sauce Labs предоставляет много вариантов браузеров и операционных систем. Он также записывает видео всей сессии вашего тестирования. Сервис предлагает 200 бесплатных минут испытаний в месяц и позволяет быстро создавать автоматизированные тесты браузера помощью с Selenium.

IE NetRenderer

IE NetRenderer позволяет проверить совместимость сайт для браузеров Internet Explorer от 5.5 до 9 версий. Придется проверять каждый вариант в отдельности, зато эта программа является бесплатной.

BrowserSeal

BrowserSeal – это новый инструмент. Он чем-то похож на SuperPreview. Это приложение также используется на локальном компьютере, и скорость вполне впечатляет. Браузерная поддержка, к тому же, достаточно обширная. Кроме всем известных IE, Firefox, Safari, Opera и Chrome, приложение также поддерживает почти любой браузер, на котором вы бы захотели протестировать свой сайт. У приложения есть две отличных функции, которые позволяют выделить инструмент из всего списка: отдельная поддержка браузеров и интерфейс в виде командной строки для автоматизации скрипта.

Стандартная версия стоит $49. Так же существует версия с интерфейсом командной строки, которая предоставляет возможность проверки нескольких URL из скрипта или командного файла.

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

Вне зависимости от того, какой инструмент вы выберете, тестирование необходимо. Чем раньше вы начнете тестировать код и чем чаще вы это будете делать, тем меньше проблем с совместимостью вы получите.

Автор — Дежурка

Вас могут заинтересовать статьи:

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

Вступление

Понятие кроссбраузерность сайта относится к его свойствам одинаково отражаться на различных браузерах Интернет.

Проверка кроссбраузерности сайта это один из видов тестирования сайта перед его запуском (сдаче заказчику) в серии тестирования внешнего вида. Помимо кроссбраузерности, в этой серии, делаются проверки на адаптивность сайта и проверку пиксельного соответствия.

Видимость сайта в браузерах

Если вы «погуглите» список браузеров доступных для установки пользователям, то наверняка найдете список из 60± программ. Большинство из них будут модификациями Chromium и Firefox, однако общий список получится внушительный. (список тут)

Вручную проверить видимость сайта во всех браузерах задача, мягко сказать, бестолковая. Хотя можно установить у себя основные браузеры и очень быстро открыть свой сайт в основных браузерах Google Chrome, Яндекс Chrome, Firefox и Opera и тем самым перекрыть 90% возможных посетителей вашего сайта.

По данным статистики StatCounter, популярность браузеров в России на октябрь 2020 года выглядит так.

Сомневаюсь, что это график сильно измениться в ближайшие годы.

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

Browsershots.org

Сервис Browsershots дает вам бесплатную возможность сделать скиншоты проверяемой страницы сайта в основанных браузерах и их версиях. Бесплатно, проверка кроссбраузерности сайта, проводится для осей Linux и Windows. Для MAC и BSD придётся делать денежный взнос.

Обратите внимание на настройки сервиса, они внизу страницы. Во-первых, здесь вы можете выбрать свой язык. Выбор русского языка не даст хорошего результата, вам переведут пару строк из меню и всё. Но это не важно.

Более интересны 5 настроек: Screen Size, Color Depth, Javascript, Java, Flash. По умолчанию они выставлены на усмотрение сервиса.

Также обратите внимание, что выделены не все чеки и по умолчанию проверяются не все браузеры, а лишь последние, по данным сервиса, версии Браузеров.

Еще один момент. Значок копирайта внизу дает информацию, что сервис не обновлялся с 2015 года. Это подтверждают последние версии браузеров доступные для проверки. Например, последний «Opera» для проверок 15.0, а не 56.0.

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

Turbo.net (бывший Spoon)

Сервис turbo.net позволяет запустить онлайн на вашем рабочем столе или планшете браузеры IE, Chrome, Firefox. Далее вы вызываете свой сайт и изучаете его, сколько вам нужно.

На этом сайте инструмент проверок кроссбраузерности называется «Browser Sandbox» и воспользоваться им вы можете после простой регистрации на сайте.

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

Видео покажет, как работает сервис и что такое, видимость сайта в браузерах.

Видимость сайта в Internet Explorer

Возвращаясь к статистике StatCounter, мы обнаруживаем, что, в мире, браузер Microsoft Internet Explorer, занимает третье место, по использованию. А это значит, что игнорировать это браузер со всеми его версиями нельзя.

Проверить видимость сайта в Internet Explorer можно очень просто. Есть специальный инструмент – проверка кроссбраузерности сайта во всех версиях Internet Explorer, сервис netrenderer.com. Далее его описание, позаимствованное с сайта сервиса.

IE NetRenderer позволяет вам проверять, как веб-сайт отображается многочисленными версиями Microsoft Internet Explorer. Особенно старые версии веб-браузеров Microsoft известны своим неожиданным поведением и несоблюдением интернет-стандартов W3C. Поэтому для каждого веб-дизайнера нужно обязательно регулярно проверять свои веб-сайты на совместимость с этими веб-браузерами. Просто введите URL-адрес проверяемой веб-страницы в поле и нажмите кнопку «Render». Через несколько секунд вы получите скриншот страницы. Попробуйте, это бесплатно!

Сервис IE NetRenderer работает быстро. В отличие от других служб скриншотов, мы можем обрабатывать большое количество захваченных заданий параллельно и в реальном времени. Скорость рендеринга должна быть сопоставимой, если не быстрее вашего локального браузера. Наши двигатели IE имеют гарантированную пропускную способность интернета в 200 Мбит/с.

Для чего подходит

Этот инструмент веб-рендеринга идеально подходит для веб-дизайнеров, работающих на рабочих платформах Apple iMac и Linux. Он позволяет проверять веб-проекты изначально на всех популярных версиях Internet Explorer, без необходимости выделять несколько физических или виртуальных ПК с Microsoft Windows для этой цели. Перед каждым заданием рендеринга мы очищаем кэш Internet Explorer. Это позволяет сразу увидеть эффект от всех изменений, внесенных во время веб-разработки.

Обычно IE Netrenderer показывает только самую верхнюю часть любой веб-страницы. Если вы хотите увидеть части страницы ниже, введите вертикальное значение смещения пикселя в поле справа на URL. Затем рендеринг начинается с указанной позиции вертикального пикселя.

Веб-сайты, которые извлекают содержимое страницы через JavaScript после выполнения главной HTML-страницы, могут еще не завершиться, когда NetRenderer сделает снимок экрана. То же самое может произойти с объектами внешней страницы, которые должны быть загружены с медленных сторонних серверов. Показателем этого является либо пустой, либо неполный снимок экрана. Если это произойдет, отметьте флажок под кнопкой «Render», чтобы позволить дополнительное время рендеринга, чтобы сценарии имели больше шансов закончить.

Снимок экрана всегда соответствует 100% оригинального размера и точности картинки вплоть до пикселя. Пользователь отмечает максимальную ширину видимого просмотра на экранах 800×600 и 1024×768 с учетом ширины полосы прокрутки браузера.

NetRenderer загружает веб-страницы из Германии, а не с вашего ПК. Это делает его полезным для нескольких других целей. Вы можете, например, использовать его как быструю проверку из вашей локальной сети вашей компании, чтобы узнать, доступны ли Webmail или веб-интерфейс вашего брандмауэра снаружи.

Можете использовать его в качестве приблизительной оценки, скорости загрузки веб-сайта людьми в Центральной Европе. Вы также можете использовать IE NetRenderer для просмотра веб-сайтов анонимно. Посетив веб-сервер вы не оставите никаких следов ни о вашем IP-адресе, ОС, версии браузера, плагинах или файлах cookie.

Browserling.com

Используя сервис Browserling.com, проводится проверка кроссбраузерности сайта тестированием вашего сайт на выбранном браузере с выбранной версией и выбранной платформе в онлайн режиме.

Сервис удобный, но на бесплатном тарифе ограничено время сессии проверки тремя минутами. Платный тариф с неограниченными проверками стоит 19$/месяц. Примечательно наличие проверок на Android (6 версий).

Так как проверка кроссбраузерности сайта относится к профессиональным проверкам, то большинство сервисов платные. Посмотрим на них.

Browsera.com

Сервис browsera.com платный, однако в планах подписки имеется 30-дневная бесплатная пробная версия.

CrossBrowserTesting

Сервис CrossBrowserTesting позволит провести тестирование совместимости кросс-браузера в облачном сервере на 2000+ реальных браузерах Интернет.

В бесплатном тарифном плане, после регистрации, можно провести 60 минут проверочных сессий в месяц (6 сессий по 10 минут). Неограниченное использование сервиса стоит 15$/в месяц.

Browserstack.com

Данный сервис browserstack.com платный, от 29$. Он даст возможность проверить свой сайт в разных браузерах на различных физических и мобильных устройствах Android и iOS для получения наиболее точных результатов.

Saucelabs.com

На сайте мощный набор различных платных инструментов, среди которых есть тест кроссбраузерности, от 19$. ссылка.

Зачем нужно время для проверок

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

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

Кросс-браузерное тестирование: зачем и кому нужно его проводить

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

Почему возникают кросс-браузерные ошибки:

  1. Иногда сами браузеры содержат баги или по-разному внедряют функции. Часто это происходит из-за попытки заполучить конкурентное преимущество.
  2. Некоторые браузеры могут иметь разные уровни поддержки технологических функций для других браузеров. JavaScript фичи, скорее всего, не будут работать на старых браузерах.
  3. Некоторые девайсы могут содержать ограничения, которые могут заставить веб-сайт работать медленнее или некорректно отображаться. Например, если сайт был спроектирован под десктоп, то вполне вероятно, что его контент будет сложно читать на мобильном устройстве.
  4. Приступать к тестированию сайта в популярных браузерах следует уже после того как он проверен на дефекты другими видами тестирования. Только в этом случае можно будет сказать, что выявленные некорректные сценарии имеют отношение именно к особенностям браузера, а не были пропущены на других стадиях. Разумеется, при этом ошибка должна проявляться не во всех браузерах. Внимание нужно также уделить сочетанию операционной системы и браузера, выбрав наиболее распространенные из них.

Кросс-браузерное тестирование начинается с выбора браузеров. Как правило, заказчик сам определяет, с какими именно веб-обозревателями будет работать его ПО. Но задача разработчика и тестировщика – подсказать клиенту, какой браузер будет главным, следует изучить статистику заходов в подобные приложения, определить какими браузерами пользуется такая аудитория.

Цукерберг рекомендует:  Scrapy создаём краулерпарсер на Python с нуля

Впрочем, можно воспользоваться и общемировой статистикой использования браузеров (http://gs.statcounter.com):

  • Google Chrome (для тестирования, как правило, берется последняя версия), им пользуются 48,06% юзеров в мире;
  • Internet Explorer, 19,6% пользователей;
  • Mozilla Firefox (последней версии), 16,74% пользователей;
  • Safari, 10,63% пользователей (в США — 16,88%).

Некогда популярная Opera скатилась до рейтинговой отметки «другие браузеры» и, помимо Восточной Европы, используется редко. Самым же популярным по статистике является Google Chrome, поэтому, как правило, он принимается за основной браузер для тестов.

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

  • попробуйте протестировать последние изменения всех современных десктопных браузеров (на Mac, Windows, и в идеале Linux);
  • проверьте систему на самых распространенных телефонных и планшетных браузерах (например, iOS Safari на iPhone/iPad, Chrome и Firefox на iPhone/iPad/Android);
  • также проведите тесты в любом браузере, который не входит в список обязательных по проекту.

Если нет возможности или средств для того, чтобы протестировать все комбинации браузеров, ОС и девайсов на физическом оборудовании, то всегда можно прибегнуть к помощи эмуляторов (сымитировать девайс, используя специальный инструмент/софт на вашем ПК) или же виртуальных машин (ПО, которое позволяет имитировать множество ОС/ПО комбинаций на десктопном компьютере).

Также очень полезно проверить систему на “до релизных” версиях браузеров (Firefox Developer Edition, Edge Insider Preview, Safari Technology Preview, Chrome Canary, Opera Developer). Это популярная процедура, если разрабатывается сайт с применением новейших технологий и нужно проверить его функциональность на соответствие с последними нововведениями.

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

В наше время в современных браузерах мы можем создавать различные эффекты и вещи, которые раньше никак нельзя было делать при помощи HTML и CSS, да и вообще сложно было реализовать. Сейчас мы имеем большое количество различных инструментов и возможностей, в последнее время стало очень популярно использовать новые возможности HTML и CSS для создания различных эффектов и элементов, которые мы можем увидеть на странице. Очень большой плюс использования именно HTML и CSS это практически мгновенная отработка и очень широкий спектр возможностей. Все хорошо и быстро работает, если у человека отключен JavaScript это не является помехой для отображения этих самых эффектов и элементов. Но есть и один большой минус использования возможностей HTML5 и CSS3 – это кроссбраузерность, в связи с тем, что HTML5 и CSS3 не являются общепринятыми стандартами и не все их возможности работают без особых браузерных идентификаторов или использования фильтров. Суть этого недостатка можно понять, если работать с иностранными заказчиками, клиенты которых до сих пор используют различные версии Internet Explorer, так как именно в этом браузере воспроизводится большое количество дефектов, которых вы никогда не обнаружите в других популярных браузерах.

Преимущества кросс-браузерного тестирования

Сайт, прошедший кросс-браузерное тестирование и пригодный к использованию на широком спектре устройств, имеет более долгий жизненный цикл и быстрее достигает нужной потребительской ниши.

По завершению тестирования сайт будет корректно отображаться:

  • во всех необходимых специальных клиентских конфигурациях;
  • на экранах с любым существующим разрешением;
  • вне зависимости от конфигурации машины и сервера.

Инструменты для эффективного кросс-браузерного тестирования

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


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

BrowserStack обеспечивает живое тестирование веб-браузера с мгновенным доступом к каждому рабочему столу и мобильному браузеру (в настоящее время более 300), дает возможность испытать локальные и внутренние серверы, обеспечивая безопасную установку. Доступен в облаке, а значит не требует никакой установки, а встроенные инструменты для разработчиков (в том числе Firebug Lite, Microsoft Script Debugger и многие другие) дают возможность провести быстрое кросс-браузерное тестирование и отладку.

Sauce Labs позволяет тестировать в облаке более чем 260 различных браузеров и устройств, обеспечивая всесторонний тест, включая Selenium, JavaScript, Mobile и Manual. Там нет установки VM или требований обслуживания, во время выполнения тестов вы имеете возможность взять и исследовать проблему вручную. Sauce Labs отображает выполненные тесты в хронологическом порядке, с информацией о тестировании платформы, времени выполнения, билде и его пройденности.

Browsershots – это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах (всего доступно 65 браузеров). Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов. В бесплатной версии все происходит довольно медленно. Кроме того, одна сессия (запрос) может длиться только 30 минут.

Следует обратить внимание, что данный сайт имеет многоязычный интерфейс (в том числе – русский и украинский).

Однако, хоть данный сервис заявлен как бесплатный, в нем есть и платные услуги.

BrowserСam – очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой. Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile. Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.

Тестирование сайтов на мобильных устройствах с помощью эмуляторов

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

Opera Mobile Emulator – это живая демонстрация браузера мобильного телефона Opera, которая функционирует так же, как при установке на телефон. Также доступны дополнительные инструменты для отладки, такие как сочетания клавиш, селектор профилей и различные флаги командной строки.

Основные достоинства Opera Mobile Emulator:

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

Некоторые слабые места Opera Mobile Emulator:

  • вы можете проверить, как страницы выглядят только в браузере Opera;
  • меньше поддержки медиа.
  1. В браузере Internet Explorer при выходе из полноэкранного режима не изменяется верстка сайта.
  2. Скролл бар выпадающего списка не прокручивается в Internet Explorer.
  3. Нет сообщения с ошибкой, что введено меньшее количество обязательных символов в поле “Пароль”.
  4. Картинки или элементы страницы обрезаются в конкретном браузере.
  5. Разное отображение шрифтов в браузерах.
  6. Названия чек-боксов отображаются не отцентрированными по вертикали.

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

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

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

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

Для тех, кто не в курсе или немного призабыл: кроссбраузерность сайта – это его способность корректно отображаться (читабельность и отсутствие разрывов верстки) и работать в большинстве современных браузеров, в т.ч. в их версиях, созданных под разные операционные системы.

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

    Browsershots

Данный сервис проверки кроссбраузерности сайтов онлайн специализируется на создании скриншотов проверяемого веб-сайта из разных браузеров различных версий (в т. ч. устаревших и не очень популярных), общее количество которых превышает 200 шт.

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

Платная подписка, которая повысит для Вас приоритет тестирования кроссбраузерности сайта онлайн и создания скриншотов обойдется около 30$ в месяц.

Также имеется возможность выбора разрешения экрана, глубины цвета, JavaScript и Flash нескольких версий.

Browserling

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

Перед непосредственным проведением теста на кроссбраузерность можно выбрать один из 5 популярных браузеров (Opera, Safari, Chrome, Firefox, IE), а также одну из 5 версий Windows или 4 версий Android. Имеется возможность изменения разрешения экрана и сохранения скриншотов.

Все возможности этого сервиса кроссбраузерности доступны только в платных планах подписки на него. Бесплатная версия ограничена 3-х минутной сессией тестирования, разрешением экрана 1024х768 и операционной системой Windows Vista.

CrossBrowserTesting

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

Варианты тестирования кроссбраузерности:

– «живой» тест, дающих возможность взаимодействовать с сайтом в браузере виртуальной машины с предварительно выбранными параметрами и возможностью сохранения скриншотов и записи видео;

– режим автоматического сохранения скриншотов из разных комбинаций браузеров/ОС/устройств/разрешений экранов;

– Selenium тест, который заключается в проведение автоматических проверок по заранее составленному скрипту с возможностью записи результатов в видеофайлы;

– локальное подключение, во время которого можно выполнить проверку для еще не опубликованных веб-документов.

Имеется 7-дневный триал с лимитом в 60 минут использования для предварительной оценки возможностей сервиса перед принятием решения о приобретении подписки (от 29 до 200$/мес).

IE NetRenderer

Полностью бесплатное решение для проверки кроссбраузерности в онлайне. Особенность его в том, что проверка доступна только для браузера Internet Explorer (с версии 5.5 до 11).

Никаких настроек кроме выбора версии IE и указания адреса проверяемого веб-сайта нет.

IE Tester

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

MultiBrowser

Платное приложение для тестирования кроссбраузерности и адаптивности сайтов. Поддерживает несколько версий IE, Safari 5.1, все существующие сборки Chrome и Firefox, а также эмуляцию множества мобильных устройств с различными разрешениями экранов.

Программа может использовать как уже установленные на компьютере браузеры, так и подгружать необходимые пользователю версии.

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

Несколько разных режимов работы позволяют:

– взаимодействовать с веб-сайтом в выбранном браузере;

– проводить автоматическое сохранение скриншотов с различных устройств/разрешений экранов/браузеров;

– просматривать сайты на эмулированных различных мобильных устройствах с возможностью записи видео.

Также для установки доступна 14-дневная триал-версия.

Litmus

Платный сервис, который поможет проверить кроссбраузерность сайта онлайн. Бесплатно можно использовать первые три дня. Далее нужно платить минимум 60$ в месяц.

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

Browserstack

Очередной платный сервис с 30-минутным триалом и возможностью установки локального ПО для тестирования кроссбраузерности, поддерживающий 7 популярных браузеров разных версий и множество эмулированных мобильных устройств.

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

Browser Sandbox

Онлайн сервис для тестирования кроссбраузерности, поддерживающий очень много как десктропных, так и мобильных версий браузеров. Бесплатная версия уступает платной (от 10$/мес.) только в плане меньшего объема облачного хранилища данных и ограничения доступа к некоторым вариантам проверок, но в большинстве случаев ее возможностей должно быть достаточно.

Equafy

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

Процессу проверки, который может записываться на видео, предшествует целый ряд настроек, в которых слабо разбирающемуся в английском пользователю может быть несколько сложновато. Но в целом, если разобраться, функционал достаточно интересный и, по сути, уникальный в своем роде. Скриншоты можно просматривать в списке страниц составленного отчета, нажимая на направленную вниз стрелку (Show) в последней колонке.

Browsera

Качественный сервис для все той же проверки кроссбраузерности сайта онлайн, для полноценного использования которого придется приобрести подписку с оплатой от 39$/14 дней.

Бесплатная версия также присутствует, но она имеет существенные ограничения по количеству доступных браузеров и проверяемых страниц веб-сайта, а также качеству предоставляемых скриншотов.

Sauce Labs

В этом многофункциональном сервисе также можно проверить кроссбраузерность сайта онлайн. Присутствует существенно ограниченная триальная версия. Платная подписка от 19$ в месяц дает возможность пользоваться автоматизацией проверок. Количество поддерживаемых браузеров, размеров экранов и устройств удовлетворительное – около 700 комбинаций.

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

Кроссбраузерная совместимость сайта – что это, и как ее проверить


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

В этой статье мы уделим больше внимание именно кроссбраузерной совместимости (совместимости веб-сайта с различными современными браузерами). Зачем это нужно? Краткий ответ таков: если вы не уделите внимания этому вопросу, вы можете потерять тысячи потенциальных посетителей своего сайта. Тестирование кроссбраузерной совместимости – это важная составная часть разработки сайта.

Что такое тестирование кроссбраузерной совместимости?

Тестирование кроссбраузерной совместимости – это, кратко говоря, проверка того, как выглядят все ваши веб-страницы при просмотре в различных браузерах (например, Chrome, Firefox или Internet Explorer). Даже если вы не знали, что практически все браузеры придают вашему сайту различный внешний вид, увы, но так и есть, и только путем тестирования это можно выявить и исправить. Разумеется, что под абсолютно все браузеры адаптировать сайт не получится, но можно начать с тех, которыми пользуются большинство ваших пользователей (узнать это можно, например, из статистики Google Analytics).

Почему важно тестировать кроссбраузерную совместимость?

Современные пользователи сети Интернет имеют широкий выбор браузеров. Если вы не проведете тестирование и/или не проведете изменение верстки и стилей под самые популярные браузеры, вы просто потеряете многих потенциальных посетителей, поскольку для них ваш сайт будет недоступным или трудным для просмотра. Это же касается и мобильной верстки (оптимизации сайта под мобильные устройства).

Что влияет на трудности при просмотре моего сайта?

Существует ряд трудностей, которые могут быть у пользователей при посещении вашего сайта. Ввиду большого количества переменных – в том числе и тех, которые не зависят от вас, — каждый посетитель, возможно, будет видеть ваш сайт немного иначе, чем вы того хотели.

Вот основные элементы, которые могут вызывать проблемы с отображением сайта:

  • Аппаратное обеспечение пользователя: установленная в компьютере графическая карта, настройки цвета и разрешение экрана, используемые посетителем
  • Программное обеспечение: используемая операционная система и установленные шрифты
  • Старые версии браузеров. Некоторые посетители могут не обновлять свои браузеры в течение очень долгого времени, и это может вызывать конфликты совместимости при просмотре вашего сайта (особенно, если он выполнен с использованием самых современных технологий)

Основные инструменты для тестирования кроссбраузерной совместимости

Если вы не эксперт по тестированию в веб-разработке, не беспокойтесь: в сети Интернет достаточно и платных и бесплатных ресурсов для этого, и вам не нужно будет создавать свою собственную систему тестирования. Ниже представлен перечень самых популярных инструментов для тестирования вашего сайта на браузерную совместимость, который подойдет практически для любых уровней знаний и опыта. Основное «но»: русскоязычных ресурсов нет, все они на английском языке.

Browserling довольно прост в использовании. Это приложение не нужно устанавливать, достаточно ввести адрес своего сайта и выбрать браузер для теста. Иногда нужно подождать несколько минут в очереди, а иногда результат теста выводится сразу на экран. Инструмент бесплатен, из-за чего возможны некоторые ограничения, но для простой проверки своего сайта он подойдет. В бесплатной версии время жизни сессии ограничено 3 минутами.

Это довольно простое онлайн-приложение для теста кроссбраузерности сайта. В отличии от предыдущего ресурса, этот не дает доступ к просмотру сайта, а делает снимки экрана (скриншоты) для каждого из выбранных браузеров. Бесплатен.

Этот сайт предлагает опробовать запуск сайта для теста в браузерах Chrome, Firefox, Internet Explorer, Opera и Safari из песочницы. Нужна регистрация.

Дешево и сердито

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

Платные ресурсы

Для профессиональных целей подойдут только платные решения. Практически все они требуют наличие подписки, но предоставляют небольшой бесплатный тестовый период. К таким ресурсам можно отнести: BrowserStack, Cross Browser Testing, Sauce Labs.

Отладка

  • Для определения поддержки элементов HTML5 и CSS3 в различных версиях браузеров воспользуйтесь сайтом Can I use.
  • Если для вашего сайта критично важна поддержка в старых браузерах, можете воспользоваться следующими плагинами и JavaScript-библиотеками: HTML5 Shiv, Modernizr, Respond.
  • При подключенных вышеуказанных плагинах вам нужно будет писать отдельные стили CSS, добавлять нужные медиа-запросы, а в некоторых случаях и браузерные префиксы css-стилей. Это позволит вам значительно расширить кроссбраузерную поддержку для вашего сайта.

Хотя тестирование браузерной совместимости – не самый приятный или вдохновляющий аспект создания нового веб-сайта, но это один из краеугольных камней успешного сайта, на котором посетители становятся клиентами благодаря простоте использования и профессиональному оформлению.

Кроссбраузерность – что это такое, и как ее можно проверить: обзор сервисов

Доброго дня, дорогие читатели!

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

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

Кроссбраузерность – что это такое

Если ваш сайт хорошо отображается в Google Chrome, то это еще не значит, что он будет также хорошо выглядеть, например, в Firefox. Вполне возможно, что в последнем у вас поедет верстка, какие-то элементы будут расположены совершенно иным образом, а может быть, весь сайт будет иметь непрезентабельный вид.

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

Согласитесь, когда проект работает только под какую-то одну категорию пользователей (например, тех, кто использует тот же Chrome), то это не очень хорошо. Самим пользователям будет не очень удобно работать с таким сайтом, а это порождает большую долю проблем.

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

То есть кроссбраузерность – это не только про внешний вид, но и про адекватную работу всех элементов ресурса. Особенно это касается всяких сервисов, где пользователь должен постоянно взаимодействовать с функционалом или инструментами. Если такие сервисы не будут оптимизированы под все обозреватели, то огромная доля людей будет срезаться.

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

Вообще, данное определение появилось еще в начале 90-х годов, когда интернет только-только начал появляться, и разные компании начали создавать браузеры для пользователей. Ведущими браузерами был Internet Explorer от Microsoft и Netscape Navigator. Если ресурс отображался одинаково хорошо в обоих обозревателях, он считался кроссбраузерным.

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

Сейчас кроссбраузерными считаются сайты, которые хорошо работают на:

  • Google Chrome и производных обозревателях (типа Яндекс.Браузера, Chromium и т. д.);
  • Opera;
  • Mozilla Firefox;
  • Internet Explorer (ныне Microsoft Edge);
  • Safari (браузер, который используется на macOS).

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

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

  1. Расположение элементов. Если какие-то элементы сайта съехали и выглядят неестественным образом, то это значит, что ресурс не адаптирован под какой-то конкретный обозреватель. Элементы могут съезжать немного, или их, вообще, может не быть (не отображаются или съезжают за пределы экрана).
  2. Текст. Этот пункт особенно важен для статейных ресурсов. Если текст на сайте крайне нечитабелен, тоже куда-то съезжает или не отображается, то все плохо. Необходимо срочно менять обозреватель или оптимизировать сайт.
  3. Скорость загрузки. Слишком медленно загружающиеся страницы могут свидетельствовать об отсутствии кроссбраузерности. Какие-то элементы могут не распознаваться обозревателем, и тогда страница будет “зависать”. Подобный процесс может не прекращаться, и страница будет в состоянии вечной загрузки.
  4. Адекватная работа всех кнопок, сайдбаров и т. д. Все элементы ресурса должны адекватно реагировать на воздействия со стороны пользователя. Если кнопка, которая должна быть ссылкой, никак не реагирует на клики, то это значит, что она не работает с каким-то конкретным устройством или программой. Такое срочно нужно фиксить.
  5. Адаптивность под все устройства. Ресурс должен быть адаптирован как под ПК, так и под мобильные устройства, планшеты и т. д. Если нет адаптивности, то нужны хотя бы разные версии. Например, мобильная версия и версия для ПК. Также эти версии должны нормально отображаться, никуда не съезжать и т. д.

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

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

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

Сервисы для проверки кроссбраузерности

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

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

Для использования вам необходимо перейти на официальный сайт, после чего ввести адрес ресурса в специальное окно. Также здесь можно отметить с помощью галочек те браузеры и версии, которые вам нужны. Еще здесь есть возможность проверить работу сайта с разных операционных систем: Linux, Windows, Mac и BSD.

По умолчанию онлайн-инструмент проверяет сайт сразу для всех операционных систем. Если вы не хотите, например, чтобы сервис проверял адаптацию под Linux или Mac, то вы должны просто убрать все галочки из соответствующего столбика.

Во время проверки вы сможете увидеть скриншоты с результатами. Они будут показывать, как бы выглядел сайт, если бы пользователь зашел с определенного обозревателя.

Browsershots можно использовать бесплатно, однако в платной версии есть дополнительные функции. Прежде всего это приоритет в сравнении с бесплатными проверками, поддержка кастомного разрешения экрана, JS и Flash (разные сборки), а также цветовая глубина.

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

CrossBrowserTesting – платный инструмент, который можно использовать только после оплаты подписки. Однако вы можете активировать пробный режим, создав себе аккаунт.

Стоимость подписки начинается от 29 долларов за месяц. Самый дорогой тариф обойдется вам в 100 долларов ежемесячно. В принципе, такие цены вполне оправданы, учитывая, что у этого проекта есть довольно полезные функции.

Например, вы сможете тестировать сайт в реальном времени, имитируя работу нужного браузера и операционной системы. То есть вы просто зайдете на нужный ресурс внутри платформы, сможете посмотреть, как там работают переходы страниц, как отображаются какие-то отдельные элементы, работают ли виджеты и т. д.

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

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

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

Цукерберг рекомендует:  Трудоустройство - Трудоустройство после обучения на факультете GB

Инструмент поддерживает почти все популярные обозреватели и версии. Также здесь есть поддержка мобильной операционной системы Android. Но данный функционал доступен только после оплаты подписки. Минимальный тарифный план обойдется вам в 19 долларов за месяц использования. Более расширенный – 29 долларов.

Также вы сможете использовать базовый бесплатный тариф, который доступен изначально. Он накладывает ряд ограничений. Например, время тестирования ограничено тремя минутами. Также в бесплатной версии вы не сможете выбрать ничего, кроме Windows 7 и Internet Explorer 11. Для тестирования сайтов под другими платформами придется оплачивать тарифный план.

К сожалению, iOS и macOS пока не завезли. Но вы все равно сможете проверить адаптированность сайта к обозревателю Safari. Только к его Windows-версии.

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

Нужно просто выкупить программу один раз, потом вы сможете пользоваться ей столько, сколько захотите. Стоимость профессиональной версии этого софта – 200 долларов.

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

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

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

Перед покупкой полной версии программы вы сможете протестировать базовую сборку в течение 14 дней. После этого придется покупать платную версию, базовая перестанет работать.

Песочница, которая позволяет тестировать сайт в разных версиях популярных браузеров. Самые крайние релизы доступны для тестирования бесплатно. А вот более ранние релизы можно будет протестировать только после оплаты.

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

Также вы сможете протестировать сайт на различные параметры. Для этого нужно установить дополнительное расширение, которое доступно на официальном сайте.

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

Это бесплатная платформа, которая работает на чистом энтузиазме. Самая последняя доступная версия браузера – 11. В силу того, что сейчас в Windows используется Edge, этот инструмент пользуется не очень высокой популярностью. Но если учитывать, что сейчас еще есть много пользователей, которые работают с устаревшими браузерами от Microsoft, то IE NetRenderer не выглядит таким уж бесполезным.

Огромная платная платформа для тестирования ресурсов на кроссбраузерность. Для использования этого сервиса придется заплатить определенную сумму: минимальный тариф стоит 19 долларов, самый дорогой – 298. Оплата помесячная.

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

Среди прочего здесь можно выделить автоматическое тестирование, которое сможет сделать полный аудит вашего ресурса и выдать вам результат в виде скриншотов.

Заключительный на сегодня сервис, который позволяет тестировать адаптированность сайта к разным приложениям и версиям. Это автоматический инструмент, который позволяет вам быстро получить результат в виде скриншотов. Он покажет проблемы с разметкой, съезжающими текстами, неправильной версткой и т. д.

Тут есть две версии: платная и бесплатная. В платной доступны расширенные функции и дополнительные браузеры. Бесплатная может похвастаться лишь базовыми возможностями платформы, но некоторым вебмастерам этого вполне хватит.

Стоимость месячной подписки – 49 долларов. Можно купить еще более расширенную за 99.

Как сделать сайт кроссбраузерным


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

Самое банальное – CSS-хуки, которые позволяют вам прописать определенные стили для конкретного браузера. То есть если на условном IE 7 возникают проблемы с отображением таблицы, вы сможете составить альтернативный набор стилей, который будет активироваться только на этой версии приложения.

И казалось бы, все хорошо, и проблема решена. Но и минусы у такого подхода тоже есть. Сами файлы стилей становятся более громоздкими, сайт может загружаться медленнее, так как станет более тяжелым.

Если страницы будут загружаться слишком медленно (например, в коде будет много различных хуков под старые браузеры), то ущерба здесь будет даже больше, чем пользы. Намного эффективнее будет установить заглушку для обладателей старых версий, которая будет их посылать на официальные ресурсы для обновления. Да, вы потеряете часть трафика, но зато ресурс не улетит вниз по позициям из-за плохих поведенческих факторов.

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

Заключение

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

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

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

А если вы хотите разобраться в сайтах самостоятельно, то я советую вам обратить внимание на курс для вебмастеров от Василия Блинова. В нем Василий рассказывает, как создать свой блог и зарабатывать на нем неплохие деньги с помощью партнерских программ и иных методов монетизации. Подробности по ссылке.

Как проверить кроссбраузерность верстки сайта в browsershots и настроить отправку пинга при появлении новых материалов

Обзор инструментов тестирования кроссбраузерности вёрстки. Статьи о вёрстке. Проект “Открытые уроки”

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

Во всяком случае, если разработчик будет следовать стандартам.

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

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

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

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

Бесплатные инструменты тестирования

У нас есть хорошая новость: сегодня для веб-дизайнеров доступны очень мощные бесплатные инструменты тестирования.

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

Но если вы не хотите тратить лишние деньги на тестирование, то и эти инструменты могут предложить многое.

Adobe BrowserLab

Adobe BrowserLab — бесплатный инструмент тестирования кроссбраузерности, позволяющий протестировать сайт в современных и некоторых устаревших браузерах, включая различные версии Chrome, Safari, IE и Firefox.

Просмотр возможен в нескольких режимах: полноэкранном, в режиме сравнения, а также в режиме «наложенных слоёв». Сервис може получать доступ к страницам, размещённым в интернете, или работать локально как дополнение к Firebug или Adobe Dreamweaver CS5.

Возможность создания наборов браузеров для тестирования очень полезна, если нет необходимости тестирования в устаревших браузерах.

Browsershots

Browsershots, вероятно, обладает самым широким набором бразеров среди бесплатных инструментов тестирования. Он включает в себя браузеры, работающие в Linux, Windows и BSD.

Среди них есть такие, о которых вы, вероятно, вообще никогда не слышали (например, Galeon, Iceape, Kazehakase или Epiphany).

Browsershots позволяет тестировать как в последних версиях каждого браузера, так и в устаревших версиях.

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

SuperPreview (бесплатная и коммерческая версии)

SuperPreview:http://expression.microsoft.com/en-us/dd565874.aspx – продукт Microsoft и работает только в Windows.

Он позволяет вам указать собственный «основной» браузер, способен работать с любым браузером, установленным на вашем компьютере (и поставляется со втроенным движком рендеринга IE 6).

С одной стороны, работа с браузерами, установлеными в ОС обеспечивает высокую скорость работы (просто потому, что не нужно ждать загрузки чего-либо или ожидать ответа удалённого сервера), с другой стороны это ограничивает набор браузеров для сравнения.

Trial-версия SuperPreview предоставляет 60 дней использования «облачных» сервисов, после чего вам придётся либо купить его, либо перейти в «урезаный» режим работы (только локально установленные браузеры и режим IE 6-9).

«Облачный» сервис обладает поддержкой Chrome, Safari (Mac) 4-й и 5-й версий, Firefox 3-й и 4-й версий. Также есть возможность интерактивного режима входа на сайты, требующие авторизации.

Есть инструменты для отладки DOM и доступ к режиму «наложенных слоёв» как в Adobe BrowserLab. К сожалению, нет никакой поддержки для Opera, ни для локальных версий браузера, ни в «облаке».

Чтобы получить доступ к «облачным» сервисам вам нужно установить Expression Web, но бесплатная версия обеспечивает поддержку тестирования в IE 6, IE7, IE 8 (и IE 8 в режиме IE 7), а также IE 9, если он установлен в вашей ОС.

Lunascape 6

Lunascape 6 объединяет «движки» трёх основных браузеров для Windows. Он может исполльзовать Trident (IE), Gecko (Firefox) и WebKit (Chrome и Safari) таким образом, что вы сможете одновременно увидеть, как выглядит ваш сайт во всех трёх браузерах.

Это не совсем традиционный инструмент тестирования кроссбраузерности, но тем не менее он будет полезным инструментом для дизайнеров и разработчиков. Важнейшим преимуществом конечно является возможность одновременного просмотра результата сразу в трёх основных «движках» рендеринга.

Таже поддерживаются расширения и плагины Firefox и вы можете использовать инструменты для разработчиков, такие как Firebug для поиска проблем совместимости.

IE Tester

IE Tester — бесплатный (как для частного, так и для профессионального использования) браузер для Windows, позволяющий тестировать сайт в IE 5.5, IE 6, IE 7, IE 8, IE 9 и IE 10 Previev. Можно тестировать как рендеринг HTML+CSS, так и JavaScript. Доступна только альфа-версия инструмента. Работает на Windows 7, Windows Vista и Windows XP c установленным IE не ниже 7-й версии.

IE NetRenderer

IE NetRenderer позволяет протестировать страницы в Internet Explorer от версии 5.5 до IE 9. Для каждой версии нужно делать отдельный запрос, но это можно простить бесплатному инструменту.

Spoon

Spoon сервис эмуляции программ. Предоставляется бесплатная возможность запуска Firefox, Chrome, Opera и Safari для пользователей Windows. Доступны разные версии браузеров: Firefox 2-5, 4-8 Chrome, Safari 3-5 и Opera 9-10. Технически, Spoon поддерживает виртуализацию IE, но эта возможность отключена по требованию Microsoft.

Sauce Labs (бесплатная и коммерческая версии)

Sauce Labs предоставлет доступ ко множеству браузеров в разных ОС и устанавливает соединение вашего браузера с настроенной виртуальной машиной. Также записывается видео всей сессии тестирования. Соервис предоставляет 200 минут бесплатного тестирования в месяц и позволяет создавать тесты автоматизированого тестирования в браузерах (используется Selenium).

Browsera (бесплатная и коммерческая версии)

Browsera обеспечивает автоматизацию тестирования совместимости. Он автоматически определяет раздличия в отображении страниц браузерами, тем самым упрощая процесс тестирования. Также определяются ошибки JavaScript, а в коммерческой версии позволяет тестировать страницы по подписке и страницы, требующие авторизации. Также можно протестировать динамические страницы.

Бесплатная версия включает в себя добвольно ограниченное число браузеров и низкое разрешение. Существуют разные коммерческие версии: начиная от $39 за один проект и от $49 до $99 за месячную подписку. Коммерческие версии поддерживают большее число браузеров, обеспечивают высокое разрешение и позволяют тестировать «закрытые» страницы.

Browserling (бесплатная и коммерческая версии)

Browserling относительно новый инструмент тестирования кроссбраузерности. Поддерживается ограниченное число браузеров (и не всегда последние версии), что ограничивает область его применения. Но это пока что бета-версия, так что есть надежда, что в ближайшем будущем будет поддерживаться большее число браузеров.

Бесплатная версия ограничивет вреся работы до пяти минтут. За $20 в месяц предоставляется возможность работы без ограничений.

Коммерческие инструменты тестирования

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

Mogotest

Mogotest предоставляет возможность полного тестирования кроссбраузерности, в том числе и для приватных страниц. Предоставляется API, поэтому возможна интеграция в существующие инструменты и рабочие процессы.

Mogotest также предоставляет отчёт о состоянии сайта, который укажет на «битые» ссылки и потерянные страницы, бесконечные перенаправления и прочие проблемы, часто встречающиеся в новых сайтах.

Служба предоставляет инструменты для сравнения скриншотов, тестирования сайта целиком, включая тестирование последовательностей страниц, и тестирование отдельных страниц. Поддерживает HTTP-basic аутентификация и cookies.

Предоставляются два плана для физических лиц: персональный план, начиная с $15 в месяц, позволяющий протестировать до 50 страниц на трёх сайтах, и план для фрилансеров за $45, позволяющий протестировать до 10 сайтов и 350 страниц. Планы для компаний начинаются от $125 в месяц и заканчиваются на $4499 за неограниченный доступ. Два наиболее дорогих плана включают в себя настраиваемые отчёты.

Cloud Testing

Cloud Testing предоставляет возможность функционального тестирования кроссбраузерности. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты и HTML и компоненты диагностики. Цены на сайте не указаны.

BrowserCam

BrowserCam – набор средств для тестирования десктопных и мобильных браузеров (тестирование мобильных до сих пор отсутствует в большинстве других инструментов). Также предоставляется удалённый доступ для тестирования в реальном времени на Windows, Linux и Mac OS X, и возможность захвата электронной почты для проверки HTML-, RTF- и TXT-писем.

Цена на BrowserCam начинается от $19,95 в день для одного сервиса (и $24,95 для браузера, удаленного доступа и перехвата пакетов электронной почты) и заканчивается на $399,95 в год за один сервис (и $499,95 для браузера, удаленного доступа и перехвата пакетов электронной почты и многопользовательский доступ, или $999,95 за все эти функции плюс тестирование мобильных устройств).

Multi-Browser Viewer

Multi-Browser Viewer работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом). Доступен на пяти языках:
английском, испанском, немецком, русском и французском.

Стоимость Multi-Browser Viewer составляет $139,95 за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Продление лицензии в настоящее время составляет $99,95. Бесплатная триал-версия доступна на сайте программы.

CrossBrowserTesting

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

Стоимость ежемесячной подписки составляет от $29,95 до $199,95 в зависимости от количества пользователей и минут испытаний (возможен перенос неиспользованного времени на следующий месяц, но количество таких минут ограничено). Для всех планов предоставляется бесплатный тестовый период сроком на одну неделю.

Сравнение инструментов тестирования

В таблице ниже перечислены основные характеристики рассмотренных инструментов тестирования.

ИнструментТипКоличество поддерживаемых версий браузеровТестирование в IEИнтерактивное тестированиеСравнительное тестированиеСтоимость
Adobe BrowserLab Онлайн-сервис 13 IE6+ Нет Да бесплатно
Browsershots Онлайн-сервис 60+ IE6+ Нет Нет Бесплатно
SuperPreview Приложение Зависит от установленных в ОС IE6+ Да Да Бесплатно
Lunascape Приложение 3 IE6+ Да Да Бесплатно
IETester Приложение 6 версий IE IE5.5+ Да Да Бесплатно
IE NetRenderer Онлайн-сервис 5 версий IE IE5.5+ Нет Нет Бесплатно
Spoon Онлайн-сервис 16+ не поддерживается Да Нет Бесплатно
Sauce Labs Онлайн-сервис 40+ IE6+ Да Нет Бесплатно – $499 в месяц
Browsera Онлайн-сервис 9 IE6+ Нет Да Бесплатно – $99/month
Browserling Онлайн-сервис 9 IE5.5+ Нет Нет Бесплатно – $20 в месяц
Mogotest Онлайн-сервис 7+ IE6+ Нет Да $15 – $4499 в месяц
Cloud Testing Онлайн-сервис 4+ IE6+ Да Да Не указано
BrowserCam Онлайн-сервис 90+ IE5.2+ Да Да $19,95 – $89.95 в месяц
Multi-Browser Viewer Приложение 80+ IE6+ Для некоторых браузеров Да $139.95
CrossBrowserTesting Онлайн-сервис 100+ IE6+ Да Да $29,95 – $199.95 в месяц

Заключение

Вне зависимости от того, какой инструмент вы выберете, тестирование необходимо.

Чем раньше вы начнёте тестировать код и чем чаще вы это будете делать, тем меньше проблем с совместимостью вы получите.

Найдите инстумент, максимально подходящий вашему работему процессу (такой, что вам будет нравиться работать с ним) и проверяйте кроссбраузерность каждый раз, как вы что-то меняете в коде сайта.

Обсуждение урока на форуме

Автор перевода


Ближайшие курсы по теме

DEV-P13. Профессиональная верстка сайтов

Курс пока не поставлен в расписание. Оставить заявку на курс

За работу комментариев отвечает

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

От автора: практически каждый владелец сайта рано или поздно задумывается о необходимости проверить свой сайт на отображения в разных веб-обозревателях.

В действительности, если у него самого все хорошо, то это не означает, что у всех остальных сайт тоже отобразится нормально.

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

Ручная проверка

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

Далее можно попросить друзей и знакомых зайти на ваш сайт и прислать ваш скриншот. Для них это будет наверняка несложно. У кого-то стоит Opera, у другог — Mozilla, а третий вообще сидит на старом IE. Люди используют разные веб-обозреватели и если попросить их о небольшой услуге тестирования, то вы можете получить достаточно неплохой охват браузеров.

Но такой способ, конечно, годится только для проверки личного блога, на котором вам не обзязательно реализовывать полноценную кроссбраузерность. Если же речь идет о более менее профессиональном сайте, то стоит учитывать внимание даже на мелочи, а их трудно выявить методом ручной проверки. Так мы подходим к необходимости использовать специальные программы и инструменты.

Где проверить кроссбраузерность

http://browsershots.org/ — многие называют этот сайт лучшим бесплатным сервисом для проверки кроссбраузерности. На главной странице сразу же видно множество различных браузеров и их версий. Нужно указать галочками нужные и отправить все это на анализ. Сколько можно ждать результатов? Очень долго, иногда более получаса.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Рис. 1. Сайт позволяет бесплатно получить скриншоты из множества веб-обозревателей.

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

Этот сервис подойдет для тех, кто не хочет платить за проверку кроссбраузерности.

http://crossbrowsertesting.com/ — особенность этого сервиса в том, что на нем нужно зарегистрироваться, прежде чем начинать тестирование. На самом деле в большинстве своем это платный сервис и им пользуются зарубежные веб-разработчики.

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

IETester – уже много раз я писал об этой программе, но в статье о проверке кроссбраузерности без нее просто никуда. Это бесплатная программа для windows. Скачав и установив ее можно свободно проверить внешний вид сайта в Internet Explorer 6-8.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Browserling.com – на этом сайте вы можете записаться в очередь, чтобы посмотреть на свой сайт в различных версиях IE, начиная от 5.5 и заканчивая 9. Есть возможность посмотреть и в других популярных веб-обозревателях. Как вы понимаете, желающих много и каждому дают всего 5 минут на тестирование.

Сервис хорош тем, что вы не просто видите скриншот, а можете покликать по веб-страничкам, действительно протестировав их. В общем, еще один неплохой бесплатный инструмент.

Multiple IE – это такой инструмент, который позволяет проверить шаблон в старейших версиях IE (3, 4, 5). Я не знаю, нужно ли это кому-то сегодня, но на всякий случай можно упомянуть и его.

Минусы использования веб-сервисов

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

Например, crossbrowsertesting, на мой взгляд, самый лучший сервис. Проверка кроссбраузерности в нем позволит получить представление об отображении сайта в сотнях веб-обозревателей. Но и цены там немаленькие, все-таки зарубежный ресурс. Но для профессионалов самое то. Если же вам не нужна глубокая проверка, то бесплатными инструментами можно вполне обойтись.

Рис. 2. В crossbrowsertesting можно проверить сайт в более чем 900 браузерах!

Проверка это хорошо, но как исправить проблемы с отображением сайта, если они уже обнаружены. Можно обратиться к специалисту, а можно попробовать самому. Об этом написано в другой статье (здесь вставить ссылку на статью как сделать кроссбраузерность).

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Как проверить кроссбраузерность верстки сайта в Browsershots и настроить отправку пинга при появлении новых материалов

Доброго времени суток, уважаемые читатели блога В эфире очередной выпуск рубрики Веб-обзоры. Сегодня я хочу поговорить о том, как проверить, правильно ли отображается ваш ресурс в популярных браузерах), а также о способах рассылки пинга (оповещения поисковых систем и других сервисов о том, что на вашем интернет проекте появились новые материалы) и кое о чем еще.

При верстке макета своего сайта или же при доработке (внесении изменений) уже готового шаблона очень важно убедиться, что все это дело будет выглядеть в любом браузере, которые только могут использоваться в интернете. Задачу эту можно решить с помощью довольно-таки удобного онлайн сервиса.

Browsershots — как проверить кроссбраузерность верстки

Наверное, вы все уже знаете, что если ваш ресурс прекрасно и корректно отображается в каком-либо браузере (например, Opera), то это вовсе не означает, что во всех остальных он будет выглядеть так же хорошо.

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

С этим ничего нельзя поделать и надо научиться с этим жить — проверять корректность отображения своего ресурса во всех доступных браузерах (кроссбраузерность) и вносить при необходимости коррективы в код. Но для этого, как минимум, нужно установить кучу обозревателей различных версий или же, что намного проще, воспользоваться сервисом Browsershots.

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

Например, если у вас на компьютере стоит Opera 10, то для того, что бы посмотреть вид вашего сайта в Opera 8, вам нужно будет либо переустановить обозреватель, либо установить его более старую версию, например, на виртуальной машине. Оба эти способа чудовищно не удобны и поэтому упомянутый выше сервис придется нам очень кстати.

Работа с онлайн сервисом Browsershots предельно проста:

  1. вводите на главной странице проекта в поле «Enter URL Here» адрес вашего
  • выбираете из списка, расположенного ниже, нужные вам версии браузеров
  • если нужно, то выбираете определенное разрешение экрана и глубину цвета из выпадающих списков
  • в трех последующих списках можете отключить или включить (можно еще выбрать конкретную версию) показ JavaScript, Java и Flash
  • все, теперь жмем кнопку «Submit» и ждем завершения процесса создания скриншотов для каждой выбранной версии браузера (данный процесс может занять от 3 до 50 минут, поэтому в это время можно заняться другими делами, но не закрывать этой страницы в браузере)
  • полученные в результате работы онлайн сервиса скриншоты можно посмотреть прямо там же (щелчок по скриншоту для его увеличения) или же скачать одним файлом к себе на компьютер (под скриншотами поищите ссылку «скачать»)

    Программа для записи разговоров по Skype, ICQ и QIP

    Кроссбраузерность: что это, как проверить и сделать сайт кроссбраузерным

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

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

    В те времена кроссбраузерными считались ресурсы, одинаково работающие в Netscape Navigarot (браузер прекратил свое существование в 2007 году) и в Internet Explorer.

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

    Особенности

    Любой современный браузер применяет собственные алгоритмы обработки исходного HTML и CSS кода. В связи с этим разработчики ресурсов встречаются с проблемами совместимости сайта с тем или иным браузером.

    Цукерберг рекомендует:  С++ - Помогите решить задачу по с++

    Чтобы сделать проект кроссбраузерным, вам не обойтись одними лишь стандартными инструментами CSS.

    Здесь также потребуются специальные CSS-селекторы (хаки), присущие лишь конкретному браузеру, поэтому их придется прописывать для каждого приложения отдельно.

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

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

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

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

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

    14 инструментов для проверки кросс браузерности сайта

    Может быть, в будущем все веб браузеры будут выводить HTML/CSS код одинаково и в соответствии со стандартами. Тогда кросс браузерная проверка станет не нужна. Но такие рассуждения все еще остаются фантастикой, и проверка вашего проекта в современных и старых версиях браузеров необходима.

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

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

    Но есть более эффективный способ проверить кросс браузерность своего детища – бесплатные и коммерческие веб сервисы и программы. В данной статье представлены наиболее интересные из них.

    Бесплатная проверка на кросс браузерность

    Adobe BrowserLab

    Adobe BrowserLab – это бесплатный инструмент, который позволяет протестировать ваш проект в различных версиях Chrome, Safari, IE и Firefox.

    Он предоставляет несколько способов просмотра страниц, включая полно экранный обзор и визуальное сравнение разных вариантов. Сервис может получать динамические страницы через сеть, или его можно использовать локально через Firebug или Adobe Dreamweaver CS5.

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

    Browsershots

    Browsershots – вероятно наиболее полный бесплатный инструмент для тестирования, доступный в настоящее время. Он включает варианты браузеров для Linux, Windows и BSD. На нем также можно найти браузеры, о которых вы могли и не знать (например, Galeon, Iceape, Kazehakase и Epiphany). По умолчанию Browsershots проводит проверки на последних версиях браузеров, но доступны и старые варианты.

    Чем больше браузеров будет определено для проверки, тем больше времени уйдет на подготовку результатов. Данный факт надо учитывать при выборе набора браузеров.


    SuperPreview

    SuperPreview является предложением Microsoft в области кросс браузерной проверки (и он совместим только с Windows). Инструмент позволяет определять набор браузеров для проведения тестов.

    Он работает с любым браузером, установленным на вашей системе (механизм вывода IE6 встроен в него).

    Данный факт является причиной его быстрой работы (не нужно ждать загрузки или окончания обработки на удаленном сервисе), но и ограничивает набор доступных браузеров для сравнения.

    SuperPreview является бесплатным инструментом и планируется как часть Expression Web. В онлайн версии имеется поддержка Chrome, Safari (Mac) 4+5, Firefox 3+4.

    Также можно использовать интерактивный режим для веб сайтов, которые требуют регистрации перед выводом страниц, которые надо проверить. Есть инструмент отладки для DOM.

    К сожалению, отсутствует поддержка Opera, даже если она установлена локально.

    Lunascape

    Lunascape – это браузер с тройным механизмом вывода для Windows. Он использует Trident (IE), Gecko (Firefox) и Webkit (Chrome и Safari). Поэтому вы можете увидеть, как выглядит ваш сайт во всех трех вариантах в виде визуального сравнения.

    Хотя Lunascape не является традиционным инструментом тестирования, тем не менее, он будет очень полезен для дизайнеров и разработчиков. Его основным преимуществом является моментальный просмотр страниц сайта во всех трех вариантах механизмов вывода.

    Lunascape также поддерживает расширения и плагины Firefox, так что вы можете использовать Firebug для диагностики проблем совместимости.

    IETester

    IETester – браузер для Windows, который позволяет использовать механизмы вывода и JavaScript для просмотра сайта в версиях IE10, IE9, IE8, IE7, IE6 и IE5.5. Для работы инструмента требуется Windows 7, Windows Vista или Windows XP с IE7.

    IE NetRenderer

    IE NetRenderer позволяет проверить совместимость с сайта с Internet Explorer версий от 5.5 до 9. Вам придется проверять каждую версию индивидуально.

    Spoon

    Spoon – сервис для имитации приложений. На нем доступны различные версии Firefox, Chrome, Opera и Safari для пользователей Windows. Недостаток: Internet Explorer поддерживается механизмом виртуализации Spoon, но по требованию Microsoft данный браузер исключен из вариантов тестирования..

    Browsera (бесплатная и коммерческая версии)

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

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

    Browserling (бесплатная и коммерческая версии)

    Browserling – сравнительно новое приложение для проверки кросс браузерности. Оно поддерживает ограниченный набор браузеров (и необязательно новейших версий), что ограничивает круг его пользователей среди разработчиков. Browserling все еще находится в стадии бета тестирования, и, может быть, список браузеров, расширится в ближайшем будущем.

    Бесплатная версия имеет ограничение по времени сессии в размере 5 минут, а коммерческий вариант без ограничений стоит $20в месяц.

    Коммерческие инструменты для тестирования

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

    Mogotest

    Mogotest выполняет проверки на кросс браузерность даже страниц, которые требуют регистрации пользователей. У сервиса есть API, и он может быть интегрирован в ваш проект.

    Mogotest также выдает отчет о состоянии проверяемого сайта, в котором сообщается о неправильных ссылках, закольцованных перенаправлениях и других проблемах разметки. На сервисе есть инструмент для сравнения снимков экрана.

    Поддерживаются системы регистрации на основе HTML и куки.

    Доступны несколько тарифных планов. Персональный тарифный план стоит $15 в месяц и допускает проверки до 50 страниц на трех сайтах. Тарифный план для фрилансеров стоит $45 в месяц и допускает проверки на 10 сайтах и до 350 страниц. Групповой тарифный план стоит от $125 в месяц до $4499+ за неограниченный доступ.

    Cloud Testing

    Cloud Testing предлагает функциональное тестирование проекта. Вы можете записать предполагаемые действия пользователя в вашем браузере с помощью Selenium IDE, затем загрузить их, а Cloud Testing выполнит скрипт в разных операционных системах и браузерах. А затем будет предоставлены снимки экранов и диагностика HTML и компонентов.

    BrowserCam

    BrowserCam включает инструменты тестирования для версий браузеров настольных систем и мобильных устройств (что отсутствует во многих других инструментах проверки). Также доступен удаленный доступ для реальной проверки в конфигурациях Windows, Linux и OS X. Возможен перехват email для проверки HTML, RTF и TXT версий писем.

    Стоимость использования BrowserCam начинается от $19.95 за один сервис в день и заканчивается $999.95 за годовую подписку на полный комплект услуг.

    Multi-Browser Viewer

    Multi-Browser Viewer выполняет проверки для браузеров настольных систем и мобильных устройств.

    Он включает 26 виртуализированных веб браузеров, 5 браузеров для мобильных устройств (включая iPhone и iPad) и 61 вариант браузеров для снимков экрана (вы сможете видеть, как сайт выглядит, но взаимодействовать с ним нельзя). Также доступны пять языков: английский, испанский, немецкий, русский и французский.

    Multi-Browser Viewer стоит $139.95 за однопользовательскую лицензию, включая годовую поддержку. Обновления после года использования стоят $99.95. Также доступен пробный период использования инструмента через веб сайт.

    Сравнение инструментов

    В ниже приведённой таблице сведены вместе некоторые сведения об инструментах тестирования для сравнения их между собой и выбора наиболее подходящего варианта.

    Заключение

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

    Лучшие бесплатные инструменты для кроссбраузерного тестирования

    Вы можете просматривать сайт, используя последнюю версию Firefox, и он будет выглядеть удивительно. А после этого на сайт может зайти посетитель, использующий Internet Explorer 9, и ресурс не только будет выглядеть ужасно, но еще и не будет работать должным образом. Угадайте, что тогда произойдет? Вы потеряете посетителя. Поэтому кроссбраузерность так важна:

    Для чего мне тестировать сайт на совместимость с разными браузерами?

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

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

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

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

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

    Firefox, Internet Explorer, Safari, Chrome и Opera обычно можно без проблем загрузить и установить. Но если у вас нет такой возможности, то существует множество веб-инструментов, которые имитируют эти браузеры.

    Например, BrowserStack, Ghostlab и CrossBrowserTesting, но их использование может обойтись в значительную сумму. К счастью, существуют бесплатные инструменты. Каждый из них предоставляет пользователям различные функции тестирования.

    Browsershots

    Browsershots — это простой в использовании онлайн-инструмент для проверки кроссбраузерности сайта. Он позволяет протестировать сайт в основных стационарных браузерах, при этом вы можете указать различные версии программ. После того, как введете URL-адрес тестируемого сайта, всего через несколько минут вы увидите его скриншоты, сделанные в каждом из выбранных браузеров:

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

    Spoon Browser Sandbox

    Spoon предлагает более основательный вариант проверки кроссбраузерности. Для Chrome, Firefox, Internet Explorer, Opera и Safari можно выбрать точную версию, которую нужно протестировать.

    Если вам нужно протестировать новейшие версии этих браузеров, то это бесплатно. Но если вы хотите проверить старые версии, за это взимается плата:

    После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

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

    Проверка кроссбраузерности сайта

    Если Вы занимаетесь созданием сайтов либо шаблонов для популярных движков, то перед Вами всегда встают подобные вопросы: «Как будет выглядеть сайт в другом браузере?», «Как смотрится сайт на широком мониторе», «Не поползет ли структура сайта при другом разрешении экрана» и пр.

    Сверстать структуру сайта – это еще пол дела, необходимо добиться того, чтобы сайт выглядел так как Вы задумывали вне зависимости от операционной системы, вида браузера и его версии, разрешения экрана пользователя.

    Важность кроссбраузерности

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

    1. Никто не останется на сайте, у которого блоки (div-ы) сбиты или наезжают друг на друга. Таким образом Вы теряете посетителей
    2. Раз Вы теряете посетителей, Вы соответственно теряете прибыль с сайта, то особенно актуально для интернет-магазинов.
    3. Правильное отображение сайта («пиксель в пиксель» как говорят веб-мастера) – это имидж Вашего ресурса и Вас лично как его владельца и разработчика.

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

    Для того, чтобы проверить кроссбраузерность верстки многие веб-мастера устанавливают у себя на компьютерах различные виды браузеров самых различных версий (от молодых до недавно вышедших). Одних только версий популярного браузера Firefox с учетом промежуточные более десятка.

    Всё это занимает сотни мегабайт места на жестком диске, а уж на проверку кроссбраузерности таким способом необходимо тратить часы.

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

    Осуществить проверку кроссбраузерности можно:

    • в различных системах (доступно Windows, Linux, Mac);
    • в различных браузерах, начиная от таких экзотичных как SeaMonkey или Flock и заканчивая наиболее популярными (IE, Firefox, Opera);
    • в различных версиях одного и того же браузера (от самых ранних до самых свежих);
    • при различных разрешениях экрана;
    • при различной глубине цвета экрана;
    • и пр.

    Как пользоваться Browsershots?

    Всё что Вам необходимо для проверки кроссбраузерности – это ввести адрес Вашего сайта и отметить необходимые Вам опции для проверки:

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

    Для тех, кто спешит, данный сервис предлагает приоритетное обслуживание за $29.95 USD в месяц. В этом случае от 30 до 50 скриншотов с результатами Вы получите всего за пару минут!

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

    В завершении хочу сказать, что онлайн сервис проверки кроссбраузерности BROWSERSHOTS – один из лучших в своем роде. Единственный минус – время ожидания результата часто оставляет желать большего ��

    Кроссбраузерность сайта

    Меняя новый шаблон (тему) вашему сайту (блогу), часто мы забываем про один очень важный фактор — кроссбраузерность. Чтобы объяснить, о чём же пойдёт речь в этой статье, я приведу цитату из Википедии:

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


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

    А часто ли вы проверяете свой сайт в разных браузерах?

    Скажу по-секрету, что современные браузеры очень часто обновляются и по-разному отображают одни и те же страницы.

    Дело в том, что при создании новых тем, особенно бесплатных, разработчики не всегда обращают внимание на кроссбраузерность, а иногда и совсем не обращают.

    Сейчас в моде мобильные гаджеты — планшетники и смартфоны. Огромная часть пользователей просматривают ваш сайт именно с таких устройств. А что если они увидят размытую вёрстку или разъехавшиеся блоки? Структура сайта также может искажаться при другом разрешении монитора.

    Они наверно покинут ваш сайт и больше никогда не зайдут на него! Отсюда и плохие поведенческие факторы, и много отказов и т.п.

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

    Это можно сделать различными способами. Я расскажу как, а выбирать наиболее удобный только Вам.

    Способ 1.

    Вы можете установить на свой компьютер огромное множество браузеров: Оперу, Хром, Огненного Лиса. IE можно не устанавливать, если у Вас ОС Windows. В ней он установлен по-умолчанию.

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

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

    Способ 2.

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

    Способ 3.

    Для проверки сайта на кроссбраузерность существуют онлайн сервисы. Их достаточно много. Среди них встречаются бесплатные и платные. Я расскажу о том, который я выбрал для себя!

    Итак, нужно зайти на сайт browsershots.org, где Вам будет представлен огромный список браузеров. Не обязательно выбирать все. Достаточно выбрать несколько — самые популярные.

    Сервис browsershots.org предлагает для этого удобное меню в нижней части списка:

    Кроме нужных браузеров вы можете выбрать следущие параметры:

    • разрешение экрана;
    • количество цветов;
    • версия JavaScript;
    • наличие Java;
    • наличие Flash плеера и его версию.

    После того, как выберите необходимые вам параметры, можете смело вводить адрес сайта в поле, находящееся вверху списка браузеров. Теперь жмём зелёную кнопку Submit.

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

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

    Инструменты для проверки кроссбраузерности сайта

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

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

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

    Рассмотрим некоторые из них.

    Browsershots

    Данный сервис поддерживает большое количество браузеров — более 164 комбинации браузеров на четырех операционных системах (Windows, Mac, Linux, BSD). Некоторые из них могут даже не понадобиться. Маловероятно, что найдется пользователь, который работает в браузере Dillo или Kazehakase в операционной системе BSD, хотя все равно можете проверить.

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

    Browsershots предоставляет платные и бесплатные услуги. Однако бесплатный сервис является довольно медленным и есть ограничение на количество скриншотов, которые вы можете запросить в день. Платной версии составляет $ 29,95 или € 23,95 в месяц, и вы сможете получить от 30 до 50 скриншотов в течение двух-пяти минут.

    Adobe BrowserLab

    Adobe BrowserLab — бесплатный инструмент тестирования кроссбраузерности от Adobe.

    Он как через Windows, так и через Mac OS, позволяет протестировать сайт в современных и некоторых устаревших браузерах, включая различные версии Chrome, Safari, IE и Firefox.

    Просмотр возможен в нескольких режимах: полноэкранном, в режиме сравнения, а также в режиме «наложенных слоев». Сервис может получать доступ к страницам, размещенным в интернете, или работать локально как дополнение к Firebug или Adobe Dreamweaver CS5.

    SuperPreview

    SuperPreview является предложением Microsoft в области кроссбраузерной проверки. Он совместен только с Windows. Инструмент позволяет определять набор браузеров для проведения тестов.

    Он работает с любым браузером, установленным на вашей системе. В него встроен механизм вывода IE6.

    Данный факт является причиной его быстрой работы (не нужно ждать загрузки или окончания обработки на удаленном сервисе), но и ограничивает набор доступных браузеров для сравнения.

    SuperPreview является бесплатным инструментом и планируется как часть Expression Web. В онлайн версии имеется поддержка Chrome, Safari (Mac) 4+5, Firefox 3+4.

    Также можно использовать интерактивный режим для веб сайтов, которые требуют регистрации перед выводом страниц, которые надо проверить. Есть инструмент отладки для DOM.

    К сожалению, отсутствует поддержка Opera, даже если она установлена локально.

    Lunascape 6

    Lunascape 6 – это первый и единственный в мире браузер, работающий сразу на трех платформах: Trident, WebKit и Gecko. Первая из них лежит в основе популярного браузера Internet Explorer, вторая – в основе Safari, и, наконец, третья – в основе программы FireFox. Lunascape способен автоматически переключаться между всеми движками при осуществлении интернет-серфинга.

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

    Browsera (бесплатная и коммерческая версии)

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

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

    Что такое кроссбраузерность сайтов и как этого добиться

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

    Откуда возникла такая проблема? Дело в том, что браузеры используют разные движки. Браузерный движок занимается загрузкой, обработкой, отображением и расчетами данных. И хоть сегодня существует большое количество различных браузеров, если мы их разложим по используемым движкам, то увидим, что этих движков не так и много, так как создание своего движка является очень трудоемкой задачей.

    Основные движки:

    • Blink — принадлежит компании Google, имеет открытый исходный код, входит в состав проекта Chromium. Используют браузеры: Chrome, Opera, Яндекс.Браузер, Vivaldi и др. Над развитием этого движка работают многие крупные компании: Opera, Intel, IBM, Yandex, Vivaldi и другие.
    • WebKit — принадлежит компании Apple, имеет открытый исходный код, используется в браузере Safari. Именно этот движок c 2008 г. по 2013 г. использовала компания Google в своем браузере Chrome.
    • Gecko — принадлежит компании Mozilla, имеет открытый исходный код, используется в браузерах Firefox и Tor Browser.
    • EdgeHTML — принадлежит компании Microsoft, имеет закрытый исходный код, используется в браузере Edge. Пришел на смену движку Trident (использовался в Internet Explorer), с запуском Windows 10, и работает только на этой операционной системе.

    И сама проблема различного отображения верстки заключена в том, что разные движки по-разному воспринимают и обрабатывают некоторые html-теги и css-стили, а также содержимое самих тегов. Например, браузер Edge подсвечивает все номера телефонов добавляет свои стили.

    На самом сайте эти номера телефонов прописаны как обычный текст без ссылок, но браузер Edge отображает их в виде ссылок. Исправить это можно, добавив свои стили для номера телефона, либо добавив в тег, содержащий номер телефона, атрибут x-ms-format-detection=»none» .

    В результате получаем номер телефона без добавления стилей:

    Подробнее о html и css расскажем ниже.

    Как добиться одинакового отображения сайта в разных браузерах?

    Разобравшись с понятием кроссбраузерной верстки, возникает вопрос: а как добиться корректного отображения верстки во всех этих браузерах? Откроем несколько секретов html-верстальщиков. =)

    1. Использование префиксов

    Префиксы — приставки к названиям CSS-свойств, используемые для конкретных браузеров.

    Производители браузеров называют несколько причин использования префиксов:

    • свойство написано для конкретного браузера, и оно не содержится в стандартном списке свойств;
    • свойство экспериментальное, еще находится в разработке;
    • свойство реализует частичный функционал.
    • -moz- используется в Firefox;
    • -ms- используется в Edge и Internet Explorer;
    • -webkit- используется в Safari, Chrome и браузерах на основе движков WebKit и Blink;
    • -o- — используется в старых версиях браузера Opera, работающего на движке Presto. С 2013 г. Opera перешла на движок Blink.

    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;

    • -webkit-flex-wrap — свойство для Chrome с 4 по 28 версии, Safari с 3.1 по 8 версии;
    • -ms-flex-wrap — свойство для Internet Explorer 10.

    2. CSS-хаки

    Это использование специальных свойств, понимаемых только определенными браузерами. Разберем пример css-хака, работающего только в Firefox. Создадим квадрат и закрасим его в красный цвет:

    А теперь добавим свойство, которое будет работать только в Firefox:

    3. Разделение стилей для браузеров

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

    Пример для Internet Explorer 9:

    Файл style-for-ie9.css подключится только в браузере Internet Explorer 9.

    • В основном для кроссбраузерной верстки используют префиксы, это увеличивает объем кода, но он остается быть валидным и понятным.
    • CSS-хаки являются нежелательным способом исправления ошибок. Использование их приводит к плохой читабельности кода, невалидности, некачественной поддержке в будущем.
    • Разделение стилей с помощью условных операторов используется для поддержки браузеров Internet Explorer.

    Рассмотрим возникающие проблемы кроссбраузерности на небольшом примере.

    Создадим html-документ и посмотрим отображение элементов и стилей в браузерах: Chrome, Firefox, Edge, Safari, Internet Explorer 9/11. В документе создадим две горизонтальные линии, поле для ввода текста, кнопку и ссылку.

    Посмотрим в браузерах:

    Internet Explorer 9:

    Internet Explorer 11:

    Как видите, есть отличия в отображениях горизонтальных линий ( ), кнопок, и в Internet Explorer 9 нет текста placeholder. Атрибут placeholder у тегов input и textarea появился в стандарте html5, поддержка которого стала доступной в Internet Explorer с 10 версии.

    Чтобы в Internet Explorer 9 появился placeholder, придется использовать JavaScript. Можно написать свое решение, либо воспользоваться готовым плагином Placeholders.js. Для использования данного скрипта нужно подключить к странице jQuery и сам плагин:

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

    Добавим всем элементам отступы, цвет красный (color: red) и посмотрим, что изменилось:

    Internet Explorer 9:

    Internet Explorer 11:

    В Firefox горизонтальные линии окрасились в красный цвет, а в Chrome, Edge и Safari placeholder остался черным. Добавим цвет placeholder в оставшихся браузерах, увеличим высоту горизонтальной линии и зальем ее красным цветом:

    Internet Explorer 9:

    Internet Explorer 11:

    Все горизонтальные линии стали красными, но в Firefox толщина отличается от других. Связано это с тем, что в браузере Firefox стиль color: red окрашивает рамку вокруг элемента, в то время как в остальных браузерах этот стиль не действует на рамку, и она остается прозрачной. Уберем рамку и свойство color: red. Для исправления цвета placeholder’а у текстового поля в Edge необходимо воспользоваться префиксами: -ms-input-placeholder и -ms-input-placeholder:

  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих