По какой причине между браузерами прослеживается конкуренция
Топик собрал в себе как всем известные способы кроссбраузерной верстки, так и несколько интересных, довольно редко встречающихся.
Предисловие. Почему так получилось
После появления в 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-хаки, позволяющий определять свойства конкретным элементам.
Способ ненадежный, потому что не будет работать если пользователь отключил JavaScript.
Заключение
Подведем итог: верстая большие сайты с большим количеством элементов, рассчитывая на дальнейшее развитие и разрастание сайта, все-таки предпочтительней использовать разделение стилей. Это валидно, удобно, это правило хорошего тона. Но нет ничего страшного в использовании CSS-хаков для небольших сайтов, тем более что многие из хаков тоже проходят валидацию.
В заключении скажу, что в идеале нужно стремиться к отказу от использования хаков и разделения стилей, совершенствуя свои навыки в верстке.
В работе я периодически пользуюсь разными браузерами: Google Chrome, Яндекс.Браузером, Mozilla Firefox, Opera. Давно заметил, что одни и те же сайты в разных приложениях открываются также по-разному. Где-то эти отличия мало заметны и никак не влияют на просмотр и чтение, но иногда возникают определенные сложности с картинками, баннерами, кнопками команд и даже текстами. Чаще всего с такими проблемами сталкиваются владельцы смартфонов и планшетов. Большинство посетителей, встретившись с подобными неудобствами, просто покидают проблемный ресурс и переключаются на альтернативные источники информации.
Если для рядового посетителя неудобство просмотра определенного веб-ресурса скорее относится к разряду мелкой секундной проблемы, то регулярное возникновение отказов от посещения сайта для его владельцев не сулит ничего хорошего. Падает конверсия, снижается рейтинг ресурса в поисковых системах. Почему возникает такая ситуация?
Дело в том, что разные браузеры созданы и работают на разных движках. Эти движки отвечают за загрузку, обработку, отображение и расчет данных. Каждый движок воспринимает и считывает информацию, закодированную в HTML-тегах и CSS-стилях определенного веб-ресурса по-своему. В свою очередь сайты также создаются в различных CMS, разработчики используют варианты встроенных команд, плагинов и скриптов. Для того чтобы сайт одинаково хорошо отображался в разных браузерах, необходимо, чтобы он соответствовал требованиям кроссбраузерности. Что это такое, как проверить и настроить адаптивность сайта в различных браузерных приложениях, мы поговорим в этой статье.
Так что такое кроссбраузерность?
Понятие кроссбраузерности появилось еще на заре освоения интернета в начале 90-х годов. В то время существовало всего два ведущих браузера - Internet Explorer от Microsoft и Netscape Navigator. Считалось, что если сайт одинаково корректно отображается в обоих приложениях, то с кроссбраузерностью у него все в порядке. Затем Netscape Navigator прекратил свое существование, но стали один за другим появляться новые разработки браузерных систем. Некоторые сайты в них отображались корректно, с другими начинали возникать различные баги. Посетители относились к подобным проблемам негативно и просто напросто переставали посещать такие сайты. Разработчики веб-ресурсов вынуждены были учитывать этот фактор и искать пути решения проблемы.
Кроссбраузерность – это способность веб-ресурса отображаться одинаково хорошо во всех популярных браузерах без перебоев в функционировании и ошибок в верстке, с одинаково корректной читабельностью контента. Это очень важный показатель как для поисковых систем, так и пользовательской аудитории.
Конечно, нет необходимости добиваться совершенно одинакового отображения визуальной и текстовой информации сайта во всех без исключения версиях браузеров. Достаточно, чтобы ресурс обладал адаптивностью ко всем возможным устройствам просмотра вне зависимости от размеров экрана. Не должно быть проблем с версткой, когда картинки, баннеры, логотипы «наезжают» друг на друга или вовсе не отображаются. Текстовая информация должна быть читабельной, особенно это касается таблиц. Важно, чтобы корректно работали сервисные приложения, вшитые в ресурс.
Кроссбраузерными считаются сайты, которые хорошо работают на:
- Google Chrome и производных обозревателях (типа Яндекс.Браузера, Chromium, Opera c 15 версии и т.д.);
- Microsoft Edge (сейчас он тоже работает на движке Blink, как и Chrome);
- Mozilla Firefox;
- Safari (браузер, который используется на iOS и macOS).
Существуют и другие обозреватели, но они не столь популярны и работают на редких движках. Потери от некорректной работы в них можно считать несущественными. Также не стоит обращать большое внимание на посетителей, которые используют старые версии браузеров. В этом случае достаточно поставить страницу-заглушку, которая будет предлагать посетителю обновить его обозреватель до актуальной версии. Да и сами разработчики браузеров активно призывают пользователей обновлять их детища.
Параметры, определяющие кроссбраузерность
Любой посетитель сайта в считанные секунды определит, насколько корректно работает ресурс в его обозревателе. Сделает он это исходя из следующих критериев:
- Расположение элементов. Если сайт не адаптирован под конкретный браузер, его элементы могут съезжать за пределы экрана, накладываться друг на друга или не отображаться.
- Текст. Очень важный критерий, особенно для статейных ресурсов, которых сегодня становится все больше. Текст не должен наслаиваться, съезжать или отображаться в виде нечитаемых символов.
- Скорость загрузки. Если сайт очень тяжелый, страницы грузятся медленно и зависают, то пользователь очень быстро покинет такой ресурс.
- Адекватная работа всех кнопок, сайдбаров и других функционально активных элементов. Если при нажатии на определенную кнопку команда не выполняется либо реализуется некорректно, то это означает, что у этого сайта могут быть проблемы с кроссбраузерностью.
- Адаптивность под все устройства . Ресурс одинаково хорошо должен отображаться и работать на всех гаджетах – компьютерах, планшетах, смартфонах. В крайнем случае должны существовать специальные мобильные версии сайта.
Согласно данным компании Google, более 70% интернет-трафика сейчас идет через мобильные устройства. С 1 июля 2019 г. индексирование с приоритетом мобильного контента включено по умолчанию в Google Chrome для всех новых сайтов. Это заставляет веб-разработчиков все активнее заниматься обеспечением совместимости страниц с планшетами и смартфонами.
Как проверить кроссбраузерность сайта
Самый простой способ определить наличие кроссбраузерности – вручную открыть и проанализировать все страницы сайта в наиболее популярных обозревателях. Согласитесь, метод практически неприемлемый для крупных интернет-проектов, особенно с постоянно обновляемым контентом. Хотя совсем исключать этот способ тоже не стоит.
Сначала нужно понять, какие браузеры нужны для теста. Для этого лучше всего воспользоваться специальными сервисами аналитики – Яндекс.Метрикой и Google Analytics. Они покажут, каким браузерами отдают предпочтение ваши пользователи. Согласно статистике Statcounter, в тройку лидеров в РФ входят: Google Chrome, Яндекс.Браузер и Opera.
Проверить кроссбраузерность веб-ресурса в автоматическом режиме можно с помощью специальных платных и бесплатных сервисов. Рассмотрим некоторые из них подробнее.
CrossBrowserTesting
Сервис является платным, работает в режиме онлайн, поддерживается практически всеми версиями операционных систем и браузерами, в том числе мобильными.
Используются следующие способы проверки:
- «Живой тест». Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
- Тест Selenium. Подразумевает автоматическую проверку в соответствии с предварительно созданным скриптом. Результаты записываются в формате видеофайла.
- Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
- Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.
В течение 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».
Разработчики считают использование хаков не самым лучшим методом устранения ошибок. т.к. они усложняют и делают громоздким код страниц.
Универсальные элементы
Фреймворки
Можно применять заготовки и шаблоны кода, которые совместимы с большинством браузеров и мобильными устройствами. Например, инструментарий Bootstrap, который позволяет создавать и настраивать адаптивные сайты.
Вендорные префиксы
Этот метод в чем-то схож с использованием хаков, но является более эффективным и корректным. Префиксы — приставки к названиям CSS-свойств, используемые определенными браузерами. Они позволяют изменять отображение в конкретном обозревателе.
Примеры преф иксов:
- -moz для Mozilla Firefox;
- -ms используется в Internet Explorer и Microsoft Edge;
- -webkit-border-radius для Safari, а также браузеров на движках WebKit и Blink;
- -o используется в старых версиях Opera на движке Presto, с 2013 Opera использует Blink.
Для соблюдения бесперебойной работы ресурса и поддержания кроссбраузерного функционала следует проводить регулярную проверку на ошибки в HTML и CSS. Сделать это можно с помощью специальных сервисов, таких как HTML Validator и CSS Validator.
Заключение. Яндекс.Толока и кроссбраузерность
Сомневаюсь, что открываю Америку, но даже самые популярные поисковые системы – это тоже сайты. Как и другие веб-ресурсы, они нуждаются в том, чтобы их страницы корректно отображались во всех версиях конкурирующих браузеров. Например, компания Яндекс для проверки своих интернет-проектов на кроссбраузерность активно использует ручной метод.
Кроссбраузерность – важный критерий корректной работы веб-ресурса. Это инструмент поддержания посетительской лояльности, повышения конверсии и поднятия рейтинга в поисковых системах. В то же время не стоит доводить этот показатель до абсолюта. К примеру, если на широком экране десктопного ПК колонки текста отображаются горизонтально, то на небольшом экране смартфона логично будет расположить их последовательно сверху вниз. Главное, чтобы сайт был удобным для пользователя, все важные элементы и функции заметны и доступны.
Большинство современных браузеров собирают информацию пользователя исходя из его поисковых запросов, посещенных страниц, просмотренных видео и прочего. В результате этого строится досье, включающее в себя личные данные, интересы и даже политические взгляды.
Все эти действия необходимы для отображения релевантной рекламы, новостей и другого. Кто-то к этому относится хорошо, а кто-то напрочь старается избегать взаимодействия с отслеживающими скриптами. Именно для таких людей и были разработаны специальные браузеры для анонимного веб-серфинга.
Какой из них лучший – разберемся в сегодняшней статье.
Tor Browser
Первый в нашем списке – Tor Browser, один из самых популярных браузеров для анонимного серфинга. Распространяется с открытым исходным кодом и базируется на Mozilla Firefox. Система использует цепочки прокси-серверов, что позволяет установить анонимное сетевое подключение.
Анонимность осуществима путем передачи информации через несколько серверов Tor. Браузер позволяет посещать веб-ресурсы, оставаясь незамеченным, а также работать с контентом или приложениями, применяющими протокол TCP. Для подключения конфиденциального режима ничего не нужно – все работает по умолчанию с первого захода в браузер.
Преимущества:
- высокий уровень анонимности в интернете;
- доступ к заблокированным ресурсам;
- встроенный VPN;
- многослойное шифрование;
- работа в сетях Tor и Darknet;
- есть портативная версия.
Недостатки:
- возможна медленная скорость загрузки страниц.
Операционная система: Windows, macOS, Linux, Android
Ссылка на скачивание: Tor Browser
Epic Privacy Browser
Благодаря включению опции встроенного прокси с шифрованием можно не переживать о защите своих данных, в том числе при использовании общедоступных сетей Wi-Fi.
Преимущества:
- блокировка рекламы и отслеживающих трекеров;
- функция Do Not Track;
- интегрированный VPN;
- безопасный поиск, который перенаправляет поисковый запрос на другие серверы;
- встроенная система запоминания паролей;
- импорт настроек.
Недостатки:
Операционная система: Windows, macOS, Android
Ссылка на скачивание: Epic Privacy Browser
Comodo Ice Dragon
Comodo Ice Dragon – анонимный браузер, построенный на основе Firefox. В составе веб-обозревателя имеется инструмент Secure DNS от Comodo, который надежно шифрует трафик и не дает сайтам и трекерам считывать его в режиме онлайн. С помощью него блокируются и фишинговые сайты.
Также в браузере присутствует встроенное дополнение Site Inspector, которое сканирует посещаемые сайты и выделяет из них надежные. Если ресурс не прошел проверку, то доступ к нему блокируется. Имеется и опция перенаправления трафика при использовании поисковых систем.
Преимущества:
- хорошая скорость работы;
- опция Site Inspector для проверки ссылок до перехода по ним;
- модули блокировки рекламы и отслеживающих трекеров;
- встроенный сервис Secure DNS;
- поддержка расширений для Firefox.
Недостатки:
Операционная система: Windows
Ссылка на скачивание: Comodo Ice Dragon
Brave
Brave – быстрый анонимный браузер для защиты конфиденциальности пользователей. По умолчанию блокирует объявления и трекеры, снижает шансы на заражение вредоносными и шпионскими программами.
Преимущества:
- полноценный браузер с защитой;
- инструменты блокировки рекламы и трекеров;
- блокировка отправки запросов поисковикам;
- перенаправление трафика из коробки;
- гибкий интерфейс;
- поддержка расширений Google Chrome.
Недостатки:
Операционная система: Windows, macOS, Linux, Android и iOS
Ссылка на скачивание: Brave
SRWare Iron
Еще один кроссплатформенный продукт, основанный на движке Chromium. Он полностью лишен отслеживающих механизмов Хрома. Нет опции запоминания даты установки браузера, нет RZL-идентификатора, не отправляются поисковые запросы на серверы Google.
Также у веб-обозревателя есть специальный режим повышенной приватности. Если его включить, то блокируется возможность отслеживания местоположения, воспроизведения навязчивой рекламы и многого другого.
Преимущества:
- движок Chromium;
- отключены обновления;
- режим повышенной приватности;
- блокировка отправки поисковых запросов;
- блокировка рекламы и трекеров;
- поддержка расширений.
Недостатки:
- в некоторых случаях потребляет много ресурсов.
Операционная система: Windows, Android, Linux и macOS
Ссылка на скачивание: SRWare Iron
Firefox Quantum
Пришедший на замену устаревшему Gecko движок Quantum, который используется во всех последних версиях Firefox, сделал браузер от Mozilla быстрее и современнее. Firefox Quantum предлагает усиленную защиту персональных данных за счет встроенных инструментов, повышенную производительность и сниженную нагрузку на ресурсы компьютера.
Браузер поддерживает все расширения из магазина Mozilla и включает в себя дополнительные опции защиты от слежки. Присутствует также функция синхронизации с другими устройствами и защищенное облачное хранилище паролей.
Преимущества:
- высокая скорость работы;
- стабильность;
- инструменты блокировки рекламы и трекеров;
- режим приватного просмотра без сохранения истории;
- синхронизация на разных устройствах с использованием аккаунта Mozilla;
- гибкая настройка;
- кроссплатформенность.
Недостатки:
Операционная система: Windows, macOS, Linux
Ссылка на скачивание: Firefox Quantum
Puffin Secure Browser
Puffin Secure Browser – это один из самых быстрых приватных обозревателей от CloudMosa для Windows, Android и iOS. В нем используется раздельная архитектура, в которой некоторые обработки осуществляются на зашифрованных облачных серверах, что обеспечивает быструю загрузку страниц вне зависимости от сложности контента.
Также браузер обеспечивает возможность анонимного использования без сохранения истории, экономии трафика, а благодаря шифрованию им можно безопасно пользоваться при подключении к публичным точкам доступа Wi-Fi.
Особенности:
- высокая скорость загрузки страниц;
- работа с облачным хранилищем;
- режим безопасного просмотра;
- шифрование трафика для защиты от внешних воздействий;
- экономия трафика.
Недостатки:
Операционная система: Windows, Android, iOS
Iridium Browser
Еще один браузер, основанный на движке Chromium. Особенностью обозревателя является то, что он включает опцию автоматического предотвращения передачи данных об использовании. Она блокирует опцию сбора сведений о пользователе со стороны Google и полностью ее отключает. Отслеживание в браузере также отсутствует.
Дополнительно ко всему в браузере есть интегрированные дополнения для блокировки рекламы и небезопасных сайтов. Имеется инструментарий для отключения отслеживающих механизмов. Установка браузера осуществляется при помощи пакета msi.
Преимущества:
- интегрированные модули для блокировки рекламы и трекеров;
- предотвращение передачи данных на серверы;
- настраиваемый уровень приватности;
- совместимость с расширениями Google Chrome;
- привычный интерфейс Хрома.
Недостатки:
Операционная система: Windows, macOS
Ссылка на скачивание: Iridium Browser
Avast Secure Browser
Avast Secure Browser был создан для борьбы с угрозами и повышения скорости работы в интернете. Центр безопасности приложения контролирует надежность платежных шлюзов, защищает от фишинга и следящей рекламы, проверяет утечки идентификационных данных.
Отдельного внимания заслуживает удобство работы с видео – любой видеоконтент можно скачать с любого ресурса. YouTube, например, официально позволяет скачивать ролики только по Premium-подписке.
Преимущества:
- высокая скорость загрузки страниц;
- встроенный центр безопасности;
- блокировка рекламы и отслеживающих трекеров;
- безопасное выполнение финансовых операций;
- защита персональных данных, блокировка вредоносных ресурсов и загрузок;
- оповещения при утечке информации;
- автоматическое принуждение сайтов к шифрованию;
Недостатки:
Операционная система: Windows, macOS
Ссылка на скачивание: Avast Secure Browser
AVG Secure Browser
Последний браузер в нашем списке – AVG Secure Browser. Это быстрый веб-обозреватель для Windows и Android, построенный на основе Chromium и предлагающий пользователям анонимность и защиту персональных данных.
Одна из особенностей AVG Secure Browser – встроенный центр безопасности и конфиденциальности. Кроме режима анонимности, блокировки рекламы и отслеживающих скриптов, браузер также предлагает интеграцию с AVG Antivirus и AVG Secure VPN.
Преимущества:
- быстрый просмотр веб-страниц;
- центр безопасности и конфиденциальности;
- обнаружение и устранение угроз, защита от фишинговых атак, вредоносных программ и кражи персональных данных;
- режим невидимости;
- автоматическая блокировка рекламы;
Недостатки:
Операционная система: Windows, Android
Ссылка на скачивание: AVG Secure Browser
Заключение
Сегодня мы рассмотрели 10 лучших браузеров для анонимного веб-серфинга. Определенного фаворита выделить сложно: все они достаточно хорошо работают с конфиденциальностью и предлагают плюс-минус одинаковый функционал. Поэтому окончательный выбор остается за вами – скачивайте, тестируйте и находите своего лидера для безопасного серфинга.
Кроссбраузерность — одна из важнейших характеристик любого сайта, подразумевающая одинаково корректное отображение и работу ресурса в разных браузерах, а также их версиях. Для того, чтобы сайт правильно функционировал в Google Chrome, Яндекс.Браузере, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах, необходимо решить вопрос кроссбраузерности еще на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, мы рассказываем в данной статье.
Почему сайты могут по-разному отображаться и работать в разных браузерах
Причина этой проблемы — отличия в исходном коде. Особенно это касается старых версий браузеров.
Нередко определенные HTML-коды и CSS-стили по-разному воспринимаются и обрабатываются на разных движках, поэтому один и тот же элемент может в одном браузере отображаться и функционировать корректно, а в другом — нет.
В чем выражается кроссбраузерность сайта и почему она так важна
Если сайт некорректно отображается, неправильно работает в одном или нескольких популярных браузерах, то он неудобен для использования. Посетители будут уходить с него, не просмотрев и одной страницы. Таким образом, увеличится показатель отказов, а, как известно, этот поведенческий фактор ранжирования сайтов имеет весомое значение. Поисковые роботы посчитают такой сайт неинтересным и понизят его позиции в органической выдаче. О конверсиях, разумеется, не может быть и речи, поскольку пользователю не удалось ознакомиться с предлагаемой продукцией или услугой.
Проанализируем конкурентов, подберем запросы с низкой конкуренцией, проведем поисковую оптимизацию сайта, организуем внешнюю ссылочную массу, проработаем карточки компании на онлайн картах, проведем базовую UX-аналитику сайта. Над каждым проектом работает от 6 до 10 специалистов. Собственные разработчики для доработки сайта при необходимости. От вас - сайт, от нас - позиции в Яндекс/Google и трафик.
При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:
- сохранить структуру;
- не допустить развала верстки;
- избежать наложения текста на текст, изображения;
- сохранить читабельность информации.
Главное, чтобы клиенту было удобно читать, просматривать изображения и совершать действия на сайте с того браузера, которым он привык пользоваться.
Как протестировать сайт на кроссбраузерность
- Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, к слову, можно установить только на macOS.
- Использование специальных онлайн-сервисов. Этот способ прост и надежен. Таких сервисов достаточно много: есть и бесплатные, но с определенными ограничениями, и платные, но более функциональные и быстрые.
Здесь можно бесплатно проверить сайт на корректность отображения информации в различных браузерах (около 65) и операционных системах. В зависимости от степени загруженности сервера запросами проверка занимает от пяти минут до двух часов. Если вы хотите ускорить процесс, рекомендуем приобрести доступ к так называемой «приоритетной обработке».
Результаты тестирования предоставляются пользователю в виде скриншотов. На них видно, все ли в порядке с кроссбраузерностью сайта или над ней нужно еще поработать.
Из бесплатных сервисов также можно использовать CrossBrowserTesting, Browserling и т.д. Каждый из них отличается определенными функциональными особенностями и возможностями. Некоторые сервисы требуют пройти регистрацию, на других можно проверить сайт и без нее.
Если вы планируете использовать платный сервис, попробуйте BrowserStack . Этот мощный инструмент в режиме реального времени проверяет сайты на кроссбраузерность в более чем 2000 браузеров и устройств. А еще здесь есть бесплатный пробный период.
Кроме онлайн-сервисов, существуют и специальные приложения. К примеру, Multi-Browser Viewer. Этот инструмент позволяет проверить не только корректность отображения данных в разных браузерах, но и то, насколько правильно сайт функционирует.
Как добиться кроссбраузерности сайта
Предлагаем вам несколько самых действенных способов решения этой задачи:
1. Вендорные префиксы. Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
- нестандартно и прописано для определенного браузера;
- это эксперимент, который еще дорабатывается;
- реализует частичный функционал.
- -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 меняются местами.
Самые популярные браузеры на мобильных устройствах
Подводя итоги, стоит сказать, что добиться абсолютно идентичного отображения сайта во всех браузерах практически невозможно. Поэтому главной целью должен быть не единый дизайн, а читабельность текста, привлекательность изображений, доступность всех важных элементов и корректная работа функционала.
Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.
При всём разнообразии браузеров, независимых движков довольно мало, а новые появляются очень редко. Так что вместо десятков браузеров вам нужно поддерживать не больше пяти независимых движков. А ещё бывает, что браузеры с одним названием используют разные движки на разных платформах! В общем, всё очень сложно и интересно.
Самый популярный в мире браузерный движок — это Blink. Его использует Chrome и браузеры на его основе: Opera, Samsung Internet, Яндекс.Браузер и другие. Для работы с JavaScript, эти браузеры используют движок V8 — тот же, что и в Node.js. Один из главных разработчиков открытого движка Blink — Google, но в разработке активно участвует не меньше десятка компаний.
WebKit, другой популярный движок, очень похож на Blink. А вообще, наоборот — это Blink похож на WebKit. Это как? В 2013 году Blink форкнули из WebKit. По сути, скопировали. Google собрала вещи и сказала Apple, основному разработчику WebKit, что ей не нравятся её методы работы и теперь всё будет по-другому. Что поделать, опенсорс. И действительно, стало по-другому: основа у WebKit и Blink общая (префиксы webkit , например), но возможности уже довольно разные. На новом WebKit сейчас работают мобильные и десктопные браузеры Safari, на старом — встроенный браузер на Android до версии KitKat.
На движке Gecko работает браузер Firefox, когда-то очень популярный, а сегодня сохраняющий небольшую долю и важную роль в развитии веба и технологий. Префиксы у Gecko свои: moz — Mozilla, но для лучшей совместимости Firefox специально поддерживает некоторые свойства WebKit. Полноценный Firefox на Gecko работает на десктопных платформах и на Android. Параллельно с Gecko, Mozilla разрабатывает экспериментальный движок Servo и меняет некоторые части Gecko прямо на ходу. Например, в следующем Firefox 57 движок CSS заменят на новый.
Браузер Edge работает на всех современных платформах Microsoft, включая мобильные и Xbox. В его основе движок EdgeHTML — недавно как раз вышла его 16-я версия. EdgeHTML тоже форкнули от движка Trident или MSHTML, на котором работал браузер Internet Explorer. Удивительно похоже на историю Blink и WebKit: оба движка сохраняют общие префиксы ( ms и опять немного webkit для совместимости), но сильно отличаются по возможностям. EdgeHTML отбросил всякое старьё и смело развивается: пара крупных релизов в год и даже система голосования за фичи. Trident и IE закрыли в 2015 году.
Кроме движков, полезно ещё знать особенности платформ. Например, на мобильной платформе iOS куча браузеров, помимо встроенного Safari: Chrome, Firefox, Opera, Яндекс, UC и даже Edge недавно выпустили. Но все эти браузеры — просто оболочки над встроенным в систему движком WebKit. Правила этой платформы запрещают использовать другие браузерные движки. А вот на Android большинство браузеров поставляются со своими движками: Firefox, Opera, Samsung, но некоторые используют встроенный Chromium.
Ну вроде всё? А нет! Есть ещё отдельная группа необычных браузеров: они живут не на устройствах пользователей, а глубоко на серверах. На устройствах стоит только лёгкая оболочка, которая запрашивает адрес и получает с сервера набор скриншотов и ссылок, слепленных в сайт. Это прокси-браузеры и они безумно сжимают трафик, но по пути теряют: фирменные шрифты, фоновые картинки, градиенты, скруглённые уголки, тени и вроде того. Opera Mini — один из самых популярных прокси-браузеров. На сервере у него крутится устаревший движок Presto, а ставят его чаще всего на простые телефоны. Но есть и другие, подробнее вам расскажет Тим Кадлек.
Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack, которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.
Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.
Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.
Так что если для вас пиксель-пёрфект — это попасть в сетку и в горизонтальные размеры блоков, то у вас ещё есть шансы. Но если вы подкручиваете сглаживание текста, количество строк в абзаце или вертикальные размеры блоков с содержимым, строго по макету, вы тратите время впустую. Идеально кроссбраузерный сайт будет выглядеть одинаково чужеродно на всех платформах — ведь у каждой свои особенности, привычные пользователям.
И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.
Читайте также: