Эта статья является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Вопрос «какие браузеры должен поддерживать мой сайт / приложение?» Часто задают клиенты и разработчики. Простой ответ — это список N основных приложений. Но стала ли эта политика неактуальной?
Какие браузеры наиболее часто используются?
Десятка лучших настольных браузеров по версии StatCounter за май 2017 года:
- Chrome — 59,37% рынка
- Firefox — 12,76%
- Сафари — 10,55%
- IE — 8,32%
- Край — 3,42%
- Опера — 1,99%
- Android (планшет) — 1,24%
- Яндекс.Браузер — 0,48%
- UC Browser — 0,41%
- Кок Кок — 0,33%
На мобильные устройства сейчас приходится 54,25% всего использования Интернета, поэтому нам также необходимо изучить десятку лучших браузеров телефонов:
- Хром — 49,23%
- Сафари — 17,73%
- UC Browser — 15,89%
- Интернет Samsung — 6,58%
- Опера — 5,03%
- Android — 3,75%
- IEMobile — 0,68%
- BlackBerry — 0,26%
- Край — 0,15%
- Nokia — 0,12%
Мировая статистика не рассказывает всей истории:
- Шаблоны значительно различаются по регионам. Например, Яндекс — второй по популярности российский браузер (доля 12,7%). Sogou является третьим по популярности браузером в Китае (6,5%). Opera Mobile / Mini имеет 28% долю в Африке.
- Новые выпуски браузера появляются регулярно. Chrome, Firefox и Opera получают обновления каждые шесть недель; было бы нецелесообразно проверять версии более чем на несколько месяцев назад.
- Одни и те же браузеры могут работать по-разному на разных устройствах и операционных системах. Chrome доступен для различных выпусков Windows, macOS, Linux, Android, iOS и ChromeOS, но это не везде одно и то же приложение.
- Существует очень длинный хвост старых и новых, странных и замечательных браузеров на различных устройствах, включая игровые приставки, устройства для чтения электронных книг и умные телевизоры.
- Аналитика вашего сайта никогда не будет соответствовать глобальной статистике.
Браузеры такие разные?
Несмотря на органическое разнообразие приложений, все браузеры имеют одну и ту же цель: отображать веб-страницы . Они достигают этого с помощью механизма рендеринга, и существует некоторое перекрестное опыление:
- Webkit используется в Safari на MacOS и iOS.
- Blink — это форк Webkit, который сейчас используется в Chrome, Opera, Vivaldi и Brave.
- Геккон используется в Firefox.
- Трайдент используется в Internet Explorer.
- EdgeHTML — это обновление Trident, используемое в Edge.
Большинство браузеров используют один из этих движков. Это разные проекты с разными командами, но компании (в основном) сотрудничают через W3C, чтобы гарантировать, что новые технологии воспринимаются всеми одинаково. Браузеры ближе, чем когда бы то ни было, а современные приложения для смартфонов соответствуют их настольным аналогам.
Тем не менее, нет двух браузеров, которые будут отображаться одинаково. Большинство различий невелики, но они становятся более выраженными по мере продвижения к передовым технологиям. Конкретная функция может быть полностью реализована в одном браузере, частично реализована в другом и вообще отсутствует.
Может ли мой сайт работать в любом браузере?
Да. Такие методы, как прогрессивное улучшение (PE), устанавливают базовую линию (возможно, только HTML), а затем улучшают с помощью CSS и JavaScript, когда доступна поддержка. Последние браузеры получают современный макет, анимированные эффекты и интерактивные виджеты. Древние браузеры могут получать только нестандартный HTML. Все остальное становится чем-то промежуточным.
PE хорошо работает для контент-сайтов и приложений с базовыми функциями на основе форм. Это становится менее практичным, когда вы переходите к приложениям с богатыми пользовательскими интерфейсами. Ваше новое совместное приложение для редактирования видео вряд ли будет работать в десятилетней IE7. Он может не работать на устройствах с маленьким экраном в сети 3G. Возможно, можно предоставить альтернативный интерфейс, но в результате получится отдельное, неуклюжее приложение, которое мало кто захочет использовать Стоимость будет непомерно высокой, учитывая размер пользовательской базы устаревшего браузера.
Рекомендации для владельцев сайтов
Владельцы сайта должны понимать следующие основные принципы и ограничения Интернета.
Сеть не печатается!
Ваш сайт / приложение не будет выглядеть одинаково везде. Каждое устройство имеет свою ОС, браузер, размер экрана, возможности и т. Д.
Функциональность может отличаться
Ваш сайт может работать для всех, но опыт и возможности будут разными. Даже такое базовое поле, как поле ввода даты, может иметь различные возможности, но в идеале основное приложение останется работоспособным.
Оцените свой проект
Быть реалистичным. Является ли это сайтом контента, простым приложением, настольным приложением, быстрой игрой и т. Д. Установите базовый уровень совместимости браузера. Например, он должен работать в большинстве двухлетних браузеров с шириной экрана 600 пикселей через быстрое соединение Wi-Fi.
Оцените свою аудиторию
Не полагайтесь на глобальную статистику браузера. Кто основные пользователи? Они новички в IT или очень технические? Это частные лица, небольшие компании или правительственные организации? Они сидят за столом или в движении? Ни одно приложение не подходит для всех — сначала сконцентрируйтесь на основных пользователях.
Изучите аналитику вашей существующей системы, где это возможно, но оцените основные данные. Если ваше приложение не работает в Opera Mini, у вас вряд ли будут пользователи Opera Mini. Вы заблокировали значительную часть своего рынка?
Изменение происходит
Удивительно, что веб-страница, написанная двадцать лет назад, работает сегодня. Это не обязательно будет красиво или удобно, но браузеры остаются обратно совместимыми. (В основном. Тег <blink> Однако технология развивается. Чем сложнее ваш сайт или приложение, тем больше вероятность, что оно потребует постоянного обслуживания.
Рекомендации для веб-разработчиков
С небольшой осторожностью можно поддерживать огромное количество браузеров.
Охватите сеть!
Сеть — это независимая от устройств платформа. Контент и более простые интерфейсы могут работать везде: современный ноутбук, функциональный телефон, игровая приставка, IE6 и т. Д. Изучите основы прогрессивного улучшения. Даже если вы решите не принимать его для полного применения, будут функциональные возможности, в которых оно станет бесценным.
Принять защитные методы развития
Рассмотрите проблему, прежде чем доберетесь до ближайшего предварительно написанного модуля, библиотеки или фреймворка. Поймите последствия этой технологии, прежде чем начать. Фреймворки должны предоставлять список поддержки браузера, потому что они были протестированы в ограниченном количестве приложений.
Узнайте об ограничениях и особенностях браузера. Например, если вы рассматриваете диаграмму SVG, имейте в виду, что она может выглядеть странно в IE9 до 11 и не работать в IE8 и ниже. Это не означает, что это двоичный выбор отказа от SVG или отказа от поддержки IE. Всегда есть компромиссы, которые не влекут за собой значительного развития. Например:
- принять рендеринг SVG странно, но его можно использовать
- показывать только таблицу данных в IE, или
- обеспечить загрузку SVG, которую пользователи IE могут открыть в другом месте.
Тестируйте рано и тестируйте часто
Вы не можете протестировать каждое устройство, но разработка для одного браузера бесполезна.
Постоянно тестируйте свой проект в различных приложениях. Отказ от тестирования до конца будет иметь катастрофические последствия. Нам легко обвинять инструменты и недостатки браузера, но большинство проблем может быть исправлено в процессе разработки, если они обнаружены на ранней стадии.
Это не значит, что все должны работать одинаково в каждом браузере каждый раз. Характеристика регрессий неизбежна. Например:
- Прогрессивные веб-приложения не работают в автономном режиме на iPhone и iPad — но работа в Интернете в порядке.
- CSS Grid не поддерживается в IE — но должны быть приемлемы запасные варианты float, flexbox или full-width.
- Настольная версия Firefox не отображает календарь для полей даты, но пользователи все равно могут его ввести.
Установите на свой компьютер для разработки несколько браузеров. Пользователи Mac и Linux могут получить инструменты тестирования Microsoft Edge и IE по адресу developer.microsoft.com/microsoft-edge/ . Пользователям Windows и Linux сложнее протестировать Safari; Сервисы онлайн-тестирования, такие как BrowserStack, являются самым простым вариантом.
Современные браузеры имеют отличные средства мобильной эмуляции, но используют несколько реальных устройств, чтобы оценить сенсорное управление и производительность на медленном оборудовании и сетях.
Используйте HTTPS на вашем конце
Сеть постепенно делает HTTPS предпочтительным протоколом, и эта тенденция будет продолжаться. Google Chrome даже начинает показывать, что не-HTTPS-сайты небезопасны, что является хорошей причиной для настройки вашего сайта на использование HTTPS. Наш партнер по веб-хостингу SiteGround , например, облегчил своим клиентам переход на HTTPS. Для этого они автоматизировали установку SSL-сертификатов Let’s Encrypt для всех новых учетных записей WordPress, а для существующих они сделали возможным переход на HTTPS одним щелчком мыши.
Вы не ответили на вопрос!
Вопрос «какие браузеры вы должны поддерживать?» Стал слишком строгим. Предположим, ваш ответ был просто «Chrome»:
- на каких устройствах и ОС он работает?
- какой диапазон размеров экрана будет поддерживаться?
- на какую версию вы ссылаетесь? Последний? Хром 10 и выше?
- что происходит, когда выходит новая версия Chrome?
- что произойдет в других браузерах, когда Chrome фактически станет средой выполнения вашего приложения?
Предоставление списка поддержки браузера стало непрактичным для клиентских проектов. Возможно, лучший ответ: «мы разработаем ваш проект в соответствии с предполагаемой демографией, а затем протестируем как можно больше устройств, операционных систем, браузеров и версий в соответствии с бюджетом и временными ограничениями» . Даже тогда вы будете скучать по старению Blackberry, на котором настаивает генеральный директор.
Разрабатывайте для Интернета, а не для браузеров .