Дизайнеру часто хочется посмотреть, как будет выглядеть страница, если немного увеличить кегль и отступ заголовка, поменять шрифт, цвет фона и радиус скругления кнопки. Если страница уже свёрстана, то проще всего это сделать в браузере с помощью веб‑инспектора: встроенного набора инструментов для разработчиков.
В каждом браузере свой набор инструментов. Обычно открыть его можно с помощью сочетания Command+Shift+I на Маке и Control+Shift+I или F12 в других ОС.
Первая вкладка любого веб‑инспектора — Элементы. На ней расположены основные инструменты для просмотра и редактирования открытой страницы. Обычно эта вкладка разделена на две части: слева разметка страницы, справа стили выделенного элемента.
Мы посмотрим, как работать со страницей на примере веб‑инспектора в Хроме. В других браузерах есть отличия в деталях, но общий подход такой же.
Редактирование разметки
Для того, чтобы выбрать элемент для инспектирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать»:
Отредактируем текст в выбранном элементе:
Заменим класс, чтобы посмотреть как выглядит кнопка в другом состоянии:
Заменим изображение:
Включим отключенную форму:
Элементы на странице можно скрыть на время или удалить:
Или менять местами перетаскиванием:
Редактирование стилей
Для выделенного элемента справа отобразятся его стили. Эти стили тоже можно редактировать на лету.
Поправим внешний вид заголовка:
Поменяем регистр заголовка, добавив новое свойство:
Отключим цвет заголовка:
Посмотрим, как выглядит кнопка при наведении или в активном состоянии:
:hover — состояние элемента при наведении, :active — при нажатии, :focus — в фокусе, :visited — состояние посещённой ссылкиТестирование адаптивности
В веб‑инспекторе есть специальный режим, с помощью которого можно посмотреть, как выглядит страница на разных устройствах.
Посмотрим, как выглядит страница проектов бюро на Айфоне:
Что дальше
Инструментами разработчика можно отладить анимацию, скорость загрузки страницы, плавность прокрутки и многое другое. Об этом пишут разработчики инструментов у себя в документации и блогах:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.