базовый курс

ГРУППА КУРСА

Отладка CSS кода

При работе в любом языке трудно не допускать ошибок. Поиск ошибок иногда требует много времени и усилий, особенно у новичков. Чтобы проверить CSS на ошибки, браузеры предоставляют различные средства разработки. Лучше всего они сделаны в FireFox. Раньше для их использования нужно было устанавливать плагин FireBug, а сейчас средства разработки интегрированы в браузер. Для них создано своё меню.

Меню разработки

Для отладки CSS кода определённой страницы запустите страницу в FireFox, откройте меню разработки и выберите "Инструменты разработчика". В нижней части окна браузера появится панель с несколькими вкладками.

Сначала нужно узнать, какие стили видит браузер. Для этого откройте вкладку "Стили".

Стили

На картинке выше показано, что стили установлены на открытой странице двумя способами: в файле style.css и в теге <style>. Вы можете кликнуть на любом из этих способов, и будет показан CSS код, который видит браузер. Возможно, в браузере не отобразились последние изменения из-за того, что Вы забыли сохранить файл или нужно очистить кеш браузера.

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

Стили

В левой части инспектора отображается код страницы. Только все блоки пока свёрнуты. Их нужно развернуть, найти нужный элемент и кликнуть на него. Код элемента будет выделен синим фоном.

Выбор элемента

У правой части инспектора есть свои вкладки. Основная вкладка "Правила". В ней отображаются все свойства, которые применяются к элементу. Также в ней указано, каким способом элемент получил эти свойства.

Селекторы элемента

Некоторые свойства могут быть зачёркнуты. Это означает, что данное свойство не применяется к элементу. Это может быть по двум причинам:

  1. При написании CSS свойства или значения допущена ошибка
  2. Свойство отменено более приоритетным селектором
Свойство не применяется

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

В правой части инспектора есть вкладка "Разметка". В ней показаны реальные размеры элемента, которые он имеет в данный момент. Также показаны отступы. Размеры указываются в пикселях. Они могут иметь дробную часть. Это связано с особенностями вычислений.

Размеры элемента

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

Поиск элемента