DOM и стили в DevTools

До сих пор мы читали исходники и историю. Теперь перейдём к тому, что показывает браузер. Один и тот же HTML может выглядеть неожиданно из-за сочетания CSS-правил, а правка в панели разработчика может существовать только в текущем документе. Нам нужно проследить путь от видимого элемента к правилу и затем к сохраняемому исходнику.

Для уроков 18–22 подготовлен отдельный devtools-catalog-lab в архиве. Он использует Python 3.12 и современный Chrome/Chromium, адрес http://127.0.0.1:4310/, вымышленные данные и только локальное чтение. Сервер и браузерный сценарий не запускались; всё описанное ниже является ожидаемым наблюдением при будущей ручной работе.

Карточка и её документ

В lesson-18/start находятся server.py, HTML, CSS и JavaScript. Файлы копируются в отдельную новую папку вне ProfessorWeb. Сервер привязан к 127.0.0.1, а порт 4310 выбран отдельно от предпросмотра сайта. Команда python3 server.py дана в сценарии для самостоятельного прохождения; при подготовке статьи она не выполнялась.

HTML сразу содержит две карточки: JavaScript и HTML/CSS. Их ссылки сохраняют учебные пути /courses/javascript/ и /courses/html-css/. Цвет заголовка должен быть фиолетовым, цвет ссылок — зелёным. Однако в исходной модели карточки наследуют фиолетовый цвет от более специфичного правила.

.course-card { color: var(--link); padding: .75rem; }
.catalog .course-card { color: var(--accent); }
.course-card a { color: inherit; }

Это точный фрагмент начального theme.css. Первое правило относится к карточке, второе — к карточке внутри каталога, третье передаёт её цвет ссылке. Поэтому наблюдаемый цвет ссылки может объясняться не только правилом a, которое вы первым нашли поиском в файле.

В будущем браузерном упражнении выберите ссылку JavaScript через Inspect — просмотр элемента. В Elements найдите её <a>, затем родительский <li class="course-card">. DOM отражает текущий документ: JavaScript мог уже добавить или удалить узлы, поэтому дерево не обязательно совпадает с первоначальным HTML один к одному.

От значения к правилу

В Styles прочитайте правила карточки. Ожидается, что зелёное значение из .course-card будет перекрыто фиолетовым значением .catalog .course-card. Более подробный селектор выигрывает при наших равных источнике и остальных условиях. В данном файле нет важных объявлений, каскадных слоёв или встроенного значения, поэтому причина намеренно ограничена специфичностью этих двух правил.

Инструкция Chrome по CSS описывает чтение правил и временное изменение объявления. Мы используем панель для исследования конкретного компонента: какой узел выбран, откуда пришло значение и какое правило нужно изменить в исходнике.

Вычисленный цвет ссылки ожидается rgb(132, 86, 216), соответствующий #8456d8. Желаемое значение — rgb(36, 129, 74), соответствующее #24814a. Разное представление цвета не означает разные данные. Сопоставление значений помогает отделить вопрос цвета от размеров, шрифта и других свойств карточки.

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

Временная проба и сохранённое решение

Изменение Styles в текущем документе обычно не переписывает исходный файл проекта само по себе. После перезагрузки исходное правило может вернуться. Наблюдение полезно для поиска, но пока другие посетители получают прежние исходники, они не получат вашу временную пробу.

Для нашего урока сохраняем решение в public/theme.css: удаляем целиком правило .catalog .course-card { color: var(--accent); }. Остальные правила сохраняются. Не добавляем !important, потому что требование заключается в общем зелёном цвете карточек, а конфликтующее переопределение здесь не имеет отдельного назначения.

.course-card { color: var(--link); padding: .75rem; }
.course-card a { color: inherit; }

Это изменяемый фрагмент; весь файл находится в expected/public/theme.css. Фиолетовый акцент по-прежнему используется заголовком через существующее h1. Таким образом, исправление цвета ссылок не отменяет принятую палитру каталога. В задаче по ProfessorWeb такое ограничение помогает осовременивать интерфейс, сохраняя узнаваемые акценты.

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

Для передачи найденной причины запишите три значения: выбранный элемент, перекрывающее правило и ожидаемый цвет после его удаления. Такая заметка сохраняет объяснение даже без снимка экрана. Скриншот показывает внешний вид, но часто не раскрывает, откуда пришло наследуемое значение. В нашем компоненте роль родительской карточки особенно важна, потому что ссылка получает inherit. Другой автор, читая только правило ссылки, мог бы добавить лишнее переопределение. Короткий путь от узла до источника значения помогает сохранить простоту CSS. После сохранения решения снова прочитайте соседний заголовок: фиолетовый акцент должен остаться на своём месте. Задача возвращает согласованный цвет конкретному компоненту и не требует перестройки всей палитры страницы.

Размер элемента и ширина окна

Обратите внимание также на блоковую модель карточки. Отступ .75rem относится к внутренней области элемента, а ширина списка зависит от родительского каталога. Можно временно менять размер окна и видеть перенос текста, но не следует одновременно менять десять свойств: тогда будет труднее объяснить, какое из них исправило наблюдаемую проблему.

Скрытая причина иногда находится выше. Если выбран <a>, а нужное правило относится к <li>, чтение только собственных объявлений ссылки недостаточно. Именно поэтому мы сначала проследили наследование. Похожий принцип действует для шрифта и межстрочного интервала: не каждое значение объявлено прямо на видимом узле.

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

Конечный подготовленный результат — зелёные ссылки, фиолетовый заголовок и одно понятное изменение CSS. Мы связали наблюдение с наследованием, каскадом и файлом, который можно хранить в Git. В следующем уроке исследуем данные обработчика кнопки и найдём причину неправильной общей длительности.