Обучайся бесплатно с WAYUP Premiere сегодня вечером

Почти с каждым обновлением браузеров Chrome, Opera, Edge и пр. разработчики что-то меняют и в средствах разработки DevTools. Добавляются новые и полезные функции, обновляются уже имеющиеся, что-то исчезает временно или насовсем. Но при этом сами «Средства разработки» действительно способны сделать жизнь и работу веб-дизайнеров и верстальщиков, разработчиков намного проще. Рассматривать все новшества и их возможности, в частности, Google Chrome можно бесконечно долго. Куда проще при желании изучить описание ежемесячных обновлений.

Мы же решили в этом материале остановиться на трех наиболее ярких и интересных возможностях, на примере браузера Google Chrome и режима Chrome DevTools, которые будут полезны и дизайнерам, и верстальщикам в равной степени. Аналогичный режим есть и в браузере Opera, Firefox и функционал их полностью однотипен. Мы просто (наобум, если честно) выбрали именно Chrome. Если обратить внимание на браузер Edge, то в нем тоже есть режим разработки, но работа с цветом выглядит несколько иначе, точнее, она упрощена. А вот работа с кодом и сохранением изменений выглядят нагляднее, в виде иконок, а не панелей и вкладок. Иными словами – функционал тот же, представление иное.

Но начнем…

Изменение и проверка значений CSS переменных

Если вы используете пользовательские переменные CSS в вашем коде, то при открытии Chrome Devtools, вы сможете увидеть во вкладке Стили (Styles)  что-то вроде font-size: var(--fontsize). Для того чтобы понять смысл такого кода CSS придется найти в самом файле раздел :root , в нем имя переменной, значение её, а затем вернуться в сам код и работать со значением уже в нем.

DevTools способен сам вычислять переменную CSS во вкладке Стилей, поэтому дизайнеры и верстальщики могут сразу проверить значение нужной переменной и увидеть даже пример цвета.  Также есть возможность внести изменения в значения переменных CSS. И вот как все это работает…

Посмотрите на скриншот ниже и обратите внимание на вкладку Стили на свойства color и font-size. Близ значения var(--text) можно увидеть цветной квадрат. Также если подвести курсор к значению var(--fontsize), можно увидеть, как браузер покажет числовое значение и отобразит его на экране в виде всплывающей подсказки. Казалось бы, что эти возможности есть давно и не только в браузере Chrome. Но интересно как раз то, что не многие веб-мастера отдают должное внимание этой возможности.

И вот как это можно использовать.

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

Если же кликнуть по стрелочкам у палитр, то появятся дополнительные наборы. Это палитры, созданные и собранные со страницы в браузере. Поэтому, если к цвету подвести курсор, то появится название переменной, что его использует: фон, текст, блок и так далее. При выборе цвета, код его будет автоматически вставлен в CSS-код. Например, ниже мы заменили цвет текста и соответственно имя переменной  --text было заменено на --alternative-text.

Кроме того, во всплывающей панельке цветов можно увидеть и такой параметр, как Contrast ratio. Этот параметр показывает, как цвет фона относится к цвету текста. Чем ниже параметр, тем и контрастность хуже. На примере видно, что и текст и фон слились. Допустимый предел начинается приблизительно от 4 и подтверждается галочками.

Кроме того, контрастность можно настроить отдельно, кликнув по стрелочкам рядом. Здесь представлена весьма интересная информация. Параметр АА указывает на то, какого контраста мы достигли, а ААА – параметр, который желательно достигнуть, по мнению WebAIM. Так как у нас параметры выше, чем даже нарисованная линия безопасности цветового контраста, то у нас все идеале. И заметьте, разница в оттенках зеленого не так велика, как кажется, а визуально смотрится совсем по-разному.

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

Кроме этого, не лишним будет упомянуть о выборе - выше линии нужно брать цвет или ниже. Если текст на темном фоне –  цвет текста должен выбираться выше линии. Если текст на светлом фоне – ниже линии.

Возможность изменять значение переменной и проверять сочетаемость цветов – это еще не все. Изменять эти значения можно и на уровне root. Для этого выбираем любой элемент и листаем вкладку Стили вниз, пока не увидим раздел :root, в котором и описаны все наши переменные. Если здесь изменить значения, то изменения будут применяться и обновляться на всей странице. Изменение цвета происходит аналогично, как мы рассказали выше. Для изменения других значений – дважды кликайте по ним мышкой и вводите нужное.

В целом, такая возможность – отличный вариант для работы, как минимум, с палитрой цветов и подбором контраста. При этом наглядно и удобно. Да, веб-дизайнеры, могут все это проделать в Photoshop при работе с макетом, но иногда гораздо удобнее подбирать цвета и «играть» с ними уже на уровне готовой сверстанной страницы. Тем более, если она уже есть, а заказчику\клиенту хочется обновить цвета… частично. Подбирать готовую палитру сложнее, и становится удобнее наглядно смотреть, что и на что менять.

Форматирование сжатого кода

Мы в прошлом материале рассказывали о том, как уменьшить/сжать программный код, о том, что его становится трудно читать после такого действия, разбирать, но зато он быстрее загружается браузером и обрабатывается сервером. И да, если возникает необходимость его правки, отладки и прочее – это становится трудно. Режим разработчика в браузерах позволяет делать такой код более читабельным.

Переходим на вкладку Sources -> Page и находим код *.js. Разные сайты используют разный вариант: код может быть сжатым, может – нет. Но в центральной части всей панели разработчика есть внизу (в Edge вверху) иконка фигурных скобок. Кликаем на нее и весь маленький и сжатый код превращается в весьма красивый и читабельный «трактат». Разумеется, что работать с таким вариантом кода гораздо удобнее.

Аналогично, работать со сжатым кодом можно и по отношению к CSS.

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

Сохранение внесенных изменений

Бывало, наверное, у многих такое, когда с помощью режима разработчика были внесены изменения, затем пришлось страницу обновить и все изменения как ветром сдуло, будто их и не было. Но благодаря функции Local Overrides можно об этом не волноваться. Что она делает?  Позволяет сохранить внесенные изменения в файле на жестком диске вашего РС. В момент загрузки страницы после обновления изменения из этого файла будут автоматически загружены и, соответственно, страница будет изменена.  И обратите внимание, изменения будут происходить только на вашей стороне, а не для всего интернета.

Для этого переходим во вкладку Sources -> Overrides. Чтобы начать работать выберем расположение для файла на своем РС. Кликаем и выбираем папку. После чего разрешаем сохранения конфиденциальных данных в этой папке в соответствующем диалоге и тогда она появится в левой панельке режима разработчика.

Теперь попробуем изменить цвет на странице, размер шрифта. Затем обновить страницу. Так, например, мы заменили фон окон с кодом на красный с прозрачного. Обновили и увидели, что файл CSS сохранился у нас на диске и подгружается автоматически. И пока данное расположение файла активно и существует, этот файл всегда будет загружаться. Прекрасно! Но именно поэтому после всех экспериментов удалите ненужное из настроек режима и файлы из папки, дабы в дальнейшем оригинальные проекты таковыми и оставались.

Завершение

Работа с цветом, оттенками, прозрачностью и выбором контраста  занимает, наверное, львиную долю времени у веб-мастеров. Одно дело, когда цвета просто подбираются по сочетанию друг к другу на соответствующих ресурсах, создаются исходя из логотипных цветов, из палитры бренда и так далее. Совсем другое, когда есть возможность воочию увидеть, как реально и на практике выглядят такие сочетания именно на том сайте, что вы создаете. И при этом не просто в Photoshop выбирать цвета, а именно в браузерах Chrome/Opera, что позволяет дополнительно увидеть, насколько выбранные значения соответствуют стандартам.

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

Как вам материал?