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

Кроссбраузерность — корректная работа сайта в разных браузерах

Кроссбраузерность — корректная работа сайта в разных браузерах

Браузеров много и они несколько по‑разному отображают страницы. Способность сайта корректно отображаться в разных браузерах называется кроссбраузерность.

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

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

Современные сайты обычно адаптируют под Internet Explorer начиная с версии 8 и под другие браузеры (Google Chrome, Mozilla Firefox и Opera) актуальных на момент разработки версий. Разработка под устаревшие версии браузеров, как правило, не особо рациональна: это приводит к снижению сопровождаемости проекта и иногда заставляет отказываться от современных технологий в разработке.

Корректное отображение в разных браузерах — важное требование в ТЗ, но тут важно перечислить только те браузеры, поддержка которых действительно нужна для эффективности проекта. Всё просто: на «затачивание» вёрстки под большое количество версий браузеров требуются ресурсы, которые оплачиваются из кармана Заказчика, а эти затраты должны окупиться — если доля пользователей какой‑либо версии браузера в абсолютном выражении будет составлять, например, 20 человек в год, то обычно нет смысла тратить время на оптимизацию под этот браузер.

фронтендвеб-разработка

Статья опубликована в 2014 году

Тематические статьи

Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript.

Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтэнд‑разработке никаких других языков не используется.

фронтенд

JavaScript

CSS

HTML

веб-разработка

Статья опубликована в 2014 году

Чек-лист проверки фронтенда

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

фронтенд

HTML

CSS

JavaScript

веб-разработка

Статья опубликована в 2014 году

JPEG и PNG — в чём разница форматов?

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

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

дизайн

фронтенд

быстродействие

веб-разработка

Статья опубликована в 2019 и обновлена в 2022 году

Сжатие изображений с потерями и без потерь

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

На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.

фронтенд

дизайн

веб-разработка

Статья опубликована в 2019 году

Адаптивные изображения

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

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

дизайн

UX / UI

фронтенд

CSS

веб-разработка

адаптивный веб-дизайн

Статья опубликована в 2019 году

БЭМ и независимые блоки

Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.

веб-разработка

фронтенд

HTML

CSS

методологии разработки

Статья опубликована в 2014 году

Браузерное или клиентское кеширование

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

быстродействие

фронтенд

веб-разработка

Статья опубликована в 2014 году

Ajax-навигация Turboliks & Wiselinks

Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.

быстродействие

фронтенд

JavaScript

веб-разработка

Статья опубликована в 2014 году

History API и HASH‑навигация на Ajax‑сайтах

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

фронтенд

JavaScript

веб-разработка

Статья опубликована в 2014 году

Основы кроссбраузерной верстки — что нужно знать | by Ira Stoetskaya

8 min read

·

Apr 21, 2020

Корректное отображение во всех нужных браузерах на сегодняшний день — must have для любого сайта. Любой маркетолог расскажет, как это важно для лояльности пользователей и конверсии, как это влияет на user experience и еще много аргументов за, но это буду не я 🙂

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

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

Почему этот термин вообще вообще возник?

На рынке браузеров существует несколько крупных игроков, которые часто по-разному отображают те или иные HTML элементы и по-разному имплементируют те или иные свойства CSS. Появляется все большее количество новых мобильных устройств со своими браузерами. Internet Explorer продолжает медленно, но уверенно терять своих пользователей, которые переходят в более современные браузеры. Chrome продолжает насиловать оперативную память компьютеров. Microsoft не устает пытаться реабилитировать Edge и с переходом на движок Chromium в марте 2020 года вышел на второе место по количеству пользователей. Все это и многое другое происходит на рынке браузеров, и веб-разработчикам приходится с этим жить, и все это учитывать.

Какие браузеры нужно поддерживать?

Хорошей практикой в любом проекте, будь то продуктовая компания с большим опытом на рынке, или аутсорс, поддерживающий legacy проект или только появившийся старт-ап — изучение целевой аудитории и составление списка поддерживаемых браузеров на основе аналитических данных (чаще всего с помощью инструментов Google Analytics и/или Yandex Metrica).

В Google Analytics собираются примерно такие данные (разумеется, их можно настроить под свои нужды, тут только пример):

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

Что делать, если таких данных нет? Например, вы только-только начали разрабатывать сайт?

Если у вас нет четких требований от маркетологов или других ЛПР (лица принимающие решения) о списке поддерживаемых браузеров, обычно за основу берутся самые доминирующие игроки рынка — Internet Explorer (обычно только 11 версии), Google Chrome, Opera, Мozilla FireFox, Safari, Microsoft Edge — и ориентируются на последние 2–3 их версии.

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

1. Используйте сброс или нормализацию стандартных стилей браузера. Reset.css или normalize.css. Если кратко говорить о подходах, то смысл reset-а в том, чтоб большинство дефолтных стилей браузеров обнулить (все отступы, форматирование и т.д) и на этой основе писать свое. Смысл normalize — привести все эти стили к единому виду и значениям. Подробнее можно изучить по ссылкам:) Есть много сторонников первого подхода, есть много сторонников второго. Можно очень долго с пеной у рта обсуждать преимущества или недостатки каждого из них, но всегда нужно помнить, что инструмент должен подходить под задачу. Выбирайте то, что вам подходит.
2. Используйте вендорные префиксы, где это необходимо. Вендорные префиксы — это приставки, добавляемые в свойства CSS, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт CSS свойств. То есть, например, если какой-нибудь из браузеров решил добавить что-нибудь крутое, но этот функционал и правила его поведения еще до конца не оговорены и не утверждены с составителями стандартов, то браузер может имплементировать его с соответствующей приставкой. Свойство с такой приставкой будет работать только в браузере, для которого эта приставка актуальна. Существуют следующие вендорные префиксы:

• -o- для браузера Опера
• -moz- для браузеров из семейства Mozilla
• -ms- для Internet Explorer 8
• —webkit- префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome (ну и конечно же, новый Edge:)
• -icab- для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
• -khtml- KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем.

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

::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: pink;}::-moz-placeholder { /* Firefox 19+ */color: pink;}:-ms-input-placeholder { /* IE 10+ */color: pink;}:-moz-placeholder { /* Firefox 18- */color: pink;}

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

Но так как мы в 2020, то скорее всего в вашем проекте используется какой-нибудь сборщик, Gulp или Webpack. Для них есть множество плагинов, в частности autoprefixer, которые сами добавят нужные вендорные префиксы в ваш CSS код. Для того, чтобы эти плагины понимали, какие браузеры нужно поддерживать, обычно используется такая вещь, как Browserslist. Просто перечислите настройки и плагины сами добавят эти префиксы там, где нужно.

3. Новые свойства CSS и JS перед использованием проверяйте на сайте caniuse.com. Это ресурс, который отслеживает поддержку самыми популярными браузерами различных свойств CSS и JS. Если вы хотите использовать какую-то технологию, но точно не уверены, кроссбраузерная ли она, и можно ли ее использовать в соответствии с вашими правилами поддержки браузеров, заходите на caniuse и проверяйте. Например, вы думаете, использовать ли в проекте position: sticky для своего хэдера. Вы в процессе изучения данного свойства могли заметить, что иногда авторы статей прямым текстом предупреждают, что технология еще не до конца имплементирована во все браузеры. Идем на caniuse. В поисковую строку вводим position:sticky

И видим таблицу. В данной таблице показано — браузеры, их версии и эти вещи окрашены в разные цвета.

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

Внизу под таблицей есть разные вкладки, которые тоже стоят внимания. Known issues, Notes — это пометки по свойству, о багах или особенностях его поведения в разных браузерах, о которых широко известно. С этой информацией тоже стоит ознакомиться. И тут можно ее искать, если вы столкнулись с багом, связанным с кроссбраузерностью (у вас что-то некорректно работает только в одном браузере, а в остальных все ок).

Глянули? Подходит для вашего проекта? Подходит по всем параметрам, используйте. Не подходит — или не используйте и ищите другие варианты или используйте полифиллы

4. Тестируйте свою работу в разных браузерах. Установите себе самые популярные браузеры последней версии. Некоторые браузеры вы, конечно, не сможете себе установить (например Safari для Windows не выпускают с 2012 года), но все самые популярные, типа Chrome, Mozilla Firefox, Opera, Internet Explorer 11, Edge и так далее у вас должны стоять. Вы должны проверять свою работу, как минимум на тех, что для вашего проекта обозначены обязательными.

Скорее всего, вы не работаете одновременно в Windows, Ubuntu и Mac OS. Наиболее вероятно также то, что у вас на компьютере всего 1 операционная система, которой вам вполне достаточно для продуктивной работы. Но, допустим, вам поставили баг на какое-то окружение, которое вы физически не можете воспроизвести (как вариант — Chrome 79 версии в Windows 10, а вы на Mac OS и в гробу видали этот Windows).

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

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

5. Интересуйтесь последними обновлениями в браузерах и во фронт-энде в целом. Масса сайтов, типа habr.ru, dou.ua, codeguida.com публикуют подборки с самыми интересными и свежими материалами по фронт-энду. В них часто мелькают различные обновления браузеров, и новинки в веб-разработке. Читайте эти подборки, интересуйтесь обновлениями, держите руку на пульсе.

6. Если вам ставит кто-либо (чаще всего отдел тестирования) баг по кроссбраузерности, попытайтесь выяснить как можно больше деталей. Например, вам ставят баг — в Mozilla Firefox кнопка некликабельна, необходимо исправить. Такой информации обычно недостаточно. Выясните, повторяется ли этот баг только в Mozilla Firefox, или в остальных браузерах тоже. В каких версиях браузера этот баг повторяется, или, возможно, во всех. В какой операционной системе (Ubuntu, Windows, MacOS, может другие). Эти вопросы помогут вам локализировать проблему и знать, где ее воспроизвести, подробно ее изучить и правильно решить. И эти вопросы важно задавать, так как частенько случается, что баг ставят на один браузер, но по факту, функционал не работает нигде. И тогда, это не совсем проблема браузера 🙂

7. Когда случаются конкретные ошибки, как бы это очевидно не звучало — гуглите. Пример из реальной практики: в один прекрасный момент тестировщики заметили, что в браузерах Safari на iOS определенной версии текст в кнопках не выровнен по центру. Это было характерно только для браузеров Safari на iOS 9 версии и ниже, что было выяснено как путем самостоятельной проверки, так и общения с тестировщиками. Текст в этих кнопках выравнивался с помощью flex. Я зашла на browserstack.com, в эмулятор нужного окружения, и увидела, что на данном окружении, почему-то эффект не работает. Путем долгого поиска в интернете по разнообразнейшим запросам, был найден комментарий на stackoverflow, в котором было написано, что тег button, согласно философии Safari, не может быть flex-контейнером. Flex-элементом он может быть, но контейнером — нет. Почему? Ну, так решили, даже вроде логика какая-то была. Потом, конечно опомнились и в следующих версиях исправили, но мне-то надо, чтоб работало и в этой. Все, избавились от display: flex, выровняли по-другому, баг исправлен.

В процессе решения вопроса я использовала все, что описала выше — browserstack, caniuse (где искала возможные проблемы с флексами), также помогает MDN, https://developer. mozilla.org/ где частенько можно встретить описание ошибок в конкретных браузерах. Ну и также, мне помогло знание английского языка, которое позволило мне изучать много информации по моим гугловским запросам и высокая стрессоустойчивость в тот момент, когда я преодолевала все стадии — принятия, отрицания и так далее 🙂

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

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

Самая надежная платформа для тестирования приложений и кросс-браузерного тестирования

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

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

Протестируйте свои веб-сайты

в реальном времени

Ручное кросс-браузерное тестирование

Автоматизация

Сетка автоматизации браузера

Percy 90 008

Визуальное тестирование и обзор

Тестирование мобильных приложений

app live

Ручное тестирование реальных устройств

appautome

Сетка автоматизации реального устройства BrowserStackWikimedia использует BrowserStack

Нам доверяют более 50 000 клиентов по всему миру

Нам доверяют более 50 000 клиентов и более 6 миллионов разработчиков по всему миру

Преимущества

Готово к работе

Отсутствие настройки и обслуживания для ускорения выпусков.

Полное покрытие

Мгновенный доступ к более чем 3000 браузерам и реальным устройствам iOS и Android.

Бескомпромиссная безопасность

Совместимость с SOC2. Безупречные браузеры и устройства, доступные всем и всегда.

Истории наших клиентов

Брайан Лукас
Старший штатный инженер-программист

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

Приянка Гальдер
Старший менеджер по проектированию качества

GoodRx сокращает время тестирования на 90%, выпуская 15 выпусков в день

9 0002 Екатерина Глущук
Старший Менеджер по продукту

OLX обеспечивает бесперебойную работу для локализованной глобальной аудитории

Мартин Шнайдер
Менеджер по доставке

Крупнейшая азиатская торговая площадка использует BrowserStack для масштабирования автоматизации

Шривидья Джаярам
Менеджер по тестированию

Sainsbury использует автоматизацию тестирования для удвоения частоты выпуска

Парк Хьюно
Инженер Full Stack

Юридическое открытие Платформа Logikcull сокращает время тестирования на 73%

Обратитесь к нашим клиентам

Только что поиграл с BrowserStack: Довольно круто, мгновенный доступ к браузеру на виртуальной машине с инструментами разработки.

Большое спасибо @browserstack за то, что позволили мне бесплатно использовать их продукт
для исправления проблем с браузером в React DnD.

@BrowserStack делает шаги, обновляя свою программу #opensource! Мы проводили с ними испытания и теперь действительно можем продвинуться вперед с некоторыми из их новых инициатив.

Легко интегрируйте BrowserStack в вашу систему

Мы работаем с теми инструментами и платформами, которые вы используете. Тестируйте код разработки из Visual Studio и бета-приложений из App Center. Запускайте автоматические тесты для каждой фиксации из конвейера CI/CD и получайте результаты тестов непосредственно в Jenkins и Slack. Сообщайте об ошибках напрямую в Jira и воспроизводите их одним щелчком мыши.

Просмотреть все интеграции

Готовы попробовать?

Более 6 миллионов разработчиков и 50 000 команд тестируют BrowserStack. Присоединяйся к ним.

Документация разработчика Главная | Документы BrowserStack

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

Протестируйте свои веб-сайты

Автоматизация

Селен

Запускайте тесты Selenium в настольных браузерах, на реальных устройствах iOS и Android.

Автоматизация

Кипарис

Запустите тесты Cypress на более чем 100 версиях Windows и macOS

Автоматизация

Драматург

Запускайте тесты Playwright в более чем 100 браузерах на Windows и macOS

Автоматизировать

Кукольник

Проведите тесты Puppeteer в более чем 100 комбинациях браузера/ОС

Автоматизация

API тестирования JS

Запуск простого кода Javascript в браузерах с использованием JS Testing API

Перси: визуальное тестирование

Перси

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

Живой

Жить

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

Протестируйте свои мобильные приложения

Автоматизированное приложение

Аппиум

Протестируйте свои нативные и гибридные приложения с помощью Appium на реальных устройствах Android и iOS.

Автоматизированное приложение

Эспрессо

Протестируйте собственные и гибридные приложения с помощью Espresso на реальных устройствах Android.

Автоматизированное приложение

XCUITest

Протестируйте собственные и гибридные приложения с помощью XCUITest на реальных устройствах iOS.

Автоматизированное приложение

Эрл Грей

Протестируйте собственные и гибридные приложения с помощью EarlGrey на реальных устройствах iOS.

App автомат

Флаттер

Протестируйте собственные и гибридные приложения с помощью Flutter на реальных устройствах Android и iOS.

Автоматизированное приложение

Детокс Android

Протестируйте свои приложения React Native с помощью Detox на реальных устройствах Android.

Живое приложение

Приложение в прямом эфире

Интерактивное тестирование нативных и гибридных мобильных приложений на реальных устройствах iOS и Android.

App percy: визуальное тестирование

Приложение Перси

Запускайте визуальные тесты и просматривайте изменения при каждой фиксации на реальных устройствах iOS и Android.

Управление тестированием и оптимизация

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

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

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

Проверка наблюдаемости

Проверка наблюдаемости

Интеллектуальные отчеты по тестированию, отладка и анализ для разработчиков.

Проверьте свои приложения Smart TV

Автоматизированное приложение

Аппиум

Протестируйте свои приложения Smart TV с помощью Appium в реальном облаке тестирования Smart TV с помощью App Automate.

Другая документация и ссылки

Локальное тестирование

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

Скриншоты

Создание нескольких снимков экрана с помощью API снимков экрана.

Спидлаб

Руководство по использованию SpeedLab и получению информации из результатов тестирования.