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

Ошибки кроссбраузерной совместимости неизбежны для любого веб-проекта, независимо от того, какую платформу он использует для разработки. И самое главное, они продолжают появляться на каждой итерации.

С момента своего появления JavaScript был главным виновником проблем с совместимостью браузеров, поскольку это была самая быстрорастущая технология того времени. Так быстро, что большинству браузеров пришлось догонять, чтобы оказать поддержку. Однако после появления новых стандартов HTML5 у JS появился новый партнер по созданию хаоса. Поскольку HTML и CSS являются более простыми языками, люди неправильно поняли, что они не являются виновником проблемы с кроссбраузерной совместимостью. Однако это не всегда соответствует действительности. Часто самый маленький член дома является проблемным и может вызвать множество неизвестных проблем.

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

Поиск и устранение общих проблем

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

Это как в точка с запятой(😉. Синтаксические ошибки являются основной причиной высокого давления среди веб-разработчиков.

Таким образом, для CSS и HTML вам не всегда нужно искать точку с запятой, если вы просто используете для нее валидатор.

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

Вы можете использоватьСлужба проверки разметки W3C для проверки HTML-кода вашего веб-сайта или если вы просто хотите скопировать и вставить свой HTML-код, вы можете использовать Бесплатное форматирование или же Форматировщик JS.

1-2.png

Для проверки CSS вы можете использовать Служба проверки CSS W3C — W3 Jigsaw или же Служба проверки CSS.

2-2.png

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

В Интернете доступно множество линтеров для CSS, HTML, JS и других языков. Лучшие из них: Dirty Markup (для CSS, JS, HTML), CSS Lint (специально для CSS), JS Lint (только для JS).

3-2.png

Охота на распространенные ошибки

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

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

4-2.png

Вы можете узнать ошибки, как уже упоминалось: Invalid property type.

Подобные ошибки могут указывать на некоторые из многих причин, вызывающих несовместимость между браузерами, поскольку некоторые браузеры не поддерживают определенные элементы CSS и HTML, и вы можете продолжить поиск этих элементов.

Неподдерживаемые элементы CSS в браузерах

Старые версии Internet Explorer, одного из наиболее часто используемых браузеров, не поддерживают многие элементы CSS, некоторые из которых:

  • Селекторы CSS3
  • CSS-счетчики
  • CSS3 Размер коробки
  • Растяжка шрифта CSS
  • Пространства имен CSS
  • Цвета CSS3

Посмотреть полный список неподдерживаемые элементы CSS во всех браузерах Internet Explorer.

Точно так же некоторые старые версии Google Chrome не поддерживают следующие элементы CSS:

  • CSS overscroll-поведение
  • Отображение CSS: содержимое
  • API рисования CSS
  • CSSOM Scroll-поведение
  • Точки привязки прокрутки CSS
  • Конические градиенты CSS
  • Настройка размера шрифта CSS

5-2.png

Неподдерживаемые элементы CSS в любых последних браузерах Chrome

Точно так же вы можете проверить любой из элементов CSS, которые вы используете на своем веб-сайте, и какие браузеры не поддерживают эти элементы. Причины неподдерживаемых элементов CSS проблемы с кроссбраузерной совместимостью.

Проблемы с HTML в браузерах

Если вы хотите разобраться с проблемами HTML, то первое, что вам нужно сделать, это проверить DOCTYPE. Вы использовали его?

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

Многие старые версии браузера Internet Explorer не поддерживают такие элементы HTML, как:

  • Видеоэлемент
  • Аудио элемент
  • Тип ввода поиска
  • Проверка формы
  • Выбор нескольких файлов
  • Автономные веб-приложения

См. полный список неподдерживаемых элементов HTML во всех браузерах Internet Explorer.

6.png

Неподдерживаемые элементы CSS в браузере Internet Explorer

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

Первоначально опубликовано на Лямбда-тест

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *