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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете узнать ошибки, как уже упоминалось: 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

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

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

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

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

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

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

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

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

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

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

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