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

Больше видео на нашем канале — изучайте интернет-маркетинг с 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 документов по-своему.

Что, естественно, сказывается на внешнем облике страниц.

И как следствие, ваш сайт может выглядеть по-разному, это будет зависеть от браузера, которым пользуется человек, посещающий ваш сайт. Например, в Mozilla Firefox все может выглядеть как надо, красиво и ровно, а если откроешь IE, то блоки сайта съезжают один на другой, а фоны вообще куда-то подевались…

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

Ни в коем случае не пренебрегайте этим этапом в создании сайта!

Эту проверку следует проводить ориентируясь, по крайней мере, на пятерку самых распространенных браузеров — это Mozilla Firefox, Safari, Internet Explorer, Opera и Google Chrome. Причем, каждый из этих браузеров имеет множество версий.

А версии Internet Explorer вообще настолько отличаются друг от друга, что интерпретируют html теги совершенно по-разному, поэтому для них нужно проводить отдельное тестирование. Для браузера Internet Explorer существует даже специальная программа IEtester, которую вы можете всегда бесплатно закачать с интернета.

На что нужно обращать внимание в процессе проверки своего сайта на кроссбраузерность?

Недостаточно просто просмотреть на сайт в разных браузерах.

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

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

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

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

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

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

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

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

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

Успехов вам, дорогие читатели!

Автор статьи: Елена Лощилова.

Тестирование кроссбраузерной совместимости, выходящее за рамки Chrome

Тестирование кроссбраузерной совместимости в последние годы набирает обороты, и для этого есть причина. В то время как технологии стремительно развиваются, люди — нет. Значительное количество людей сопротивляются изменениям или, точнее говоря, «не хотят обновлять свои технологии». В этом сценарии тестирование совместимости браузера позволяет компаниям гарантировать, что ни один клиент не останется без внимания и не получит нежелательный опыт.Таким образом, хотя браузеры, такие как Google Chrome и Firefox, доминируют на рынке, есть люди, использующие их более старые версии или другие браузеры. И их количество слишком велико, чтобы игнорировать его.

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

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

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

Поскольку невозможно протестировать все возможные комбинации браузера и устройства, вам необходимо составить короткий список наиболее важных из них для тестирования вашего веб-приложения.По состоянию на декабрь 2018 года у Google Chrome больше всего пользователей. На его долю приходится около 70,95% рынка. Firefox занимает второе место с долей рынка 10,05%, в то время как другие, такие как IE, Safari и Edge, имеют долю рынка примерно по 4-5% каждый.

Начать тестирование бесплатно

Учитывая количество пользователей, Google Chrome и Firefox критически важны для любого бизнеса. Однако браузеры, такие как Safari, Edge и Internet Explorer, также должны быть частью тестирования, и их подмножество можно выбрать в зависимости от вашего трафика.

Ответ — нет. Во-первых, принятие решения исключительно на основе объема приведет к тому, что ряд браузеров не будет присутствовать на рынке. Также следует учитывать ваш целевой рынок. Например, Windows XP все еще используется миллионами людей, и эти пользователи, вероятно, будут использовать Internet Explorer. Если ваш целевой рынок использует IE, ваш веб-сайт должен быть совместим с IE.

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

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

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

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

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

Учитывая тот факт, что Edge был запущен с Windows 10, многие люди, использующие предыдущие версии Windows, по-прежнему используют IE, несмотря на отсутствие производительности и функций. Edge еще не вышел на рынок с более новыми версиями ОС Windows.

Давайте поищем конкретные рынки, такие как Германия, Великобритания и США, чтобы определить, являются ли браузеры, такие как Safari, IE и Edge, важными в большем, чем мы думаем, смысле.

Доля рынка веб-браузеров в Германии в 2018 году показывает, что Google Chrome является наиболее часто используемым веб-браузером, за ним следуют Safari и Firefox. IE также составляет значительную долю рынка в 5,7%. Однако Edge по-прежнему отстает с 4,04% и, как ожидается, со временем будет расти, поскольку IE устареет с более новыми версиями Windows.

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

В Великобритании Chrome остается на первом месте. Но Safari и IE превосходят Firefox, а Edge занимает пятое место по доле рынка. Далее показано, как использование определенных браузеров в зависимости от доли мирового рынка может повлиять на прибыль компаний, работающих в разных регионах.

В США заметны Chrome, Safari и Firefox.Тем не менее, UC Browser, популярный браузер в Азиатско-Тихоокеанском регионе, набирает обороты, поскольку люди узнают о цифровой рекламе и угрозах, которые она может представлять для конфиденциальности данных.

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

Бесплатное тестирование в реальном облаке устройств

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

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

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

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

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

Содержание

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

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

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

Проверка совместимости между браузерами — это, вкратце, проверка того, как все ваши веб-страницы выглядят при просмотре в разных браузерах, например Chrome, Firefox, Safari или Internet Explorer. Даже если вы не знали, что почти все браузеры придают вашему сайту другой вид, увы, это правда, и только путем тестирования веб-браузера это можно обнаружить и исправить.Конечно, адаптировать сайт под абсолютно все браузеры невозможно, но можно начать с тех, которыми пользуется большинство ваших пользователей. Вы можете узнать это, например, из статистики Google Analytics. Однако настоятельно рекомендуется адаптировать ваш сайт не только к наиболее широко используемым браузерам, но и к старым веб-браузерам.

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

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

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

Blink принадлежит Google, имеет открытый исходный код и является частью проекта Chromium. Он используется в следующих браузерах: Chrome, Opera, Яндекс, Вивальди и др. Над разработкой этого движка работают многие крупные компании, в том числе Opera, Intel, IBM, Яндекс, Вивальди и другие.

WebKit принадлежит Apple, имеет открытый исходный код и используется в браузере Safari.А именно, этот движок использовался Google в своем браузере Chrome с 2008 по 2013 год.

Gecko принадлежит Mozilla, имеет открытый исходный код и используется в Firefox и Tor Browser.

EdgeHTML принадлежит Microsoft, имеет закрытый исходный код и используется в браузере Edge. Он заменил движок Trident (ранее использовавшийся в Internet Explorer) с запуском Windows 10 и работает только в этой операционной системе.

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

Что может повлиять на сложность просмотра вашего сайта?

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

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

Почему некоторые люди до сих пор используют Internet Explorer

• Не все знают, что есть более быстрые и удобные браузеры для работы в Интернете;
• Отдельные пользователи просто привыкли к Internet Explorer и боятся пробовать что-то еще, полагая, что это может нарушить стабильность системы;
• Многие компании имеют корпоративную защиту от установки сторонних программ, поэтому вам придется использовать браузер, встроенный в Windows по умолчанию;
• Есть также ярые поклонники продуктов Microsoft, которые в основном используют только свое программное обеспечение и не хотят рассматривать альтернативы.

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

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

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

Почему любой сайт должен быть кроссбраузерным

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

Если вы не адаптируете макет своего сайта для разных браузеров, то есть риск потерять некоторых посетителей, каждый из которых может стать потенциальным клиентом. Согласитесь, это не вариант для бизнеса, потому что уход любого покупателя означает вероятную потерю прибыли.Кроме того, если посетитель сайта тратит на это менее 15 секунд, поисковые системы расценивают такое поведение как сбой. И чем больше отказов, тем ниже будет позиция сайта в том же Яндексе или Гугле, и клиентам будет сложно найти ресурс. И даже если владелец сайта учел все браузеры, кроме Internet Explorer, разработчики которого особо не придерживаются общепринятых стандартов верстки, владелец все равно рискует потерять часть заинтересованной аудитории, которая пользуется этим браузером.

В чем особенности кроссбраузера

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

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

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

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

1. Использование CSS-хаков

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

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

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

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

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

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

5 Критерии оценки браузерной совместимости вашего ресурса

В настоящее время существует ряд критериев для оценки кроссбраузерности вашего веб-сайта:

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

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

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

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

Помимо пожеланий заказчика, выбор браузеров для тестирования определяется другими объективными критериями: популярностью браузера (по статистике) и целевым регионом, что иногда имеет смысл, а иногда нет смысла включать определенные браузеры, когда запущен тест браузера. Основные моменты, которые следует проверить в первую очередь, — это макет, такой как шрифт, цвет, расположение элементов и JavaScript, который он может «выполнять» по-разному.

Кроссбраузерное тестирование можно упростить с помощью различных инструментов.Например, вы можете протестировать на виртуальной машине. Это удобное решение в случаях, когда вам нужно проверить разные версии одного и того же браузера. Кроме того, виртуальная машина подходит, когда необходимо провести тестирование в браузере Safari в Mac OS, но нет реального устройства, на котором работает эта операционная система. Еще один способ облегчить проверку сайта на совместимость с браузерами — это уже готовые утилиты и сервисы онлайн-тестирования кроссбраузерности. Используя такие сервисы, вы избавите себя от установки всех проверяемых вами браузеров, или версий браузеров, виртуальных машин.Достаточно просто установить утилиту или посетить онлайн-сервис кроссбраузерной проверки, например, Comparium, который предоставляет вам скриншоты сайта, отображаемые в разных браузерах с комбинацией разных операционных систем, предлагает различные режимы сравнения, чтобы помочь вам с анализом макета вашего веб-ресурса.

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

За последние два десятилетия в Интернете произошел огромный рост.В 1998 году было около 2,4 миллиона веб-сайтов, а сейчас их около 1,8 миллиарда. Больше устройств приводит к большему количеству пользователей, большему количеству платформ и большему количеству браузеров и, в конечном итоге, большему количеству способов просмотра вашего веб-сайта.

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

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

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

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

• 45% будут сомневаться, что посетят ваш веб-сайт снова, или они могут никогда не посетить его в будущем.
• 32% пользователей считают ваш веб-сайт тем или иным проблемным и с меньшей вероятностью будут платить вам за ваши услуги.
• 35% из них составят негативное восприятие вашей компании.
• 21-22% пользователей уйдут навсегда.

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

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

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

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

• BrowserStack тестирует реальные браузеры на реальных машинах, что позволяет тестировщикам программного обеспечения и разработчикам тестировать веб-сайты и мобильные приложения.
• Он облачный, поэтому не требует установки. Предустановленные инструменты разработчика полезны для быстрой отладки и кросс-браузерных тестов.
• С его помощью вы можете проводить тестирование в реальном времени и автоматическое тестирование на мобильных устройствах и в веб-браузерах. Он поддерживает Opera Mobile, Windows (XP, 7 и 8), Android, лев и горный лев, iOS, снежный барс OSX и т. Д.
• Еще одна особенность — это собственный интерфейс, в котором вы можете тестировать через браузеры с помощью DevTools.

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

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

• Browsershots — это платформа для тестирования с открытым исходным кодом. Он позволяет тестировать сайты в любом браузере и ОС. Это широко используемый инструмент тестирования программного обеспечения из-за его функций и доступных настроек.
• Можно легко запустить тестирование совместимости между браузерами с широким выбором настроек, таких как тип браузера, размер экрана, операционная система, статус JavaScript, глубина цвета и настройки включения или отключения Flash.
• Этот бесплатный инструмент для тестирования браузера позволяет делать снимки экрана примерно в 61 браузере и в нескольких операционных системах.
• Поддерживаемые браузеры: Firefox, IE, Google Chrome, Minefield, Opera, Netscape, Safari и т. Д. Почти со всеми версиями.

• LambdaTest — это мощная облачная платформа для кроссбраузерного тестирования, которая позволяет вам проводить тесты кроссбраузерной совместимости вашего веб-приложения или веб-сайтов.
• Этот инструмент позволяет вам протестировать ваш сайт в огромном списке веб-браузеров и их соответствующих версий. Особенность этого инструмента заключается в том, что он обеспечивает как автоматические, так и ручные кроссбраузерные тесты для вашего веб-приложения.
Инструмент
• LambdaTest действительно быстрее, чем остальные, особенно с настольными компьютерами, и, похоже, они больше концентрируются на удовлетворении потребностей клиентов, поскольку их реакция на проблемы пользователей действительно быстрая. Он имеет чистый пользовательский интерфейс и обеспечивает простой в использовании опыт тестирования.
• Поддерживаемые устройства: Android, Windows, Mac, iPhone / iPad и Интернет.

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

Дополнительная литература

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

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

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

Как сделать кроссбраузерное тестирование более эффективным с помощью LambdaTest — Smashing Magazine

Об авторе

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

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

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

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

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

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

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

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

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

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

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

Вот несколько советов, которые помогут вам встроить автоматическое тестирование в свой процесс:

Ознакомьтесь с различиями в поддержке браузеров

Это сводка от Statista о лучших веб-браузерах по доле рынка: