Разное

Провайдера проверка кроссбраузерности верстки: Как тестировать верстку на кроссбраузерность? — Хабр Q&A

02.06.2023

Содержание

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

 

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

 

Browserling

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

 

Browsershots

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

Бесплатен.

 

turbo.net Browser Sandbox

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

 

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

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

 

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

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

 

Отладка

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

 

 

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

 

Теги: CSS3, HTML5

  • 5421