Руководство по созданию совместимых с браузером HTML и CSS

                    

Сколько раз вы сталкивались с ситуацией, когда конкретная веб-страница или полный веб-сайт отображается по-разному в разных браузерах? Ситуация усложняется, когда тест выполняется в браузерах на разных платформах и устройствах (операционная система — Linux, Windows, Android, iOS и т. Д. Типы устройств — настольные ПК, мобильные телефоны, планшеты и т. Д.). Следовательно, тестирование вашего веб-сайта и веб-приложений в различных сочетаниях браузеров, платформ и устройств очень важно для вашего бизнеса, так как любое несоответствие в функциональности может создать негативное впечатление для пользовательского опыта и бизнеса. Процесс тестирования в различных комбинациях называется ‘Тест на совместимость с различными браузерами.

Что такое кросс-браузерное тестирование?

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

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

Почему кросс-браузерное тестирование является обязательным?

1. Если вы создаете глобальный продукт, т. Е. Потребители вашего продукта также принадлежат к развивающимся странам, где проникновение смартфонов все еще ниже, существует вероятность того, что они могут использовать устройства с устаревшей версией браузера на телефон / планшет. Даже на настольных компьютерах многие пользователи могут использовать более старую версию своего любимого браузера, и эти браузеры могут не поддерживать новейшие функции CSS, HTML5, JavaScript. Это может привести к сбою важной функциональности вашего веб-сайта, поскольку эти предварительные языки используются в веб-разработке.
2. Существует огромное количество телефонов, планшетов и умных телевизоров от разных производителей, и каждый обслуживает разные сегменты клиентов. Они будут иметь разную оперативную память, конфигурации ПЗУ и размеры экрана. Ваш веб-сайт / веб-приложение на недорогом смартфоне должно соответствовать всем этим требованиям, чтобы соответствовать коэффициенту его использования.
3. Согласно отчету ВОЗ, растет число пользователей, которые используют вспомогательные технологии для доступа в Интернет. Вам необходимо «включить» этот сегмент пользователей, если они также являются предполагаемыми пользователями вашего веб-продукта.

Однако в тестировании вашего веб-сайта / веб-приложения на комбинации различных браузеров и платформ лежит огромная проблема. Следовательно, должен быть запасной механизм для пользователей, у которых нет последних браузеров, чтобы они могли по-прежнему получать доступ к подфункциям / подфункциям, если доступны «основные функции». При разработке продукта вы можете определить «тип браузера», проверив «пользовательский агент» и, основываясь на (тип браузера + версия браузера), предложите «урезанные функции», чтобы приспособить старую версию браузера.

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

Кросс-браузерный цикл тестирования

«Тестирование» является очень важным этапом, так как меньшее количество ошибок в конечном продукте приводит к лучшему восприятию пользователем. Подобно «плану модульного тестирования», вам необходимо сформулировать «план тестирования» для проведения кросс-браузерного тестирования вашего продукта в зависимости от его масштаба и сложности. Вы не можете разработать все функциональные возможности продукта для одного конкретного семейства браузеров, а затем начать настройку исходного кода, чтобы сделать его адаптируемым для других «приемлемых браузеров». Кроме того, общая сложность возрастет, если общий масштаб продукта (с точки зрения количества строк на код — LOC или количества пользователей) будет очень велик, поскольку вы можете потратить значительное количество времени на навигацию по коду.

Не рекомендуется проводить кросс-браузерное тестирование в конце проекта, но оно должно выполняться периодически. Подобно обычному процессу разработки, вы должны следовать итеративному циклу «разработка-> тестирование> исправление» даже для кросс-браузерного тестирования.

Кросс-браузерные проблемы могут возникать по ряду причин, но большинство проблем возникает из-за проблем, вызванных HTML / HTML5, CSS и JavaScript. В последующих разделах мы рассмотрим проблемы совместимости между браузерами более подробно и то, что можно сделать, чтобы их избежать.

Поиск и устранение проблем совместимости между браузерами в CSS и HTML

Каждый разработчик имеет свой собственный выбор предпочтительной IDE (интегрированной среды разработки) и других инструментов, используемых для разработки и тестирования. Из-за этого выравнивание и дизайн кода в одной среде IDE могут отличаться от других сред разработки. Если в команде есть новичок-веб-разработчик, который использует IDE, которая не выполняет «проверку ошибок», существует вероятность того, что вы можете встретить пропущенные точки с запятой (;) и другие синтаксические ошибки. Следовательно, необходимо выполнить полный обход кода, чтобы такие ошибки были обнаружены в первом обзоре.

В зависимости от целевого клиентского сегмента, вы должны выполнить тестирование важного набора функций в «популярных» современных браузерах (Chrome, Firefox и т. Д.) И платформах (Desktop, Mobile — Android, iOS и т. Д.) Перед нацеливанием на кросс проблемы Как упоминалось ранее, многих ошибок в CSS и HTML-коде можно избежать, если ваш код выровнен, комментарии вставлены в нужных местах, сопоставлены фигурные скобки и т. Д. Прежде чем мы рассмотрим валидаторы кода, нам нужно сначала понять DOCTYPE в HTML, поскольку он играет важную роль в обеспечении правильного отображения содержимого браузером. DOCTYPE в HTML — это инструкция, предоставляемая веб-браузеру о версии HTML, используемой для страницы, для правильного отображения веб-содержимого. В HTML 4.01 объявление ссылается на DTD (определение типа документа), поскольку эта версия HTML основана на SGML (стандартный обобщенный язык разметки). Пример DOCTYPE приведен ниже:

Существует множество «валидаторов кода», которые могут помочь вам выяснить проблемы в вашем коде. Валидатор HTML-кода проверяет, являются ли теги закрытыми и вложенными, был ли использован правильный DOCTYPE и было выполнено правильное использование тегов. Валидатор кода CSS проверяет, нет ли пропущенных фигурных скобок, и было ли выполнено правильное использование имен и значений свойств CSS.

Ниже приведены некоторые из распространенных валидаторов HTML-кода:

1. W3C Validation Markup Service — это наиболее распространенный сервис для проверки HTML-кода. Вы можете проверить код, либо указав на URI (универсальный идентификатор ресурса), либо загрузив файл, содержащий исходный код, либо непосредственно введя код на их веб-сайте. Служба разметки W3C доступна здесь.




Часто встречающиеся кросс-браузерные проблемы

Вы можете наблюдать проблемы с HTML и CSS, когда начинаете реализовывать функции, использующие префиксы CSS. Многие старые браузеры не поддерживают новейшие функции, такие как HTML5 Audio / Video, FlexBox, CSS-сетки и т. Д. Старые версии браузера Internet Explorer не поддерживают многие функции CSS, такие как селекторы CSS3, цвета CSS3, пространства имен CSS и т. Д. Как разработчик, вы должны убедиться, что что ваш веб-сайт или веб-приложение хорошо работает в Internet Explorer, поскольку он по-прежнему остается одним из широко используемых браузеров после Google Chrome (источник). Полный список функций, которые поддерживаются в Internet Explorer, находится здесь. Другие распространенные причины, по которым вы можете столкнуться с проблемами совместимости между браузерами, перечислены ниже:

1. Несовместимость браузера с операционной системой (ОС).
2. Минимальная поддержка новейших функций.
3. Различные реализации JavaScript.
4. Различные реализации функций браузера для обработки той же функциональности (для увеличения доли рынка).
5. Ошибки в браузерах.
6. Проблемы с выравниванием страницы.

Обеспечение поддержки этих функций в старых браузерах является обязанностью как разработчика, так и тестировщика. Эта цель может быть достигнута с помощью резервного механизма для функций, реализованных с помощью CSS, HTML или JavaScript в случае, если ваш сайт доступен из старого браузера. Вы можете использовать адаптивные CSS-фреймворки, чтобы ваше приложение было готово для мобильных устройств, а также было совместимо с различными браузерами. Некоторые известные CSS-фреймворки — Bootstrap, Foundation & Semantic UI.

Мы уже знаем, что последовательность является ключом к любому успешному дизайну пользовательского интерфейса. Тем не менее, из-за широкой доступности браузеров, поддержание согласованности вашего сайта становится проблемой. Поскольку у каждого браузера есть свои уникальные правила рендеринга CSS по умолчанию, установленные в соответствии с механизмом рендеринга. Таблица стилей CSS Reset предлагает руку помощи, чтобы помочь нам справиться с проблемой непротиворечивости, заставляя каждый браузер сбрасывать стилизацию каждого элемента HTML на недействительный, ограничивая количество кросс-браузерных различий, с которыми может столкнуться веб-приложение или веб-сайт. Лучше всего добавлять CSS Reset в самый верх вашей таблицы стилей.

Методы HTML и CSS для кросс-браузерной совместимости

Некоторые элементы HTML могут не распознаваться старыми браузерами; хорошая часть состоит в том, что эти элементы обрабатываются как анонимные встроенные элементы, то есть что-то похожее на комментарии в исходном коде. Ниже приведены некоторые из распространенных методологий для обеспечения кросс-браузерной переносимости для HTML:

Реализация функций на дисплее: блок;

Хорошей практикой является использование реализации с использованием новых функций на дисплее: блок ;. Это правило большого пальца также можно применять к другим тегам HTML5, таким как аудио видео в стороне и т. Д. У вас также есть возможность добавления механизма отката в открытии Тег (). В приведенном ниже примере пользователь имеет возможность загрузить видео, если браузер устарел и не поддерживает FLASH.

Специфическая реализация для CSS

В целях уникальности производители браузеров реализуют расширения для спецификаций CSS и в большинстве случаев; эти реализации являются собственностью браузера. Некоторые из этих функций также добавлены для отладки и тестирования функций, находящихся на экспериментальной стадии. Имена ключевых слов / свойств начинаются с тире (-) или подчеркивания (_). Следовательно, формат может быть:
'-' + идентификатор конкретного поставщика + '-' + значимое имя
'-' + идентификатор конкретного поставщика + '-' + значимое имя
Согласно спецификации W3C, любое другое имя свойства CSS никогда не может начинаться с «_» или «-», и это помогает отличить обычную реализацию CSS от реализации, специфичной для поставщика. Некоторые из распространенных «префиксов расширений поставщиков» приведены ниже.

Префикс	Браузер
-ms-	Microsoft Internet Explorer
mso-	Microsoft Office
-moz-	Firefox / Mozilla Foundation
-о-	Opera Software
-webkit-	Safari, Chrome (и другие браузеры на основе WebKit)

В приведенном ниже примере объявление CSS для уровней непрозрачности для браузера Firefox и других браузеров упоминается отдельно. Это же правило применяется и к свойству background-image в CSS.

IE Условные комментарии

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

Условные комментарии также можно использовать для применения правил CSS с помощью операторов условных комментариев. Некоторые операторы условных комментариев приведены ниже

Оператор	Описание
IE	Он представляет Internet Explorer, и если рядом указан номер, он представляет версию IE
л	Меньше, чем
Г	Меньше или равно
GT	Больше, чем
GTE	Больше или равно
true, false	Оценивает true и false соответственно
&	И оператор
|	Оператор ИЛИ
!	НЕ оператор
()	оператор подвыражения

Например, если вы хотите, чтобы фрагмент кода выполнялся только для версии IE, равной 7, вы можете использовать выражение [if IE 10].

<br /> <!--[if IE 10 ]>    <p> Код должен выполняться только для IE 10 </p> <![endif]-->

< ! — [ if ] IE 10 ] > < p >> Код — be ] выполнено только для IE 10 < / р > < ! ENDIF ] — >

Если вам нужно выполнить код для IE 11 и версий выше 11, вы можете сделать следующее

<br /> <!-- Execute code for IE version greater than IE 11 --><br /> <!--[if gte IE 11 ]>   <p> Код, выполняемый IE 11, и версии выше IE 11 </p> <![endif]-->

< ! — Выполнить код ] для IE версии большей IE 11 — >> < ! — [ if gte IE ] 11 ] >> p > Код — будет выполнено IE 11 и версии выше выше IE 11 < / p p > > < [ ENDIF ] — >

Вы также можете включить использование разных стилей / CSS для разных версий IE, чтобы не нарушать функциональность.

Радиус границы для закругленных углов с изображениями

border-radius — это популярное свойство для создания закругленных углов, как в прямоугольниках, так и в изображениях. Это свойство, которое было введено в CSS3, может быть применено к любому элементу div, текстовому полю или кнопке; но это была ограниченная поддержка браузера. Это особенно верно для более старых версий Internet Explorer. Если это свойство используется в вашем CSS-коде, вам нужен механизм отката с изображениями.

CSS3 кнопки с резервными изображениями

Кнопки — это мощные веб-элементы, которые используются в качестве элементов навигации, ссылок на страницы и т. Д., А с помощью CSS3 разработчики и дизайнеры могут использовать кнопки с различным фоном, закругленными углами, градиентами и другими параметрами стиля. Однако существует множество версий браузера, которые могут не отображать кнопки в разных стилях. Подобно свойству border-radius, разработчик должен иметь запасной вариант с изображениями при использовании кнопок. В приведенном ниже примере у нас есть два объявления цвета фона a. цвет фона: # ffff00; и б. цвет фона: rgba (255 255,0,1);

Медиа-запросы для устройств с переменным размером экрана

В настоящее время потребители получают доступ к веб-контенту с различных типов устройств, таких как настольные компьютеры, планшеты, телефоны и т. Д. Наряду с различными типами устройств разработчик также должен адаптировать код к разным размерам экрана. Именно здесь медиазапросы — только @media и @media screen, которые были введены в CSS3, могут использоваться для выполнения этих требований к дизайну.

Похожие сообщения

1. Поиск проблем кросс-браузерной совместимости в HTML и CSS

2. Советы по отладке вашего HTML и исправлению ошибок

3. Проверьте кросс-браузерную совместимость свойства даты HTML с экспериментами LambdaTest

4. 6 лучших трендов HTML5 для веб-мастеров