Хорошее приложение или веб-сайт в последнее время стали гораздо большим, чем статическая коллекция элементов разделения. Современные веб-сайты – это интерактивные, высокопроизводительные приложения, которые помогают в выполнении сложных сквозных бизнес-процессов. JavaScript внес большой вклад в то, чтобы вывести нас на этот уровень. Он чрезвычайно популярен среди разработчиков, но не поддерживается одинаково всеми браузерами. Разработка кроссбраузерно совместимых веб-страниц запуск javascript иногда является сложной задачей. Помощь разработчикам в решении этой задачи была одной из движущих сил нашей разработки платформы тестирования совместимости с браузерами .
При разработке веб-сайта обычно вы используете комбинацию Javascript, CSS и HTML, при этом CSS3 и HTML5 являются последними, и мы любим последние версии, поэтому, как и ожидалось, это первый выбор разработчиков.
Если вы также разрабатываете свой веб-сайт с использованием этих технологий (не обращайте внимания на новейшие или нет), вам может потребоваться позаботиться о некоторых моментах, чтобы сделать ваш веб-сайт подходящим для любого браузера.
Так давайте начнем шаг за шагом.
Самое первое, что делает большинство разработчиков, – это начинает разработку веб-сайта для своего любимого браузера или, в некоторых случаях, браузера, наиболее часто используемого вашей возможной целевой аудиторией. Давайте предположим, что это последняя версия Google Chrome, что обычно и происходит. Веб-сайт использует все новейшие технологии CSS, JS и фреймворка. Веб-сайт красив с потрясающими анимированными переходами и чистыми шрифтами. И самое главное, он работает идеально. Исправление: Отлично работает в последнем браузере Chrome.
Цунами наступает, когда вы решаете пойти протестировать его для различных версий IE или Safari. Теперь ничто не работает идеально, каждый раздел укладывается неправильно, а некоторые элементы
Как я уже объяснял, IE по-прежнему занимает значительную долю рынка и является одним из самых недооцененных браузеров на рынке. Это может привести к ошибкам в вашем развитии. Итак, первый и самый необходимый шаг – это определение идеальной стратегии кроссбраузерного тестирования .
Итак, теперь вы должны протестировать его для разных браузеров и, как я уже сказал, для недооцененных и известных тоже 😉
Пришло время вам найти некоторые из основных ошибок. Итак, давайте решим их.
Не Работает В Разных Браузерах?
Если вы обнаружите, что ваш веб-сайт не работает в браузерах, пришло время внести некоторые незначительные изменения в ваш код. Во время кроссбраузерного тестирования вы бы заметили, что ваш веб-сайт не работает в некоторых конкретных браузерах. Причиной могут быть некоторые используемые технологии и функции, которые не поддерживаются некоторыми браузерами. Итак, если ваш веб-сайт не работает в разных браузерах, вам необходимо выяснить, в чем проблема, возникающая с этим конкретным браузером.
Найдите проблемы с кроссбраузерной совместимостью с мобильным браузером Opera Mini:
Если вы используете такие элементы, как:
- CSS3 3D-преобразования
- 2D-преобразования
- Фоновое изображение
- Особенности формы HTML5
- Семантические элементы
- Псевдокласс CSS, отображаемый в качестве заполнителя
- API веб-аутентификации
- Тема-цветной мета-тег
и т.д., то ваш веб-сайт не будет работать в браузерах Opera Mini.
Найдите проблемы с кроссбраузерной совместимостью с браузером Firefox:
Firefox обычно поддерживает самые новейшие технологии. Mozilla является законодателем моды в области веб-технологий. Тем не менее, все еще есть некоторые элементы, которые браузеры firefox поддерживают не в полной мере, такие как:
- API файловой системы и FileWriter
- База данных Web SQL
- Анимация XHTML+SMIL
- Шрифты EOT
Все это основные элементы, которые не поддерживаются последней стабильной версией Firefox (60). Таким образом, использование этих технологий и стилей может привести к тому, что ваш веб-сайт будет работать даже в последних версиях Firefox.
Найди проблемы с кроссбраузерной совместимостью с Safari
Общие веб-рабочие, привязка переполнения CSS, API веб-аутентификации, если они используются, вообще не будут работать в браузерах safari. Однако safari частично поддерживает некоторые функции, такие как функции форм HTML5, CSS-маски. Таким образом, эти функции, если они используются, также могут привести к тому, что ваш веб-сайт не будет работать должным образом в браузерах Safari.
Если вы используете некоторые другие функции и технологии и задаетесь вопросом, поддерживает ли это какой-либо браузер или нет, вы можете узнать это самостоятельно, используя CanIUse . Итак, чтобы убедиться, что вы использовали все поддерживаемые браузером технологии, вы можете просто ввести технологию и сравнить браузеры. Он покажет вам результат, подобный:
Итак, как вы можете видеть, API веб-аутентификации поддерживается только в последних версиях браузеров Edge, Firefox и Chrome, поэтому он не будет работать в других версиях, демонстрирующих проблемы кросс-браузерной несовместимости. Аналогичным образом вы можете проверить наличие других веб-технологий и функций.
Помимо предварительной проверки того, поддерживается ли технология браузером, есть несколько основных рекомендаций, которым вы должны следовать, чтобы убедиться, что конечный веб-сайт совместим с несколькими браузерами.
Проверьте Наличие Документа Doctype
Первое, что вам нужно убедиться, это то, что вы добавили DOCTYPE в свой HTML-файл.
Если вы этого не сделали, сделайте это немедленно.
Doctype в основном помогает вашему браузеру распознавать, на каком языке написан код вашего веб-сайта. Если вы этого не укажете, некоторые умные браузеры сами это поймут, но какой-нибудь тупой браузер не сможет понять, что произошло, и они отобразят какой-то элемент вашего веб-сайта таким образом, который вам не понравится.
Итак, если вы хотите, чтобы IE6 и выше имитировали поведение таких браузеров, как chrome и firefox, вы можете добавить строгий doctype.
Итак, если вы хотите, чтобы IE6 и выше имитировали поведение таких браузеров, как chrome и firefox, вы можете добавить строгий doctype.
Вы Применили Сброс CSS?
Разные браузеры работают по-разному. Один стиль может работать в одном браузере, но в другом он будет отображаться в другом стиле. Основным фактором, который здесь имеет значение, является CSS.
Например, вы, возможно, видели, что часто кнопки отправки выглядят по-разному в разных браузерах из-за CSS. Итак, если некоторые элементы не отображаются должным образом в разных браузерах, то это может быть связано с CSS. Когда вы применяете сброс CSS, вы указываете каждому браузеру удалить стиль CSS по умолчанию, который вызывает кроссбраузерную несовместимость.
И это имеет чертовски большое значение для Internet Explorer!
Очень известный Сброс CSS Эрика Мейера может быть использован, чтобы помочь вам решить эту проблему несовместимости браузера. Или вы можете использовать стандартные сбросы CSS, такие как normalize.css .
Добавление сброса CSS довольно просто, все, что вам нужно сделать, это загрузить файл CSS и включить его в свой заголовок, например:
Однако убедитесь, что вы добавили свою таблицу стилей сброса перед своей основной таблицей стилей.
Используйте Отдельные Таблицы Стилей Для Разных Браузеров
Это избавит вас от проблем с таблицами стилей. Вы можете ссылаться на разные таблицы стилей для каждого браузера, используя условные комментарии. Таким образом, Chrome будет отображать таблицу стилей chrome, firefox будет использовать свою таблицу стилей и так далее.
Базовый условный комментарий будет выглядеть примерно так:
Или вы тоже можете попробовать это.
Используйте Кроссбраузерные библиотеки и фреймворки
Предпочитаю использовать кроссбраузерные библиотеки javascript , такие как jQuery, AngularJS, ReactJS, MooTools и некоторые CSS-фреймворки, такие как Bootstrap, Foundation, 960 grid и т.д. Причина использования этих кроссбраузерно совместимых библиотек и фреймворков заключается в том, что вы можете каким-то образом положиться на них, что они не приведут к каким-то глупым ошибкам, которых вы можете очень легко избежать.
Все Готово? Давайте проверим!
Как только вы позаботились обо всех мерах предосторожности при кодировании, пришло время проверить свой веб-сайт. Вы можете использовать HTML, CSS validator для того же самого. Это укажет на все ваши ошибки и улучшения, чтобы убедиться, что ваш код не сломается.
Вы можете использовать w3 validator для проверки HTML вашего веб-сайта.
После проверки вы увидите ошибки и предупреждения, которые затем сможете устранить в дальнейшем.
Аналогичным образом, вы также можете выполнить проверку для CSS. Попробуйте сделать это с помощью Jigsaw validator из W3 . Опять же, вы увидите такие результаты, как:
Получив информацию о допущенных вами ошибках, вы сможете затем их устранить.
Не Пропустите Тестирование Кроссбраузерной Совместимости
Отсутствие кроссбраузерного тестирования равносильно тому, что все ваши усилия по созданию кроссбраузерно совместимых веб-сайтов пропадают даром. Без кроссбраузерного тестирования вы не сможете убедиться это зависит от того, работают ли шансы, которые вы использовали для создания кроссбраузерно совместимого веб-сайта, или нет?
Итак, необходимо сформулировать правильную стратегию тестирования и выбрать идеальный инструмент. Для этого вы можете использовать лямбда-тест в качестве своего постоянного друга по кроссбраузерному тестированию.
С помощью Lambda Test вы можете очень легко найти ошибки, которые вкрадываются внутрь. Вы можете сделать это в интерактивном режиме, где вы можете проверять наличие различных браузеров, даже не устанавливая их. Или вы можете сделать это с помощью автоматического скриншота, в котором вам просто нужно ввести свой URL-адрес, выбрать браузеры, а затем проанализировать результаты. Проверка на отзывчивость также довольно проста. Подробнее об этом вы можете прочитать в документации.
Как только вы проведете тестирование и обнаружите ошибки, а затем приступите к их устранению. Надеюсь, их будет не так много 😉 Но если они это сделают, выясните их и отладьте с помощью наших следующих блогов.
Вашим пользователям понравится ваш веб-сайт на их любимой платформе. В конце концов, именно в этом и заключается кроссбраузерная совместимость.
Источник: Блог Лямбда-теста
Оригинал: “https://dev.to/lambdatesting/how-to-make-a-cross-browser-compatible-website-3398”