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

Содержание

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

Почему сайты могут по-разному отображаться и работать в разных браузерах

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

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

В чем выражается кроссбраузерность сайта и почему она так важна

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

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

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

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

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

Сделать это можно одним из двух способов:

  1. Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, к слову, можно установить только на macOS.
  2. Использование специальных онлайн-сервисов. Этот способ прост и надежен. Таких сервисов достаточно много: есть и бесплатные, но с определенными ограничениями, и платные, но более функциональные и быстрые.

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


Онлайн-сервис Browsershots.org для проверки кроссбраузерности сайтов

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

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

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

Если вы планируете использовать платный сервис, попробуйте BrowserStack. Этот мощный инструмент в режиме реального времени проверяет сайты на кроссбраузерность в более чем 2000 браузеров и устройств. А еще здесь есть бесплатный пробный период.

Кроме онлайн-сервисов, существуют и специальные приложения. К примеру, Multi-Browser Viewer. Этот инструмент позволяет проверить не только корректность отображения данных в разных браузерах, но и то, насколько правильно сайт функционирует.

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

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

1. Вендорные префиксы. Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:

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

Например:

  • -moz- применяется в Firefox;
  • -ms- применяется в IE и Edge;
  • -webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
  • -o- применяется в старых версиях Opera (на платформе Presto).

Код может выглядеть следующим образом:

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

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

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

3. Разделение стилей. Используется для поддержки Internet Explorer. Этот способ предполагает определение браузера и подключение конкретного файла стилей. В IE применяются условные комментарии, которые понимает только Internet Explorer. Другие браузеры воспринимают этот код как простой комментарий.

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

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

Самые популярные браузеры среди пользователей Рунета

По данным Яндекс.Радара за июнь 2020 года, в большей степени пользователи Рунета предпочитают Google Chrome, Яндекс.Браузер и Safari.


Самые популярные браузеры среди пользователей Рунета

Что касается браузеров на мобильных устройствах, то здесь Яндекс.Браузер и Safari меняются местами.


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

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

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

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

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

Особенности

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

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

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


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

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

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

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

  1. Google Chrome.
  2. Mozilla Firefox.
  3. Opera.
  4. Internet Explorer.
  5. Netscape.
  6. Safari.

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

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

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

Применение CSS хаков

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

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

Внедрение универсальных элементов

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

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

Вендорные префиксы

Они являются пережитком браузерных войн, особенно WebKit. Этот метод эффективнее и «чище», чем применение хаков.

Любому браузеру характерны уникальные свойства, имеющие вендорный префикс. Рассматривая случай с Google Chrome, элемент border-radius представлен здесь свойством -webkit-border-radius. А в Mozilla Firefox добавляется префикс -moz-. Подобные свойства изменяют функции элемента только в конкретном браузере, и никак не влияют на другие браузеры.

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

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

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

№1. CrossBrowserTesting


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

Проверить сайт на соответствие различным браузерам можно следующими способами:

  • «Живой» тест. Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
  • Тест Selenium. Подразумевает автоматическую проверку в соответствии со скриптом, сделанным предварительно. Разрешается записывать результаты в формате видеофайла.
  • Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
  • Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.

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

https://crossbrowsertesting.com

№2. Browsershots


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

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

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

http://browsershots.org

№3. IE NetRenderer


Подразумевает бесплатную проверку, доступную в онлайн режиме. Сервис отличается тем, что проверять соответствие сайта можно только для Internet Explorer, начиная от версии 5.5, и заканчивая 11-й. Указать здесь можно только версию браузера и адрес тестируемого ресурса.

https://netrenderer.com

№4. IE Tester

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

https://ietester.ru.softonic.com

№5. Browserling


Посредством данного сервиса вы получаете возможность работать с проверяемым ресурсом не в эмулируемом, а в реальном окне браузера, который установлен в виртуальной машине программы. Проверку возможно осуществлять для 5 популярнейших браузеров (Chrome, Opera, IE, Safari, Firefox), для 5 версий ОС Windows и 4 версий ОС Anrdoid. Можно настраивать разрешение экрана и создавать скриншоты. Все функции сервиса платные, бесплатные только первые 3 минуты тестирования, с разрешением 1024×768 и ОС Windows Vista.

https://www.browserling.com

№6. Spoon Browser Sandbox


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

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

https://turbo.net/browsers

№7. MultiBrowser


Платная программа проверки кроссбраузерности. Она работает со всеми доступными на сегодняшний день версиями Firefox и Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов с самыми разными разрешениями экранов.

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

Благодаря разнообразию режимов, вы сможете:

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

Для начала можно установить демо-версию программы, доступную в течение 2 недель.

https://www.multibrowser.com

№8. Sauce Labs


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

https://saucelabs.com

№9. Browsera


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

http://www.browsera.com

№10. Litmus


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

https://litmus.com

№11. Equafy


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

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

Посмотреть скриншоты можно в списке страниц готового отчета, нажав на стрелку Show в крайней колонке.

https://www.utest.com/tools/equafy

№12. Browserstack


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

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

https://www.browserstack.com

№13. Viewlike.us


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

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

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

https://www.viewlike.us

№14. Ghostlab


Бесплатно-платная многофункциональная программа тестирования. Первые 7 дней доступна триал-версия.

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

https://www.vanamco.com/ghostlab

Заключение

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

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

что это такое, как проверить, как обеспечить

Тематический трафик – альтернативный подход в продвижении бизнеса

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

Подпишись на рассылку и получи книгу в подарок!

Кроссбраузерность — способность веб-ресурса подстраиваться под несколько браузеров и корректно отображаться в них.


Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

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

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

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

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

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

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

Разработать кроссбраузерную верстку — отдельный вопрос при работе над крупным проектом. При выполнении этого условия чаще всего задействуются CSS и HTML правила, иногда дополняемые небольшим JavaScript (jQuery) кодом.

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

На сегодняшний день производители браузеров начали активно заниматься своевременной поддержкой стандартов World Wibe Web, HTML 5 и CSS 3, что несомненно сказалось на качестве отображения страниц. Однако, в некоторых свойствах каскадных таблиц и трактовке кода, даже сейчас на разных движках встречаются существенные расхождения, которые необходимо исправлять вручную.

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

Использование CSS hacks

“CSS хаки” — отрывки кода, понимаемые только одним определенным браузером. Если ваш сайт корректно отображается в двух браузерах, а в трёх других что-то идёт не так, чаще всего вопрос решается дописыванием хаков для каждого из трех неверно-интерпретирующих движков. Хаки — самый “грязный” способ исправления ошибок, делает код не эстетичным и не валидным, но рабочим.

Вендорные префиксы

Остались, как ещё один рудимент браузерных войн, в особенности браузеров WebKit. Более “чистый” и честный способ, чем использования хаков.

Каждый браузер имеет собственные свойства с вендорным префиксом, так, например элемент border-radius в Mozilla Firefox представлен свойством -moz-border-radius, а в Chrome и Safari -webkit-border-radius. Такие свойства меняют поведение элемента только в определенном браузере, и игнорируются другими платформами.

Универсальность элементов

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

Проверить поддержку правил можно на бесплатном сервисе caniuse.com. В наглядном представлении в виде таблиц можно уточнить, начиная с какой версии тот или иной тег введён в поддержку каждым движком, и можно ли его применять

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

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

Так же есть специальные сервисы проверки сайта на кроссбраузерность.

  • browsershots.org
    Преимущество:Позволяет получать скриншоты из большого количества разных версий движков.
    Недостаток: Долгое ожидание.

  • crossbrowsertesting.com
  • browserstack.com
    Преимущество: Мощные средства для глубокого анализа веб-ресурса в режиме онлайн.
    Недостаток: Платное использования большинства функций.

Как влияет на посещаемость сайта

Существует негласная статистика, говорящая о том, что Яндекс Браузер и Chrome пользуются популярностью молодёжи, а Opera и Mozilla отдают предпочтения уже работающие люди. Представьте, что вы создали сайт по скейтбордингу для молодежи, а его оформление с треском проваливается в Chrome. Шрифты не загружаются, отступы появляются совсем не там, где они должны быть — настоящая катастрофа маркетинга, потеря целевой аудитории.

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

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

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

Так же в блоге у нас есть статья про адаптивную верстку. 

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

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

Нам известно, что браузеры интерпретируют HTML/CSS/JS код и показывают его пользователю в виде красивого веб-сайта. Некие посредники между машиной и человеком. Однако, есть одна проблема, которая осложняет жизнь верстальщика – это то, что этих браузеров много и разработаны они на разных движках, в разных компаниях. Следовательно, не могут отображать сайты одинаково.

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

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

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

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

Этапы проверки кроссбраузерности

1) Проверка на валидность HTML кода

Валидная верстка должна соответствовать стандартам W3C. Копируете HTML код страницы и вставляете в поле формы на сайте https://validator.w3.org. Для проверки всего сайта, который уже размещен в интернете, вставляете URL сайта в адресную строку и нажимаете кнопку Check. Надпись на зеленом фоне: Document checking completed. No errors or warnings to show. – говорит о том, что код валиден.

Если код содержит ошибки, то сервис покажет, какие строки кода надо исправить.

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

2) Расставляем вендорные префиксы

Приведу список некоторых префиксов для наиболее распространенных браузеров.

  • -o- — префикс для браузера Opera
  • -moz- — префикс для браузеров из семейства Mozilla
  • -ms — префикс для Internet Explorer
  • -webkit- — префикс для браузеров Safari и Chrome

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

display: -webkit-box;
display: -ms-flexbox;
display: flex;

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

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

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

https://caniuse.com/usage-table

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer 11
  • Microsoft Edge
  • Safari
  • Opera

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

  • http://browsershots.org
  • http://netrenderer.com

4) Как исправить проблемы с отображением сайта?

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

Заключение

Никогда не будет лишним, проверить сайт на кроссбраузерность как вручную, так и через специальные сервисы. Если сайт где-то неправильно отображается, то проверьте на Can I use подозрительное CSS свойство и посмотрите, все известные баги (Known issues), связанные с ним, ещё очень много полезного можете подчерпнуть из моего видео-курса «Вёрстка сайта с нуля 2.0».

  • Создано 21.06.2019 10:07:11
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кроссбраузерная адаптивная верстка html css

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

Основные браузеры

Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.

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

Вендорные префиксы

Часто разработчики топовых браузеров внедряют новые свойства css, которые еще не стандартизированы. Эти свойства предваряются специальными приставками, которые называются «вендорные префиксы». Каждый браузер имеет свой префикс:

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузера Mozilla
  • -ms — префикс для Internet Explorer
  • -webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome

Пример с вендорными префиксами:

         -webkit-transition-duration:0.6s;              
         -moz-transition-duration:0.6s;  
         -o-transition-duration:0.6s;
         -ms-transition-duration:0.6s;
         transition-duration:0.6s;

Вначале пишутся экспериментальные свойства, а затем – свойство без префикса.

Стандартные стили браузера

Разные браузеры имеют разные настройки стилей по умолчанию для каждого элемента HTML. То есть, размеры шрифтов и отступы между элементами могут варьироваться в зависимости от браузера.  Если верстальщик не переопределит такое свойство в своем файле стилей, браузер применит свои настройки. И тогда верстка вполне может «поплыть».

Чтобы это не произошло и код Вашего сайта был максимально кроссбраузерным, можно использовать специальные технологии по обнулению тех стилей, которые содержатся в браузере по умолчанию.  Для этого разработаны технологии reset.css и normalize.css. Рассмотрим их подробно.

reset.css

Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.

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

normalize.css

Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация. То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.

Этот css-документ использует популярный фреймворк Bootstrap.

Оба файла – reset.css и normalize.css распространяются бесплатно.

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


Назад

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

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

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

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

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


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

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

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

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

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

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

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

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

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

Viewlike.us позволяет просмотреть сайт при разных разрешениях. Это пригодится для тестирования внешнего вида сайта, а также даст ценную информацию, касающуюся адаптивности ресурса:

С помощью этого инструмента проверки кроссбраузерности сайта также можно оценить скорость и юзабилити тестируемого сайта. Если такие показатели, как размер изображений, размер элементов HTML и количество статических ресурсов нужны вам, значит и Viewlike.us будет полезен.

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

IE NetRenderer показывает тестируемый сайт только в Internet Explorer, но зато позволяет выбрать версию от IE 5.5 до IE 11. Это еще один простой инструмент, который подходит только для тестирования внешнего вида сайта:

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

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

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

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

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

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

Spoon Browser Sandbox — единственный бесплатный инструмент из рассмотренных в этой статье, позволяющий провести полную проверку ресурса. Так что, если вы не хотите устанавливать все браузеры или платить за услугу, это лучший вариант для тестирования интерактивных элементов сайта.

Для тестирования внешнего вида сайта подойдет Browsershots. Он предлагает на бесплатной основе возможность проверить отображение ресурса в большинстве стационарных браузеров:

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

Поделитесь своими мыслями в комментариях!

Вадим Дворниковавтор-переводчик статьи «Ultimate Free Tools for Cross-Browser Testing»

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

20 мая 2016

Facebook

Twitter

Вконтакте

Google+

Pinterest

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

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

Facebook

Twitter

Вконтакте

Google+

Pinterest

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

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

Зачем нужен кроссбраузерный веб-сайт?

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

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

Вот где основная проблема возникает с точки зрения владельца бизнеса —

Могут ли пользователи (посещающие веб-сайт с помощью тысяч комбинаций браузеров устройств) получить доступ к веб-сайту наилучшим образом? Все ли функции веб-сайта доступны в популярных браузерах, таких как Chrome, Firefox, Safari, Edge и т. Д.?

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

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

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

  • Кто является целевой аудиторией?
  • Какова в настоящее время доля рынка браузеров среди целевой аудитории?

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

Это связано с тем, что рыночная доля этих трех браузеров составляет 86% от общей рыночной доли браузеров. Это не означает, что следует полностью избегать тестирования оставшихся браузеров, таких как Edge, UC browser и т. Д. Для действительно всеобъемлющего взаимодействия лучше всего оптимизировать веб-сайт для всех браузеров. Команды просто должны расставить приоритеты, какие из них тестировать в первую очередь и наиболее тщательно.

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

  1. Использование эмуляторов браузера для мобильных / настольных компьютеров для каждого браузера
  2. Настройка локальных лабораторий устройств
  3. Использование облачной платформы, которая позволяет вам для выполнения кроссбраузерного тестирования браузеров, установленных на реальных устройствах

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

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

Лучшая альтернатива — выбрать облачные платформы, такие как BrowserStack, которые предоставляют командам реальное облако устройств для кроссбраузерного тестирования. BrowserStack предоставляет более 2000 реальных устройств и браузеров (Chrome, Firefox, Safari, Edge и т. Д.).) для тестирования.

QA получают мгновенный доступ к браузерам, установленным на реальных мобильных устройствах Android и iOS, а также на настольных устройствах. Они могут выполнять ручное тестирование своих веб-сайтов в реальном времени в браузерах, работающих на реальных мобильных и настольных устройствах. Это позволяет командам тестировать веб-сайты в реальных пользовательских условиях. Кроме того, команды могут также использовать Cloud Selenium Grid для выполнения автоматизированных кросс-браузерных тестов на желаемых комбинациях браузер-устройство.

Проверить веб-сайт на совместимость с браузером бесплатно

Просто нужно выбрать желаемую платформу (iOS, Android, Windows, Mac) и версию браузера для тестирования.См. Изображение ниже, чтобы лучше понять панель управления BrowserStack Live.

Также давайте посмотрим на пример сеанса Firefox, запущенного на реальном Samsung S10.

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

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

Введение в кроссбраузерное тестирование — изучение веб-разработки

В этой статье модуль начинается с обзора темы кроссбраузерного тестирования и ответов на такие вопросы, как «что такое кроссбраузерное тестирование?», «Что такое кроссбраузерное тестирование?» наиболее распространенные типы проблем, с которыми вы столкнетесь? »и« Каковы основные подходы к тестированию, выявлению и устранению проблем? »

Предварительные требования: Знакомство с основным HTML, CSS и Языки JavaScript.
Цель: Чтобы получить представление о концепциях высокого уровня, задействованных в кросс- тестирование браузера.

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

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

Помните, что вы не являетесь вашими пользователями — просто потому, что ваш сайт работает на MacBook Pro или Galaxy Nexus высокого класса, это не значит, что он будет работать для всех ваших пользователей — предстоит еще много тестирования!

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

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

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

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

Примечание: Мы также рассмотрим защитное кодирование позже в этом модуле.

Существует много разных причин, по которым возникают проблемы с кроссбраузерностью, и обратите внимание, что здесь мы говорим о проблемах, когда вещи ведут себя по-разному в разных браузерах / устройствах / предпочтениях просмотра.Прежде чем вы даже перейдете к кроссбраузерным проблемам, вы должны уже исправить ошибки в своем коде (см. Разделы «Отладка HTML», «Отладка CSS» и «Что пошло не так?» Устранение неполадок JavaScript из предыдущих разделов, чтобы при необходимости освежить память).

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

  • Иногда в браузерах есть ошибки или функции по-разному реализуются. Эта ситуация намного менее плохая, чем была раньше; назад, когда IE4 и Netscape 4 конкурировали за доминирующий браузер в 1990-х годах, компании-разработчики браузеров намеренно реализовывали разные вещи по-разному, чтобы получить конкурентное преимущество, что сделало жизнь разработчиков адом.В наши дни браузеры намного лучше следуют стандартам, но иногда все же появляются различия и ошибки.
  • некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только реализуют, или если вам нужно поддерживать действительно старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т.е. над ними больше не выполняется новая работа. ) задолго до того, как была изобретена новая функция.Например, если вы хотите использовать на своем сайте передовые функции JavaScript, они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, возможно, вам придется не использовать их или преобразовать код в старомодный синтаксис, используя при необходимости какой-то кросс-компилятор.
  • Некоторые устройства могут иметь ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был разработан так, чтобы хорошо смотреться на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве.Если ваш сайт содержит множество больших анимаций, это может быть нормально для планшета с высокими характеристиками, но может быть вялым или прерывистым на устройстве низкого уровня.

и еще несколько причин.

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

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

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

Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа (это очень грубо — разные люди могут действовать по-разному):

Начальное планирование> Разработка> Тестирование / обнаружение> Исправления / итерация

Шаги 2–4 будут повторяться столько раз, сколько необходимо для выполнения всей реализации.Мы рассмотрим различные части процесса тестирования более подробно в следующих статьях, а пока давайте просто резюмируем, что может происходить на каждом этапе.

Первоначальное планирование

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

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

Так, например, вы можете создать сайт электронной коммерции, который обслуживает клиентов в Северной Америке. Сайт должен полностью работать в последних нескольких версиях наиболее популярных браузеров для настольных и мобильных устройств (iOS, Android, Windows phone) — в их число должны входить Chrome (и Opera, поскольку он основан на том же механизме рендеринга, что и Chrome), Firefox, IE. / Edge и Safari.Он также должен обеспечивать приемлемый опыт работы с IE 8 и 9 и быть доступным с соблюдением требований WCAG AA.

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

Вам следует составить список потенциальных проблемных областей.

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

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

Разработка

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

Существует несколько общих стратегий кроссбраузерной разработки, например:

  • Сделайте так, чтобы вся функциональность работала как можно точнее во всех целевых браузерах. Это может включать в себя написание разных путей кода, которые воспроизводят функциональность по-разному, нацеленные на разные браузеры, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем выполняет разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
  • Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предоставьте разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства — широкоформатный кинотеатр не даст такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
  • Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент / пользовательская база согласны с этим.

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

Тестирование / обнаружение

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

  1. Протестируйте его в паре стабильных браузеров в вашей системе, таких как Firefox, Safari, Chrome или IE / Edge.
  2. Проведите небольшое тестирование доступности, например, попробуйте использовать свой сайт только с клавиатурой или используйте свой сайт через программу чтения с экрана, чтобы проверить, доступен ли он для навигации.
  3. Протестируйте на мобильной платформе, например Android или iOS.

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

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

  • Попробуйте протестировать последнее изменение во всех современных браузерах для настольных ПК, в том числе в Firefox, Chrome, Opera, IE, Edge и Safari для ПК (в идеале — Mac, Windows и Linux).
  • Протестируйте его в обычных браузерах телефонов и планшетов (например, iOS Safari на iPhone / iPad, Chrome и Firefox на iPhone / iPad / Android),
  • Также проведите тесты в любых других браузерах, которые вы включили в свой целевой список.

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

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

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

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

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

Если хотите, можете пойти и дальше.Доступны коммерческие инструменты, такие как Browserling, Sauce Labs, Browser Stack, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свою тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать свои изменения в центральном репозитории кода только в том случае, если тесты все еще проходят.

Тестирование предварительных версий браузеров

Часто бывает полезно протестировать предварительные версии браузеров; см. следующие ссылки:

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

Исправления / итерация

Как только вы обнаружили ошибку, вам нужно попытаться исправить ее.

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

Возможно, это не ваша вина — если в браузере есть ошибка, мы надеемся, что поставщик быстро ее исправит. Возможно, это уже было исправлено — например, если ошибка присутствует в Firefox версии 49, но ее больше нет в Firefox Nightly (версия 52), то они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщение об ошибках ниже).

Если это ваша вина, то нужно это исправить! Выявление причины ошибки включает ту же стратегию, что и любая ошибка веб-разработки (опять же, см. Разделы «Отладка HTML», «Отладка CSS» и «Что пошло не так? Устранение неполадок JavaScript»).Как только вы обнаружили причину вашей ошибки, вам нужно решить, как ее обойти в конкретном браузере, в котором она вызывает проблемы — вы не можете просто сразу изменить код проблемы, так как это может нарушить код в других браузерах. . Общий подход обычно состоит в том, чтобы каким-то образом разветвлять код, например, использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать другой код в тех случаях, которые действительно работают.

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

Чтобы повторить то, что было сказано выше, если вы обнаружите ошибки в браузерах, вы должны сообщить о них:

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

10 лучших инструментов для кроссбраузерного тестирования в 2021 году (последний рейтинг)

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

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

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

Этот пост в основном посвящен тестировщикам и разработчикам программного обеспечения, которые знакомы с различными методами тестирования браузеров.

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

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

.

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

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

# 1) Проверка CSS
# 2) Проверка HTML или XHTML
# 3) Проверка страниц с включенным JavaScript и без него.
# 4) Функциональность Ajax и JQeury
# 5) Проверка размера шрифта
# 6) Макет страницы в разных разрешениях
# 7) Все изображения и выравнивание
# 8) Разделы верхнего и нижнего колонтитула
# 9) Выравнивание содержимого страницы по центру, LHS или RHS.
# 10) Стили страниц
# 11) Форматы даты
# 12) Специальные символы с кодировкой символов HTML.
# 13) Функция увеличения и уменьшения масштаба страницы.

Очевидно, вам придется повторить эти тесты на:

# 14) Различные операционные системы, такие как Windows, Linux и Mac.
# 15) Различные браузеры (с разными версиями), такие как Internet Explorer, Firefox, Google Chrome, Safari и Opera.

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

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

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

# 1) TestComplete

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

Характеристики:

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

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

# 2) Лямбда-тест

Протестируйте свой сайт в более чем 2000 браузерах и ОС.

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

Рекомендуемая литература = >> Руководство по тестированию браузера с помощью LambdaTest

Основные характеристики:

  • Запустить тесты автоматизации Selenium на масштабируемой сетке Selenium, имеющей более 2000 браузерных сред.
  • Выполняйте автоматические снимки экрана и адаптивное тестирование вашего веб-сайта.
  • Протестируйте свой локальный или частный веб-сайт с помощью туннеля SSH.
  • Регистрация ошибок в один клик в ваших любимых инструментах отслеживания ошибок, таких как Asana, BitBucket, GitHub, JIRA, Microsoft VSTS, Slack, Trello и т. Д.
  • 24 * 7 Поддержка чата

# 3) CrossBrowserTesting.com

Протестируйте свой сайт в более чем 2050 реальных настольных и мобильных браузерах.

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

Основные характеристики:

  • CrossBrowserTesting позволит вам запускать одиночные или параллельные снимки экрана и регрессионные тесты.
  • Благодаря интуитивно понятному REST API вы получите доступ почти ко всему приложению.
  • Он предоставляет вам полный доступ к инструментам разработчика и расширениям, таким как FireBug и Chrome Dev Tools.
  • Ваша команда сможет масштабировать скорость автоматизации с помощью облачного тестирования Selenium и Appium.

# 4) Контроль качества Wolf

QA Wolf — новичок в блоке и настоящий современный инструмент тестирования для всей команды.

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

В частности, механизм генерации кода QA Wolf — это то, что выделяет этот инструмент и занимает место в нашем списке.Когда вы просматриваете веб-сайт, QA Wolf генерирует чистый тестовый код Javascript, что упрощает создание и поддержку точных тестов для всех. Для более сложных рабочих процессов разработчики могут быстро настроить тестовый код.

Основные характеристики:

  • Создавайте тесты прямо из браузера — установка или настройка не требуется. Начало работы очень быстрое и безболезненное. Просто зарегистрируйтесь для получения бесплатной учетной записи, введите URL-адрес, который вы хотите протестировать, и начните просматривать свои тестовые пути.
  • Преобразуйте свои действия в код. Не писать шаблонный код или изучать языки программирования. QA Wolf генерирует чистый код Javascript, когда вы просматриваете веб-сайт, тем самым позволяя любому члену вашей команды создавать тесты.
  • Повторно запустить выбранный код. Не беспокойтесь о повторном запуске всего теста, если вам нужно исправить только одну или две строки кода. QA Wolf позволяет повторно запускать только выбранный вами код для быстрого устранения неполадок.
  • Запускайте тесты в развертываниях Vercel / Netlify или по расписанию одним щелчком мыши. Создавайте тесты и запускайте их автоматически, когда захотите.
  • Выполнить 100% тестов параллельно. Получите результаты за считанные минуты независимо от количества выполняемых тестов.
  • Получайте оповещения в Slack и по электронной почте. Держите всю команду в курсе результатов тестирования, отправляя их прямо на ваш почтовый ящик или в корпоративный канал Slack.
  • Анализируйте отказы с помощью видео и журналов. Анализируйте и быстро воспроизводите сбои с помощью видео, журналов и точной строки кода, на которой произошел сбой теста.
  • Повторно запустить и исправить тесты прямо из браузера. Не запускайте код локально и не ждите следующей сборки CI. QA Wolf позволяет вам исправлять и поддерживать тесты прямо в браузере.
  • Сотрудничайте со своей командой в режиме реального времени, поделившись ссылкой. Работать с членами команды быстро и легко. Просто пригласите их на свою панель инструментов и начните сотрудничать.

# 5) Katalon Studio

Katalon Studio — самая популярная альтернатива Selenium и Appium для кросс-браузерного тестирования, которую доверяют 850 000 тестировщиков и разработчиков.

Также предлагает масштабируемое веб-тестирование, тестирование API, мобильных и настольных компьютеров, некоторые из ключевых функций Katalon Studio:

  • Совместим с последними версиями Chrome, Firefox и Edge.
  • Поддержка автономного выполнения браузера в Chrome и Firefox для более быстрой обратной связи при выполнении критически важных для производительности приложений.
  • Гибкая миграция тестов с Selenium (Grid, Webdriver & IDE), Postman и SoapUI.
  • Минимальное обслуживание теста с шаблоном модели страница-объект.
  • Механизм самовосстановления для обработки изменений пользовательского интерфейса и кода.
  • Встроенная интеграция с CI / CD (Jenkins, Azure Devops, CircleCI, Bamboo, TeamCity и Travis CI).
  • Масштабируйте выполнение с помощью облачных устройств из интеграций Kobiton, Perfecto, SauceLabs, LambdaTest и BrowserStack.
  • Расширенные графики для визуализации основных показателей и уведомлений в реальном времени после каждого выполнения (Slack, Git и Microsoft Teams).

# 6) Browsershots

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

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

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

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

Поддерживаемые браузеры: Firefox, Google Chrome, Opera, Safari, SeaMonkey, Arora, Dillo, Epiphany, Konqueror, Lynx, Luakit, Rekonq и Midori имеют намного больше браузеров всех версий.

=> Посетить веб-сайт Browsershots


# 7) Песочница Turbo Browser

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

Вы можете запускать все популярные браузеры, включая Internet Explorer, Firefox, Chrome и Opera, на своем компьютере прямо из Интернета.

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

=> Посетить тестовую среду Turbo Browser


# 8) IE NetRenderer

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

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

=> Посетите веб-сайт IE NetRenderer


# 9) Browsera

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

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

Характеристики:

  • Найдите проблемы с компоновкой
  • Найдите ошибки JS
  • Можно протестировать весь сайт
  • Динамическое тестирование страницы
  • Может тестировать страницы за паролем для входа
  • Самое приятное — установка не требуется

=> Посетить веб-сайт Browsera


# 10) IETester



В Интернете доступно множество опций, если вы хотите проверить совместимость браузера с версиями Internet Explorer.IETester — один из тех вариантов, который позволяет вам тестировать свой веб-сайт на последних версиях IE одновременно с помощью одного приложения.

IETester, бесплатный инструмент для тестирования браузеров, можно использовать для тестирования веб-сайтов в IE11, IE10, IE9, IE8, IE7, IE6 и IE5.5 на рабочем столе Microsoft Windows 8, Windows 7, Vista и XP.

=> Посетите веб-сайт IETester


# 11) BrowserStack Live

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

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

Характеристики

  • Настройка не требуется. Он может запускать мгновенное тестирование в реальном облаке устройства.
  • Охватывает 2000+ настольных браузеров и почти все браузеры реальных мобильных устройств.
  • Безопасная и частная сеть.
  • Интерактивные устройства (без лаборатории устройств или виртуальных машин).

=> Посетить веб-сайт BrowserStack


# 12) Ranorex Studio

Ranorex Studio — это комплексное решение для веб-приложений и кросс-браузерного тестирования. Автоматизируйте тесты для широкого спектра веб-технологий и сред, включая веб-сайты HTML5, Java и JavaScript, приложения Salesforce, Flash и Flex и многие другие.

Ranorex даже поддерживает междоменные фреймы iframe, элементы в теневой DOM, гибридные настольные приложения на основе Chromium Embedded Framework (CEF) с открытым исходным кодом и JxBrowser.

Характеристики включают:

  • Надежная идентификация объекта, даже для веб-элементов с динамическими идентификаторами.
  • Общий репозиторий объектов и повторно используемые модули кода для эффективного создания тестов и сокращения затрат на обслуживание.
  • Тестирование на основе данных и ключевых слов.
  • Настраиваемый отчет о тестировании с видеоотчетом о выполнении теста — посмотрите, что произошло во время тестового запуска, без необходимости повторного запуска теста!
  • Выполнять кросс-браузерные тесты параллельно или распространять их в Selenium Grid со встроенной поддержкой Selenium Webdriver.
  • Интегрируется с такими инструментами, как Jira, Jenkins, TestRail, Git, Travis CI и другими.

# 13) Просмотр

Существуют определенные инструменты, например Browserling, для интерактивного тестирования браузера.

Основные характеристики:

  • Это живой инструмент для тестирования вашего сайта в различных реальных браузерах на реальных системах.
  • Интерактивное тестирование, как если бы вы тестировали в браузере своего компьютера.
  • Доступ ко всем последним браузерам
  • Делайте снимки экрана и делитесь ими с командой.
  • Безопасный просмотр
  • Может легко тестировать адаптивные веб-сайты.
  • Расширения браузера доступны для Chrome и Firefox.
  • API доступны

=> Посетить веб-сайт браузера


# 14) Experitest

Автоматизируйте кроссбраузерное тестирование, запустив тесты Selenium и Appium в более чем 1000 браузерах типов, версий и операционных систем.

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

# 15) Сравнение

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

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

Основные характеристики:

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

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

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

Заключение

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

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

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

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

Опубликовано в Производительность , автор: WP Engine

Последнее обновление 30 мая 2019 г.

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

С помощью тщательного кроссбраузерного тестирования вы можете убедиться, что ваш веб-сайт выглядит и ведет себя безупречно во всех популярных вариантах. Таким образом, ваши посетители получат одинаково хорошие впечатления, независимо от того, используют ли они Chrome, Firefox, Opera или менее известные варианты, такие как SeaMonkey.

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

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

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

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

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

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

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

Шаг 1. Установите Doctype для ваших файлов HTML

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

«doctype» — это утверждение, которое сообщает браузерам: «Эй, это версия HTML, которую мы собираемся использовать!» Таким образом, браузерам не придется делать никаких предположений, что может уменьшить количество ошибок, с которыми столкнутся ваши пользователи.

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

 « http://www.w3.org/TR/html4/strict.dtd »> 

Как вы заметите, этот фрагмент кода предназначен для HTML версии 4.01. Если вместо этого вы хотите использовать HTML5, вы можете использовать этот код:

  

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

Шаг 2. Используйте правила сброса CSS

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

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

Есть несколько вариантов сброса CSS, но один из наших любимых — Normalize.css, из-за того, насколько он всеобъемлющий:

Вы можете скачать normalize.css из библиотеки GitHub и используйте его в качестве отправной точки для CSS вашего сайта. Это поможет вам максимизировать кроссбраузерность на вашем сайте.

Шаг 3. Используйте кроссбраузерные библиотеки и платформы

Библиотеки JavaScript

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

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

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

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

Кросс-браузерное тестирование

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

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

  1. Google Chrome
  2. Safari
  3. Firefox
  4. Браузер UC
  5. Opera

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

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

Не жертвуйте своим цифровым опытом

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

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

Что такое кроссбраузерность и почему это важно?

Кроссбраузерность !!! А…

Что это?

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

Итак, что такое кроссбраузерная совместимость?

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

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

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

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

Сохранение простоты веб-сайта

Можно избежать чрезмерного использования элементов в кодировании разметки, например, использования элементов списка (ul, ol) для создания меню вместо элементов p.

Проверка кода веб-сайта

Можно использовать Validator для проверки кодировки HTML и CSS перед загрузкой сайта, так как это будет очень негибким для сортировки в случае любого недопустимого кода.

Использование правил CSS

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

Разработка в одном браузере

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

Причуды разных браузеров

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

Устранение проблем с Internet Explorer

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

Обеспечение запасных вариантов

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

Выполнение ручного кодирования

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

Тестирование совместимости браузера с помощью инструментов


На рынке есть различные бесплатные и платные инструменты для тестирования совместимости браузеров. Вот некоторые из известных инструментов:

  • BrowserShots
  • IE Tester
  • Adobe Browser Lab
  • CrossBrowserTesting
  • Microsoft Expression Web SuperView

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

10 советов по созданию кроссбраузерных веб-сайтов

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

На практике, конечно, все не так просто. Разные браузеры отображают HTML и CSS немного по-разному, в то время как некоторые браузеры (мы не будем называть имена) сильно отклоняются от стандартов.

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

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

1. Будьте проще

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

Не используйте слишком много вложенных элементов в разметке и используйте правильный элемент для работы. Используйте элементы ul и li для создания меню; не используйте таблицу или серию из p элементов.

Поместите все визуальное форматирование в свой CSS. Ваш HTML должен быть для содержания, а не для стиля.

2. Подтвердите свой код

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

W3C HTML Validator и CSS Validator — хорошие места для начала. Вы также можете использовать плагины браузера, такие как надстройка Html Validator Firefox, для автоматической проверки страниц во время их просмотра в браузере.

3. Избегайте необычных режимов браузера

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

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

4. Используйте правила сброса CSS

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

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

5. Разработка в Firefox

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

Лично я бы рекомендовал тестировать в Firefox при создании своего сайта, а затем, когда вы будете довольны этим, протестировать сайт в других браузерах, особенно в Internet Explorer, чтобы исправить любые проблемы совместимости. Firefox очень удобен для разработчиков (благодаря большому количеству надстроек) и в значительной степени соответствует стандартам. Если ваш сайт хорошо выглядит в Firefox, он, вероятно, будет выглядеть примерно так же в Opera и Safari.

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

6. Протестируйте в максимально возможном количестве браузеров

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

  • Internet Explorer 6, 7 и 8
  • Firefox 3
  • Safari 3
  • Опера 9

Тестирование всех трех версий Internet Explorer может быть сложной задачей, поскольку теоретически только одна версия IE может быть установлена ​​на одной копии Windows.Есть несколько способов решить эту проблему:

  • Приобрести 3 ПК для тестирования. Затем вы можете установить IE6 на одном ПК, IE7 на другом и IE8 на третьем. Очевидно, что пространство или деньги могут сделать это непрактичным.
  • Взломайте IE6, 7 и 8 для работы на одной копии Windows. Существуют различные программы, которые могут помочь вам установить несколько версий IE на одну копию Windows. Например, обратите внимание на Multiple IE от TredoSoft и IE Collection от Utilu. Однако это может сделать вашу установку Windows нестабильной, а различные версии IE могут вести себя странным образом, поэтому этот подход не для слабонервных.
  • Воспользуйтесь виртуализацией. Хороший подход — использовать программное обеспечение виртуализации, такое как VMware или VirtualBox, для запуска трех отдельных копий Windows на одном ПК или Mac. Затем вы можете установить разные версии IE на каждую копию Windows. Это приводит к стабильным, независимым версиям IE. К недостаткам можно отнести стоимость (требуется 3 лицензии Windows) и производительность (вам понадобится мощный компьютер для работы с тремя версиями Windows плюс ваша операционная система).
    Один из способов обойти эти недостатки — использовать функцию моментальных снимков программного обеспечения, такого как VMware.Установите XP с IE6 и сделайте снимок; обновитесь до IE7, сделайте снимок; обновитесь до IE8, сделайте снимок. Теперь вы можете переключаться между IE, возвращаясь к своим 3 снимкам, и все это при использовании одной лицензии Windows.
  • Воспользуйтесь услугой онлайн-тестирования. Сайты , такие как Browsershots и Browsercam, позволяют делать снимки экрана вашего сайта в самых разных браузерах и операционных системах. Затем снимки экрана отображаются на веб-странице для загрузки или могут быть отправлены вам по электронной почте. Иногда вам нужно платить за использование этих сервисов, и для создания снимков экрана может потребоваться некоторое время, но это позволяет вам тестировать практически в любом браузере под солнцем, не имея необходимости запускать его локально.

7. Устранение проблем IE с помощью условных комментариев

Иногда, как бы вы ни старались, невозможно заставить ваш красивый сайт работать в Internet Explorer, не прибегая к серьезным хитростям CSS и / или JavaScript. Однако есть альтернатива. Включая разметку только для IE с условными комментариями, вы можете обслуживать дополнительный HTML, CSS или JavaScript только для IE, позволяя обойти любые проблемы. Намного чище, чем использование хаков.

8.Заставить IE6 работать с прозрачными PNG

Прозрачные изображения PNG — замечательная вещь — они позволяют иметь до 256 уровней прозрачности в изображении, а это значит, что вы можете делать изящные трюки, такие как полупрозрачность и сглаживание границ на любом типе фона. Однако Internet Explorer 6 по умолчанию неправильно отображает прозрачные PNG, а вместо этого отображает уродливые прямоугольники там, где должна быть прозрачность.

Хорошая новость заключается в том, что после небольшой настройки вы можете добиться, чтобы прозрачные PNG-файлы отлично работали в IE6, без необходимости вносить серьезные изменения в разметку или CSS.Хорошее решение — IE PNG Fix от Ангуса Тернбулла.

9. Обеспечьте резервные копии

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

  • Изображений: Убедитесь, что каждый тег img содержит атрибут alt , описывающий изображение.
  • Flash-ролики: Не используйте Flash для важных вещей, таких как навигация по сайту, или, если вы используете, предоставьте альтернативу, отличную от Flash.
  • JavaScript: Опять же, старайтесь избегать использования JavaScript для основных функций. Можно использовать его, чтобы упростить или ускорить работу. Используйте элемент noscript , чтобы предоставить альтернативу без JS (или, по крайней мере, для отображения сообщения с просьбой включить JavaScript).

10. Код вручную

Последнее немного спорно.Многие в наши дни используют редакторы WYSIWYG, такие как Dreamweaver и KompoZer. Такие редакторы могут сэкономить много времени и хороши, если вы не знаете HTML. Однако создание гибкого, элегантного, кроссбраузерного HTML — своего рода искусство, и редакторы страниц не всегда хорошо с этим справляются.

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

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

(Windows) или Coda (Mac).

Завершение

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

8 основных советов по созданию кросс-браузерного веб-сайта

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

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

  • Сохраняйте простой код — Когда дело доходит до кодирования, думайте о качестве, а не о количестве. Не выделяйте десять строк кода для функции, которой нужны только три. Простой код не только будет более удобен для разных браузеров, но и станет более удобным в обслуживании, когда придет время, когда вам придется его отлаживать или настраивать для совместимости.
  • Use Frameworks — CSS-фреймворки, такие как Foundation и Bootstrap, предоставят вам код стиля, который упростит для вас кросс-совместимость.Если вы потратите время на ознакомление с некоторыми функциями, создание адаптивного веб-приложения станет намного быстрее и проще. Это также поможет вам сделать так, чтобы приложение выглядело и правильно работало в мобильных браузерах.
  • Define Valid Doctype — Doctype — это первая строка в вашем коде, которая описывает HTML, который будет использоваться в вашем приложении. Поскольку разные браузеры имеют разные стандарты и правила, вам нужно определить Doctype, иначе механизм рендеринга в основном угадывает его за вас.Конечно, это может привести к ошибкам и несоответствиям, которых вы хотите избежать.
  • Сброс CSS — Каждый браузер имеет разные правила CSS по умолчанию, которым они следуют. Вот почему вы используете таблицу стилей сброса CSS, чтобы убедиться, что ваши браузеры следуют одним и тем же основным правилам и ведут себя согласованно. Вы хотите добавить один из них в качестве первой таблицы стилей для сброса, если только вы не используете фреймворк, в котором он уже есть.
  • Проверить — Хорошая идея — проверить свой HTML и CSS, чтобы предотвратить проблемы.Используйте W3C HTML Validator и CSS Validator, чтобы убедиться, что ваш код не содержит ошибок, и исправьте их, если это не так.
  • Условные комментарии — Условные комментарии позволяют связывать таблицы стилей для различных браузеров, что особенно полезно, когда речь идет о проблемах проектирования, которые являются общими для Internet Explorer.
  • Приготовьтесь к различиям — Опять же, практически невозможно иметь дизайн, который выглядел бы одинаково в каждом браузере, если только он не является чрезвычайно простым.Такие детали, как формы и типографика, вероятно, будут различаться независимо от того, каким правилам вы следуете. Ваша главная забота не должна заключаться в том, чтобы дизайн выглядел одинаково во всех браузерах. Вместо этого вы должны убедиться, что он выглядит приемлемо и может использоваться без элементов, которые неуместны или мешают кому-либо получить доступ к определенным функциям.
  • Не пропускайте кроссбраузерное тестирование — Недостаточно просто помнить об этих советах при разработке. Как бы вы ни старались этого избежать, легко случайно написать что-то, что не работает в одном браузере.Вот почему вам необходимо перед доставкой проверить, действительно ли сайт работает в разных браузерах. Использование такого инструмента, как CrossBrowserTesting, дает вам доступ для этого в более чем 1500 браузерах, поэтому вам никогда не придется задаваться вопросом, что пользователи видят, когда заходят на вашу страницу с другого компьютера.

Добавить комментарий

Ваш адрес email не будет опубликован.