Вкладка Elements

CSS расшифровывается как Cascading Style Sheets, по-русски — каскадные таблицы стилей. Это язык, на котором описывают внешний вид веб-страницы. HTML описывает структуру и смысл страницы, а CSS — её цвет, шрифт, размер, отступы, границы и положение элементов. Обычно правила CSS находятся в файлах стилей, но могут быть записаны прямо у элемента в атрибуте style.

Слово «каскадные» означает, что несколько правил могут пытаться задать одно и то же свойство. Браузер выбирает одно итоговое значение: обычно из более конкретного правила или из правила, записанного позже. Чтобы посмотреть CSS, выбери элемент во вкладке Elements.

Панель Styles показывает подходящие правила, файл-источник и правила, которые были переопределены. В Computed видно итоговое значение, которое браузер применяет на самом деле. Перечёркнутое свойство не работает, потому что его переопределило другое правило.

Цвета и шрифты: один цвет можно записать как #f28338, rgb(242, 131, 56) или hsl(...); это форматы записи, а не разные цвета. Нажмите на цветной квадратик в Styles, чтобы посмотреть цвет или переключить его формат. В font-family может быть список запасных шрифтов: браузер берёт первый установленный. Чтобы подтвердить шрифт, которым текст отрисован на самом деле, откройте Computed и найдите внизу раздел Rendered Fonts.

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

Стилизованный <div> может выглядеть как кнопка, не будучи кнопкой. Разница видна в разметке и важна для клавиатуры, скринридера и поведения браузера.

Заголовки показывают структуру документа. <h1> — главная тема страницы, <h2> — раздел этой темы, а <h3> — подраздел внутри <h2>.

На странице используют один <h1> и не пропускают уровни: после <h2> ставят <h3>, только если это подраздел. Заголовок — не способ увеличить текст: размер задаёт CSS, а тег заголовка — структуру.

Адаптивная вёрстка — это вёрстка, которая подстраивается под доступную ширину экрана. Один и тот же сайт должен оставаться удобным на узком телефоне, планшете и широком экране компьютера.

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

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

Режим device toolbar (ctrl shift m / cmd shift m) задаёт произвольную ширину окна. Проверка строится вокруг брейкпоинтов — ширин, на которых меняется вёрстка, — а не вокруг названий устройств: примерно 360, 768, 1024 и 1280, а также по несколько пикселей с обеих сторон от каждого перехода. На каждой ширине проверьте, что колонки перестраиваются ожидаемо, текст не выходит за границы, элементы управления видны и у страницы не появляется горизонтальная прокрутка. Поворот экрана и зум браузера на 200% — ещё два случая для проверки.

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

Зачем это нужно? Чтобы проверить возможную причину дефекта до оформления бага. Например, заменить короткое название товара на очень длинное и посмотреть, сломается ли карточка; скрыть рекламный блок и проверить, не закрывает ли он кнопку; временно изменить цвет или отступ, чтобы показать разработчику ожидаемый результат.