курсы веб разработки

15. Отладка CSS

Прокрутить вниз

Иногда, при написании кода CSS у вас может возникнуть проблема, когда CSS не выполняет функции, которые вы ожидаете от него. Например, вы ожидаете, что определенный селектор должен соответствовать элементу, но ничего не происходит. Эта статья нацелена помочь вам разобраться, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит. Курсы веб разработки — серия бесплатных статей, что нацелены дать основы программирования. Если вы хотите научиться программированию вы можете пройти курсы HTML/CSS.

Курсы веб разработки: отладка проблем в CSS

DevTools — это программы, которые позволяют создавать, тестировать и отлаживать (debug) программное обеспечение. Современные браузеры имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. Может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведёт себя не так, как вы хотели, что же следует сделать, что это решить? Дальше мы описали некоторые шаги, которые могут помочь.

Сделайте шаг назад

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

Валидны ли ваши HTML и CSS?

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

  • CSS Validator
  • HTML validator

Поддерживаются ли свойство и значение браузером в котором вы тестируете?

Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не «сломается», кроме того, что тот CSS не будет применён. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение «подсветки» (subgrid) grid-template-columns.

Не переопределяется ли ваш CSS чем-нибудь ещё?

Эта та ситуация, когда изученная вами информация о специфичности придёт вам на помощь. Если у вас имеется что-то более специфичное, то вы можете потратить много времени,что бы разобраться. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.

Сделайте сокращённый контрольный пример проблемы

Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность «уменьшить проблему» — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.

Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля.  Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.

Создание сокращённого контрольного примера:

  1. Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как CodePen являются полезными для размещения сокращённых контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.
  2. Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript устраняет проблему, тогда удалите столько JavaScript, сколько сможете, оставляя всё что вызывает проблему.
  3. Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все ещё показывает проблему.
  4. Удалите весь CSS который не влияет на проблему.

В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Курсы веб разработки — читайте больше про программирование в остальных уроках.
Что бы проверить свои знания — проверить знания вы можете пройдя тест в начале статьи. Если вы не разобрались, что же именно не так в вашем коде — приглашаем вас на полноценный курс программирования HTML/CSS.