Что такое кроссбраузерная совместимость?
Это способность веб-приложений согласованно функционировать на всех типах комбинаций браузер-ОС-устройство с точки зрения того, как они выглядят и ведут себя на максимально возможном количестве платформ.
Как улучшить кроссбраузерность вашего веб-сайта?
- Не повторяйтесь (D.R.Y.)
Мы должны сделать наш код максимально простым и пригодным для повторного использования. напишите повторно используемую функцию (это может быть функция JavaScript или миксин Sass). Таким образом, мы можем свести к минимуму вероятность ошибок, сократив избыточный код.
2. Объявление DOCTYPE
Для любых веб-страниц должно быть объявлено ‹!DOCTYPE html›. Чтобы браузеры правильно интерпретировали html-файлы.
3. Подтвердите свой код
В некоторых сценариях веб-страницы будут вести себя по-разному. Ошибки может быть трудно обнаружить, и веб-страница по-прежнему обычно создается с небольшими, казалось бы, случайными проблемами. В этих сценариях отладка затруднена.
Что нужно сделать
- Написание хорошо выровненного кода
- Вставка комментариев везде, где это необходимо
- Отступы и сопоставление открывающих-закрывающих фигурных скобок
Инструменты для проверки кода:-
- HTML-валидатор W3C
- Валидатор CSS Jigsaw
- Форматировщик JS для HTML
- CSS-ворс
- JS Линт
Препроцессоры, такие как SCSS, не будут компилироваться, если есть ошибки. Это неплохо, так как они обычно указывают, где ошибка, и это может помочь нам ее исправить.
4. Используйте сброс CSS
По умолчанию браузеры могут применять к веб-сайту собственные стили по умолчанию.
Чтобы решить эту проблему со стилями по умолчанию, мы можем использовать некоторый код для сброса значений по умолчанию. Вот ссылки, чтобы получить более подробную информацию о сбросах CSS
5. Проверьте поддержку ваших свойств CSS
Некоторые свойства не будут поддерживаться во всех браузерах. Мы можем проверить, поддерживается ли конкретное свойство, используя этот веб-сайт.
6. Предложите запасные решения
В некоторых сценариях мы не можем избежать использования свойства, которое не поддерживается в других браузерах. Возможно, нам придется использовать резервный файл для определенных браузеров, чтобы избежать кроссбраузерных проблем. Например:
7. Облачное тестирование браузера
Кросс-браузерное тестирование может быть эффективно проведено на этих веб-сайтах.
8. Поддерживайте совместимость макетов
Любое приложение, которое мы собираемся разработать, должно быть адаптивным. Он должен работать на всех устройствах, платформах и браузерах, включая все версии. Макет приложения должен быть идеальным и стандартным во всех средах.
Подробнее читайте в разделе Кроссбраузерное тестирование адаптивных приложений.
Причины несовместимости макета могут быть:
- Дизайн макета не отвечает на мобильных устройствах.
- Различия в рендеринге макета современными браузерами.
- Современные браузеры не поддерживают некоторые макеты.
Методы обеспечения совместимости макета
- Метатег окна просмотра HTML – обеспечивает правильное распределение контента на экране мобильного устройства.
- Многостолбцовые макеты CSS. Это помогает поддерживать правильное расположение содержимого нескольких столбцов в соответствии с макетом контейнера.
- CSS Flexbox и Grid. Эти методы помогают размещать дочерние элементы на основе их содержимого и пространства, доступного для рендеринга.
9. Протестируйте на реальных устройствах
Чтобы избежать проблем с кросс-браузерной совместимостью позже, мы должны протестировать приложение на реальных настольных компьютерах, мобильных телефонах, планшетах и ноутбуках.
В нескольких сценариях мы используем инструменты кросс-браузерного тестирования. Хотя есть инструменты, которые позволяют нам выполнять кросс-браузерные тестовые случаи вручную или позволяют автоматизировать их, а затем выполнять, нам нужно решить, что нам нужно.
Testsigma, инструмент для автоматизированного кросс-браузерного тестирования, предоставляет пользователям немедленный доступ к тысячам комбинаций браузер-ОС. Мы можем запускать тестовые случаи параллельно на реальных устройствах за меньшее время. Мы можем выбирать из тысяч сред, доступных в облаке, или тестировать на локальных компьютерах в наших офисных помещениях.
10. Используйте фреймворки, поддерживающие кросс-браузерную совместимость
Существует несколько фреймворков JS, которые упрощают разработку веб-сайтов, совместимых с разными браузерами. Некоторые из самых известных:
11. Использование библиотеки
Существует множество библиотек (собственных и сторонних), которые могут поддерживаться не всеми браузерами. Перед использованием библиотеки рекомендуется провести тщательный анализ с точки зрения поддержки браузеров, поддержки функций и т. д. Вам также следует проверить «историю разработки» библиотеки, так как не должно быть так, чтобы было очень мало обновлений для библиотека, и как только вы используете библиотеку, для нее нет обновлений!
12. Повторное использование и сокращение количества компонентов
13. Протестируйте заранее
Хорошо начинать кроссбраузерное тестирование, как только будет готова одна страница приложения. Это поможет выявить проблемы совместимости на ранних этапах цикла разработки и будет быстро исправлено. Мы не должны ждать более поздних стадий цикла разработки, чтобы начать тестирование.
Поскольку тестирование кросс-браузерной совместимости требует тестового покрытия ряда сред. Следовательно, мы должны попытаться свести к минимуму стресс и проблемы в более поздней части цикла.
Сообщение об ошибках
Если вы обнаружите какие-либо ошибки в браузерах, вы должны сообщить о них:
- Файрфокс Багзилла
- Отслеживание ошибок EdgeHTML
- "Сафари"
- "Хром"
- Опера
