Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Требования: Базовая компьютерная грамотность, базовое программное обеспечение, базовые уменя работы с файлами, основы HTML (изучите Вступление в HTML), и представление о том, как работает CSS (для этого изучите предыдущие статьи в этой главе.)
Цель: Изучить основы отладки в CSS.

Как и отладка HTML, отладка CSS - не такая страшная задача, как отладка некоторых других типов кода. Мы рекомендуем повторить Отладка это не страшно прежде, чем мы продолжим.

CSS и отладка

Также, как и HTML, CSS толлерантен (прочтите толлерантный код перед тем, как продолжить.) В CSS, если описание не верно (содержит синтаксическую ошибку, или браузер не поддерживает данную функцию),то браузер просто пропустит это свойство и перейдет к следующему.

Если селектор недействителен, то он ничего не выбирает, а значит это правило не применяется - браузер снова пропустит этот этап и перейдет к следующему правилу.

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

К счастью, существует несколько инструментов, которые помогут Вам в этом. Давайте взглянем на них.

Проверка DOM и CSS 

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

Замечание: В следующем примере используется Firefox, но все браузеры поддерживают данные инструменты — просто они могут находиться в разных местах. Прочтите Что такое инструменты для разработчика в браузере? чтобы найти больше информации о доступе к ним в разных браузерах.

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

Данный пример достаточно прост - это веб-страница с одной колонкой, которая содержит простую статью.

our example webpage with the problems fixed. The Firefox logo has been floated to the right, and the main heading and body text are now visible and well placed.

Но в данный момент, в ней кое-что не так:

Our example webpage in a broken state. There is a heading of My article in the middle and a Firefox logo, but everything else is small and not easily visible.

Давайте исследовать нашу страницу с помощью функций инспектора. В Firefox Вы можете открыть инспектор, используя сочетание клавиш "Cmd/Ctrl" + "Shift" + "I" (или выбрав Инструменты > Веб-разработчик > Инспектор, используя главное меню), который предоставит нам набор инструментов, открытых в окне в нижней части браузера:

The Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Если Вы нажмете на элемент DOM-инспектора слева, CSS-редактор обновится, чтобы показать свойства, применяемые к данному элементу. Это очень полезно, особенно когда неправильные свойства отображаются перечеркнутой линией и рядом с ними появляется предупреждающий символ. Показано на картинке ниже:

A close up of the Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Замечание: Каждое свойство имеет флажок, чтобы Вы могли проверить его, включив или выключив его. Это очень полезная функция, которая поможет найти ошибку.

Практическое занятие: найдите ошибки!

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

  1. Элементы <header> и <footer> имеют одниковый цвет фона? однако он не отображается.
  2. Элемент <h1> в заголовке и <p> в "подвале" имеют слишком большую высоту — особенно это заметно в заголовке <h1>, который даже выходит за пределы экрана! Вы можете щелкнуть на свойство <h1> в инспекторе инструментов и затем снять, или наоборот, поставить, флажки напротив CSS свойства, чтобы понять, какие из них вызывают проблему.
  3. Элемент <img> должен быть смещен вправо и вниз, чтобы он находился справа от текста, но сейчас это не так — отображается прямо над текстом.
  4. Текст в поле <main> слишком мал — параграфы и элементы списка должны иметь больший размер шрифта, но, как можно заметить, это изменение не применилось. Подсказка: Это может быть немного сложнее, так как проблема в селекторе, а не в свойстве. Возможно, Вам придется изучить исходный код страницы — Вы можете найти его в Редакторе стилей в инструментах разработчика Firefox.

Если Вы застряли, то можете посмотреть готовый исходный код на странице Github.

CSS валидация

Мы уже знакомились с W3C HTML Validator, но также существует и CSS Validator. Он работает по такому же приницпу, позволяет Вам проверить CSS код по URL-ссылке, загрузки локального файла с кодом, или используя ввод CSS кода напрямую.

a visual of the CSS Validation Service mentioned and linked to nearby

Практическое занятие: Проверка CSS 

Давайте попробуем ввести наш CSS код в валидатор и посмотрим, что он выведет.

  1. Перейдите в сервис валидации CSS в раздел Валидация с помощью ввода.
  2. Скопируйте наш CSS код с ошибкой в текстовое поле валидатора.
  3. Нажмите кнопку Проверить.

Вам будет предствален список ошибок. Обнаружено две ошибки:

The validator results as they appear on the CSS validation service.

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

  • Свойство background-colour не существует : teal — simple; это говорит нам о том, что данного свойства не существует, откуда мы можем понять, что ошибка в свойстве.
  • Ошибка параметра : Свойство float пытается найти точку с запятой перед именем следующего свойства. Добавьте ее — это говорит нам о том, что пропущена точка с запятой. Если взглянуть на номер строки, в которой обнаружена ошибка, то ее очень легко исправить.

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

Замечание: CSS Lint такойже инструмент для валидации CSS и отображения ошибок, который также может предоставить полезные советы и предупреждения.

Итог

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

 

В этой главе

 

Метки документа и участники

Внесли вклад в эту страницу: VyacheslavLobanov, Andelight
Обновлялась последний раз: VyacheslavLobanov,