кроссбраузерная верстка что это
Простые, но эффективные советы по кросс-браузерной вёрстке, которые должен знать каждый
Многие дизайнеры постоянно ищут кросс-браузерные приёмы, которые помогли бы им решать проблемы совместимости браузеров.
В конце концов, создание сайта — дело простое, но разработка такого, который бы выглядел одинаково во всех браузерах, может стать непростой задачей. Уже много лет проблема совместимости браузеров является одной из самых сложных частей веб разработки.
Наша постоянная задача как веб-дизайнеров и веб-разработчиков — создание для пользователей наилучшего впечатления от использования нашего сайта. Однообразное отображение сайта во всех браузерах способствует этому как нельзя лучше.
Если вы разрабатываете веб-сайты в течение долгого времени, вы согласитесь со мной, что Internet Explorer 8 и более ранние версии этого браузера — это один из самых больших кошмаров веб-дизайнеров и разработчиков. Несмотря на это, есть ещё люди, использующие эти версии IE для просмотра веб-сайтов.
Это только одна из проблем, с которыми мы можем столкнуться при разработке кросс-браузерного веб-сайта. Отрадно, что мы можем перестроить сайт или применить некоторые приёмы, чтобы сделать его совместимым и выглядящим одинаково во всех браузерах.
В этой статье я покажу вам некоторые кросс-браузерные стилевые приёмы и трюки, которые серьёзно упрощают разработку веб-сайтов.
Используйте CSS Reset
Чтобы это исправить, есть хороший приём — добавить код CSS reset в начало вашего файла стилей. Это сбросит стили всех элементов.
Также это приведёт к тому, что вы начнёте стилизацию с нуля, то есть получите полный контроль над элементами, не волнуясь о разной изначальной стилизации элементов, вроде полей, заполнений или выравнивания.
После того, как примените эти правила CSS к вашей разметке, вы можете быть уверены, что у вас есть нулевая точка отсчёта для всех браузеров.
Проверяйте ваш код HTML и CSS
Хорошей практикой перед выкладыванием сайта в сеть является проверка HTML и CSS при помощи валидаторов, так как это поможет вам исправить некоторые мелкие ошибки, которые могут принести проблемы в будущем.
Вы можете использовать валидаторы HTML и CSS от W3C. Эти валидаторы одобрены W3C, но, если вы хотите, то можете использовать любые другие, которые вам нравятся.
Условные комментарии IE
Древние версии IE причиняли много головной боли веб-дизайнерам и разработчикам, когда дело доходило до проблем совместимости. Для решения этой проблемы Microsoft разработали условные комментарии для своего браузера, позволяющие привязывать файл стилей, который будет интерпретирован только браузером IE.
Следующий код будет работать во всех версиях IE:
А следующий код предназначен для конкретной версии IE:
Используйте вендорные префиксы
Стандарты W3C постоянно совершенствуются. Хорошо, если вы знаете о каких-либо недостатках в поддержке определённым браузером некоторого свойства CSS. Такие стилистические приёмы, как скруглённые углы, тени и градиенты, сейчас могут быть реализованы, используя только CSS, без помощи изображений.
Использование вендорных префиксов поможет вам сэкономить уйму времени, не заботясь о том, поддерживает ли браузер ваш код CSS.
Рассмотрим список вендорных префиксов:
В качестве примера давайте используем свойство transition с вендорными префиксами для определённых браузеров:
Очищайте пространство после плавающих элементов
Но проблема тут не в этом. Чаще всего мы располагаем плавающие элементы слева и справа и помещаем их в контейнер.
Посмотрите на рисунки ниже:
Рис. 1. Вот, чего мы хотим добиться.
Рис. 2. Однако вот, что у нас получается.
Управление размером шрифта
Хотя не существует каких-либо строгих правил использования определённого измерения для размера шрифта, я бы посоветовал использовать единицы em и проценты, поскольку они основаны на настройке размера шрифта в браузере пользователя.
Большинство людей используют пиксели ( px ) или пункты ( pt ), которые основаны на разрешении экрана. Они всегда фиксированы.
Всегда тестируйте ваш веб-сайт в нескольких браузерах
Вы можете лениться проводить тестирование вашего веб-сайта в различных браузерах, думая, что он выглядит хорошо во всех современных браузерах. Поверьте мне, я был когда-то таким же, но это ведёт к тому, что у посетителей вашего сайта могут остаться плохие впечатления от его посещения.
Упрощайте код
Упрощение кода делает всю работу простой и быстрой. Что я имею в виду? Одно только использование простых элементов при разработке вашего веб-сайта делает задачу браузера по чтению вашего кода гораздо проще.
Например, вместо использования таблиц и параграфов для создания навигации, вы можете просто использовать для этого ненумерованный список. Для создания отзывчивого веб-сайта элементы div подойдут гораздо лучше, чем таблицы.
Сохраняйте код простым, хорошо структурированным и используйте правильные наименования. Поверьте мне, это сэкономит вам кучу времени и избавит от лишней головной боли, когда у вас возникнут какие-либо проблемы.
Заключение
Существуют и другие приёмы и трюки для поддержания кросс-браузерной совместимости, но эта статья должна снабдить вас базовым фундаментом, на котором будут строиться все ваши дальнейшие знания по этой проблеме.
Хорошей идеей является время от времени перечитывать ваш код и проверять его на совместимость с различными браузерами.
Если вы знаете какие-нибудь другие приёмы, которые мы не осветили здесь, или у вас есть комментарии или предложения, мы будем рады их услышать. Пожалуйста, оставляйте ваши комментарии к этой статье.
Кроссбраузерная верстка
Вы когда-нибудь замечали, что сайт может по разному отображаться в разных браузерах? В этом и есть смысл кроссбраузерной верстки.
Что такое кроссбраузерная верстка
Причем под корректностью понимается именно точное расположение всех деталей макета и функционала. Сайт должен смотреться одинаково во всех популярных браузерах:
Задача достаточно сложная, если использовать «специфичные» возможности CSS, так как все браузеры отображают некоторые элементы веб-страниц по-своему. И каждая новая версия включает в себя новые возможности, реализуемые в браузерах от других разработчиков далеко не в один и тот же день.
Кроссбраузерная верстка хорошо знакома тем, кто работал с браузером Internet Explorer 6 – он подпортил немало нервов верстальщикам за счет своей уникальности. А уникальность эта выражалась в том, что этот браузер не поддерживает очень многие правила и стандарты. В результате выходило так, что сверстанный макет смотрелся в Firefox и Opera просто великолепно, разваливаясь в IE6 в абсолютную кашу.
Причины нарушения корректного отображения страниц
Несмотря на то, что в мире имеются определенные стандарты по построению web-страниц, разработчики постоянно внедряют в браузеры поддержку новых технологий и новых правил CSS. Это позволяет создавать более динамичные и функциональные сайты, реализуя ранее недостижимые возможности. И каждый разработчик стремится к тому, чтобы его браузер поддерживал самые новые технологии, новые скрипты и новые библиотеки. В результате одни пользователи радуются новому браузеру, в котором хорошо отображаются самые продвинутые сайты, а другие не могут понять, почему открывшаяся страница открывается некорректно. Именно поэтому верстальщик должен написать код, который отображался бы в разных браузерах максимально одинаково.
Также не стоит забывать, что постоянно появляются новые версии браузеров и было бы очень не плохо, чтобы на новых версиях сайт также корректно работал.
Что нужно для кроссбраузерной верстки – инструменты
Кроссбраузерная верстка должна обеспечить максимально корректный показ сайта в любых современных и устаревших браузерах. Для этого верстальщик должен создать код, подходящий под большинство используемых браузеров, в том числе и малоизвестных. Ему потребуются определенные знания и умения, которые он приобрел в процессе изучения своего дела.
Неоценимую помощь оказывают сравнительны таблицы, показывающие различия в восприятии отдельных элементов различными браузерами. То есть, для того чтобы выполнить кроссбраузерную верстку, нам понадобятся:
Кстати, было бы неплохо создать на своем компьютере виртуальную машину, установить на нее операционную систему и загрузить туда старые версии браузеров – многие до сих пор пользуются старым софтом, не понимающим современные технологии.
Отдельный фронт работ нужно провести с заказчиком. Ему нужно объяснить, что в мире web-дизайна нет ничего идеального, и что некоторыми моментами придется пожертвовать. Задачей команды дизайнеров и программистов становится создание сайта, который должен соответствовать следующим пунктам:
В процессе создания кроссбраузерной верстки в коде задается значение атрибутов элементов HTML по умолчанию, что уже на начальном этапе позволяет избавиться от некорректного отображения даже самых простых макетов будущих сайтов. Далее производится расстановка тегов с учетом совместимости кода в различных браузерах. На этом этапе верстальщику нужно будет постоянно контролировать корректность отображения сайта, используя для этого браузеры всех версий и поколений (во всяком случае, нужен хотя бы базовый набор из популярных браузеров последних лет).
Для того чтобы облегчить свою работу по созданию кроссбразуерной верстки, следует сначала выполнить верстку для одного браузера, контролируя соответствие исходному шаблону в PSD. После этого проверяется корректность отображения в других браузерах с одновременной модернизацией исходного кода. Такой подход значительно ускоряет создание кроссбраузерной верстки и позволяет в сжатые сроки получить достойные результаты.
Кроссбраузерная верстка – это краеугольный камень современного web-дизайна. Различия в работе браузеров часто являются препятствием для реализации тех или иных возможностей. В результате мы довольствуемся усредненным, но доведенным до пика совершенства результатом. А сегодня кроссбраузерная верстка дополнилась необходимостью создания адаптивного дизайна, корректно отображающегося не только в любых браузерах, но и на любых мобильных устройствах.
Кроссбраузерность. Причины и приемы
Топик собрал в себе как всем известные способы кроссбраузерной верстки, так и несколько интересных, довольно редко встречающихся.
Предисловие. Почему так получилось
После появления в 1994 году одного из первых удачных браузеров Netscape Navigator, созданных на основе первого браузера с графической оболочкой Mosaic, копания Microsoft решила сделать свой браузер и назвать его Internet Explorer. Первая и вторая версия IE поставлялись вместе с пакетом Microsoft Plus!, дополняющим возможности Windows, но широкого распространения не получили. Тогда Microsoft решили разработать радикально отличающийся от IE 1.0 и 2.0 браузер, для чего компания наняла программистов из Spyglass, которые разработали новый браузер на основе Mosaic. Так в 1996 году появился Internet Explorer 3.0. Однако разработчики ввели в браузер несовместимые со стандартами расширения HTML, которые впоследствии сохранялись от версии к версии. Последующее параллельное развитие IE и Netscape Navigator привели к захвату IE 95% рынка. Застой в развитии IE с 4.0 до 6.0 версии, с плохой поддержкой стандартов, низкой скоростью работы и отображения страниц, привел к возрождению Netscape в версии 6.0, который был написан на новом движке Gecko. Обновленный Netscape Navigator не смог добиться былых вершин и со временем компания Netscape объявила о прекращении поддержки своего браузера.
Однако движок Gecko послужил основой для создания в 2004 году современного браузера Mozilla Firefox. В 1996 году появилась Opera, которая добилась своих успехов скоростью и простотой использования. В 2003 году компания Apple выпустила свой браузер Safari на движке WebKit, отказавшись от IE, ранее использовавшийся в Mac OS. В 2008 году Google также решил вступиться в гонку браузеров, выпустив Google Chrome, основанный на том же движке что и Safari.
Таким образом, каждый из браузеров имеет свою историю, имеет свои версии, которые в свою очередь различаются поддержкой Javascript, HTML и CSS.
На сегодняшний день доля мирового рынка браузеров составляет: 45% для IE, 31% Firefox, 15% Chrome, 5% Safari и 2% Opera.
Отдельно хочется порадоваться о снижении доли на рынке самого «старого» и проблемного браузера IE6, который сейчас занимает всего 6%.
Кроссбраузерность
Под кроссбраузерностью понимается одинаковое отображение и работа сайта в разных браузерах. В данном топике я не буду рассматривать проблемы работы JavaScript в разных браузерах, а остановлюсь на верстке.
Есть два основных способа добиться одинакового отображения сайта в браузерах:
Разделение стилей с помощью условных комментариев
Разделение стилей для разных браузеров – один из самых распространенных способов кроссбраузерной верстки. Суть метода заключается в идентификации вида браузера пользователя и применение соответствующего стиля совместно с основным.
Условные комментарии понимает только IE, поэтому остальные браузеры прочтут этот код как обычные комментарии.
Можно задать стили, которые увидят все браузеры кроме IE:
Также есть возможность идентификации версии IE пользователя:
для IE6
для IE6 и выше
для IE меньше чем 6 версии
для IE меньше или равен 6 версии
для IE больше 6 версии
и подключения соответствующего стиля для каждой версии IE(номер версии IE можно поменять на нужный).
Можно избежать необходимости подключения разных CSS-стилей для разных версий IE, определяя версии IE и назначая классы для body:
Плюсом данного метода является валидность его использования.
CSS-хаки
Другой, не менее частый способ кроссбраузерной верстки – CSS-хаки, позволяющий определять свойства конкретным элементам.
для IE8:
.elementstyle <
background: #F12\3/;
>
для Firefox:
@-moz-document url-prefix() <
.elementstyle <
background: #123;
>
>
для Opera все сложнее. CSS-хаки для Opera понимают Safari и Chrome, поэтому нужно использовать совместно хак для Opera и для Safari\Chrome, чтобы переопределить стиль обратно:
@media all and (min-width:0px) <
head
Способ ненадежный, потому что не будет работать если пользователь отключил JavaScript.
Заключение
Подведем итог: верстая большие сайты с большим количеством элементов, рассчитывая на дальнейшее развитие и разрастание сайта, все-таки предпочтительней использовать разделение стилей. Это валидно, удобно, это правило хорошего тона. Но нет ничего страшного в использовании CSS-хаков для небольших сайтов, тем более что многие из хаков тоже проходят валидацию.
В заключении скажу, что в идеале нужно стремиться к отказу от использования хаков и разделения стилей, совершенствуя свои навыки в верстке.
Что такое кроссбраузерность сайтов и как этого добиться
Кроссбраузерность — это одинаковое отображение и работа сайта в различных браузерах. Если не задуматься над этим вопросом на этапе верстки, то, создав сайт, вы увидите, что в разных браузерах он отображается по-разному и не везде корректно.
Откуда возникла такая проблема? Дело в том, что браузеры используют разные движки. Браузерный движок занимается загрузкой, обработкой, отображением и расчетами данных. И хоть сегодня существует большое количество различных браузеров, если мы их разложим по используемым движкам, то увидим, что этих движков не так и много, так как создание своего движка является очень трудоемкой задачей.
Основные движки:
Примечание.
Последующие сравнения с браузером Edge справедливы для версий ниже 79.
Проблема различного отображения верстки заключена в том, что разные движки по-разному воспринимают и обрабатывают некоторые html-теги и css-стили, а также содержимое самих тегов. Например, браузер Edge подсвечивает все номера телефонов добавляет свои стили.
В результате получаем номер телефона без добавления стилей:
Подробнее о html и css расскажем ниже.
Как добиться одинакового отображения сайта в разных браузерах?
Разобравшись с понятием кроссбраузерной верстки, возникает вопрос: а как добиться корректного отображения верстки во всех этих браузерах? Откроем несколько секретов html-верстальщиков. =)
1. Использование префиксов
Префиксы — приставки к названиям CSS-свойств, используемые для конкретных браузеров.
Производители браузеров называют несколько причин использования префиксов:
2. CSS-хаки
Это использование специальных свойств, понимаемых только определенными браузерами. Разберем пример css-хака, работающего только в Firefox. Создадим квадрат и закрасим его в красный цвет:
А теперь добавим свойство, которое будет работать только в Firefox:
Что такое кроссбраузерность
В работе я периодически пользуюсь разными браузерами: Google Chrome, Яндекс.Браузером, Mozilla Firefox, Opera. Давно заметил, что одни и те же сайты в разных приложениях открываются также по-разному. Где-то эти отличия мало заметны и никак не влияют на просмотр и чтение, но иногда возникают определенные сложности с картинками, баннерами, кнопками команд и даже текстами. Чаще всего с такими проблемами сталкиваются владельцы смартфонов и планшетов. Большинство посетителей, встретившись с подобными неудобствами, просто покидают проблемный ресурс и переключаются на альтернативные источники информации.
Если для рядового посетителя неудобство просмотра определенного веб-ресурса скорее относится к разряду мелкой секундной проблемы, то регулярное возникновение отказов от посещения сайта для его владельцев не сулит ничего хорошего. Падает конверсия, снижается рейтинг ресурса в поисковых системах. Почему возникает такая ситуация?
Дело в том, что разные браузеры созданы и работают на разных движках. Эти движки отвечают за загрузку, обработку, отображение и расчет данных. Каждый движок воспринимает и считывает информацию, закодированную в HTML-тегах и CSS-стилях определенного веб-ресурса по-своему. В свою очередь сайты также создаются в различных CMS, разработчики используют варианты встроенных команд, плагинов и скриптов. Для того чтобы сайт одинаково хорошо отображался в разных браузерах, необходимо, чтобы он соответствовал требованиям кроссбраузерности. Что это такое, как проверить и настроить адаптивность сайта в различных браузерных приложениях, мы поговорим в этой статье.
Так что такое кроссбраузерность?
Кроссбраузерность – это способность веб-ресурса отображаться одинаково хорошо во всех популярных браузерах без перебоев в функционировании и ошибок в верстке, с одинаково корректной читабельностью контента. Это очень важный показатель как для поисковых систем, так и пользовательской аудитории.
Конечно, нет необходимости добиваться совершенно одинакового отображения визуальной и текстовой информации сайта во всех без исключения версиях браузеров. Достаточно, чтобы ресурс обладал адаптивностью ко всем возможным устройствам просмотра вне зависимости от размеров экрана. Не должно быть проблем с версткой, когда картинки, баннеры, логотипы «наезжают» друг на друга или вовсе не отображаются. Текстовая информация должна быть читабельной, особенно это касается таблиц. Важно, чтобы корректно работали сервисные приложения, вшитые в ресурс.
Кроссбраузерными считаются сайты, которые хорошо работают на:
Существуют и другие обозреватели, но они не столь популярны и работают на редких движках. Потери от некорректной работы в них можно считать несущественными. Также не стоит обращать большое внимание на посетителей, которые используют старые версии браузеров. В этом случае достаточно поставить страницу-заглушку, которая будет предлагать посетителю обновить его обозреватель до актуальной версии. Да и сами разработчики браузеров активно призывают пользователей обновлять их детища.
Параметры, определяющие кроссбраузерность
Любой посетитель сайта в считанные секунды определит, насколько корректно работает ресурс в его обозревателе. Сделает он это исходя из следующих критериев:
Согласно данным компании Google, более 70% интернет-трафика сейчас идет через мобильные устройства. С 1 июля 2019 г. индексирование с приоритетом мобильного контента включено по умолчанию в Google Chrome для всех новых сайтов. Это заставляет веб-разработчиков все активнее заниматься обеспечением совместимости страниц с планшетами и смартфонами.
Как проверить кроссбраузерность сайта
Самый простой способ определить наличие кроссбраузерности – вручную открыть и проанализировать все страницы сайта в наиболее популярных обозревателях. Согласитесь, метод практически неприемлемый для крупных интернет-проектов, особенно с постоянно обновляемым контентом. Хотя совсем исключать этот способ тоже не стоит.
Сначала нужно понять, какие браузеры нужны для теста. Для этого лучше всего воспользоваться специальными сервисами аналитики – Яндекс.Метрикой и Google Analytics. Они покажут, каким браузерами отдают предпочтение ваши пользователи. Согласно статистике Statcounter, в тройку лидеров в РФ входят: Google Chrome, Яндекс.Браузер и Opera.
Проверить кроссбраузерность веб-ресурса в автоматическом режиме можно с помощью специальных платных и бесплатных сервисов. Рассмотрим некоторые из них подробнее.
CrossBrowserTesting
Сервис является платным, работает в режиме онлайн, поддерживается практически всеми версиями операционных систем и браузерами, в том числе мобильными.
Используются следующие способы проверки:
В течение 7 дней доступен бесплатный тестовый период с лимитом в 60 минут.
Browsershots
Онлайн-сервис проверки сайтов на кроссбраузерность в более чем 200 обозревателях и их сборках, в том числе малопопулярных и устаревших. Результат сохраняется в виде скриншотов. Есть бесплатная и платная версии. При бесплатном варианте запрос ставится в очередь, период ожидания может достигать нескольких часов. В случае платной подписки сайт будет проверяться в приоритетном порядке.
IE NetRenderer
Как видно из названия, проверить кроссбраузерность сайта можно только для Internet Explorer, начиная с версии 5.5 и заканчивая 11. Сервис работает онлайн, указать здесь можно только версию браузера и адрес тестируемого ресурса.
Browserling
Осуществляет проверку не в эмулируемом, а в реальном окне браузера, который установлен на виртуальной машине программы. Работает с ОС Windows и 4+ версиями ОС Android в пяти популярных браузерах – Chrome, Opera, IE, Safari, Firefox. Ресурс полностью платный.
Spoon Browser Sandbox
Проводит бесплатную проверку кроссбраузерности сайта в последних версиях Chrome, IE, Opera, Safari и Firefox. Тестирование в старых релизах платное. После загрузки специального плагина доступно тестирование всех параметров кроссбраузерности. Интерфейс русифицирован.
MultiBrowser
Платный сервис проверки кроссбраузерности. Работает со всеми доступными версиями Firefox, Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов. Приложение способно подключать браузеры, уже установленные на ПК, либо загружать версии, которые нужны пользователю. Есть функция тестирования сайта в различных браузерах в офлайн-режиме. Бесплатная демо-версия доступна в течение двух недель.
Sauce Labs
Онлайн-сервис тестирования кроссбраузерности. При оформлении платной подписки доступна автоматическая проверка около 700 комбинаций браузеров, разрешений и устройств.
Equafy
Очень эффективная программа, она не только тестирует кроссбраузерность веб-ресурса в режиме онлайн, но и производит автоматическое сканирование и поиск ошибок верстки в самых разных браузерах. В интерфейсе доступно множество настроек, которых нет во многих других подобных сервисах. Отчет сохраняется в скриншотах.
Viewlike.us
Очень хороший инструмент для проверки адаптивности внешнего вида сайта на экранах устройств с разными расширениями. Помимо проверки кроссбраузерности, можно узнать скорость загрузки, размер элементов HTML-кода и изображений. Встроенный инструмент позволяет получить рекомендации касательно правил юзабилити.
Как сделать сайт кроссбраузерным
Большинство современных интернет-ресурсов изначально обладают кроссбраузерностью. В тоже время проблема совместимости периодически возникает в том или ином виде даже у раскрученных сайтов с миллионной аудиторией. Существует несколько способов оптимизации кроссбраузерности веб-ресурса.
CSS hacks
CSS хаки – это фрагменты CSS-кода, которые понимает только определенный браузер, другими он игнорируется. Вот CSS-хак для Internet Explorer 6 (IE6):
В этом коде хак, воспринимаемый только браузером IE v.6 и ниже, записан в виде «звездочка html».
Разработчики считают использование хаков не самым лучшим методом устранения ошибок. т.к. они усложняют и делают громоздким код страниц.
Универсальные элементы
Подобные элементы работают в большей части браузеров одинаково успешно, поэтому их использование для достижения кроссбраузерности является оптимальным. С помощью одних лишь универсальных элементов исходный код для вашего сайта будет эстетичным, коротким и понятным практически для всех обозревателей. Проверить, какие теги какой версией движка поддерживаются, можно с помощью бесплатного сервиса caniuse.com.
Фреймворки
Можно применять заготовки и шаблоны кода, которые совместимы с большинством браузеров и мобильными устройствами. Например, инструментарий Bootstrap, который позволяет создавать и настраивать адаптивные сайты.
Вендорные префиксы
Этот метод в чем-то схож с использованием хаков, но является более эффективным и корректным. Префиксы — приставки к названиям CSS-свойств, используемые определенными браузерами. Они позволяют изменять отображение в конкретном обозревателе.
Примеры преф иксов:
Для соблюдения бесперебойной работы ресурса и поддержания кроссбраузерного функционала следует проводить регулярную проверку на ошибки в HTML и CSS. Сделать это можно с помощью специальных сервисов, таких как HTML Validator и CSS Validator.
Заключение. Яндекс.Толока и кроссбраузерность
Сомневаюсь, что открываю Америку, но даже самые популярные поисковые системы – это тоже сайты. Как и другие веб-ресурсы, они нуждаются в том, чтобы их страницы корректно отображались во всех версиях конкурирующих браузеров. Например, компания Яндекс для проверки своих интернет-проектов на кроссбраузерность активно использует ручной метод.
Для этого по их заказу белорусскими разработчиками в 2014 году был создан краудсорсинговый проект «Толока». Принцип его работы очень простой. Любой желающий регистрируется в системе, проходит обучение и получает различные задания, сложность и уровень оплаты которых зависят от рейтинга. В настоящее время в Толоке около 4 млн зарегистрированных пользователей, проживающих по всему миру.
Так, в 2018-2019 годах разработчики компании активно развивали свои ресурсы, вносили в них множество изменений как содержательного, так и функционального характера. Для ручного тестирования кроссбраузерности привлекались сотни тысяч подписчиков Толоки. Проверка проходила «вживую» не только во всех известных браузерах, но и с использованием их различных релизов, в т.ч. устаревших. Пользователи открывали страницы в своих обозревателях на мобильных и стационарных устройствах, выполняли тестирование по техническому заданию. Проверялась адаптивность отображения на разных устройствах, на экранах с различным разрешением и даже размерами окна. Выполнялись скрипты, оценивался визуальный и текстовый контент, переходы, тестировалась мультиязычность. Разработчики Яндекса в режиме онлайн отслеживали результаты эмуляции реального поведенческого трафика. Баги оперативно устранялись на уровне бета-версий.
Кроссбраузерность – важный критерий корректной работы веб-ресурса. Это инструмент поддержания посетительской лояльности, повышения конверсии и поднятия рейтинга в поисковых системах. В то же время не стоит доводить этот показатель до абсолюта. К примеру, если на широком экране десктопного ПК колонки текста отображаются горизонтально, то на небольшом экране смартфона логично будет расположить их последовательно сверху вниз. Главное, чтобы сайт был удобным для пользователя, все важные элементы и функции заметны и доступны.