24.09.2021

Инструменты CSS Grid в DevTools

Инструменты CSS Grid в DevTools

От создателя: CSS Grid — это очень мощная система макета CSS, которая позволяет веб-разработчикам создавать непростой двухмерный макет и устанавливать правила для каждого дочернего элемента в сетке, такие, как размер, выравнивание и упорядочение. CSS Grid был представлен после того, как стал пользующимся популярностью Flexbox, и вместе они могут посодействовать разработчикам добиться лучшего адаптивного дизайна без сложных хуков по выравниванию либо разметки с помощью JavaScript.

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

Инструменты для работы с дизайном

Работа в Chrome и Edge

Инструменты CSS Grid завлекли внимание как Chrome DevTools, так и Edge DevTools. Мы решили сотрудничать с самого начала. Мы делились нашими продуктами, инженерными и дизайнерскими ресурсами с обеими командами и раз в неделю координировали свои действия.

Короткое описание характеристик

Инструменты CSS Grid владеют несколькими основными функциями:

Неизменное наложение сетки, которое помогает с информацией о размерах и отступах

Значки в дереве DOM, которые выделяют контейнеры CSS Grid и переключают наложения Grid

Боковая панель, которая позволяет разработчикам персонализировать отображение наложений DOM (к примеру, изменять цвет и ширину)

Редактор CSS-сетки на панели стилей

Давайте разглядим их подробнее.

Постоянное наложение сетки

Наложение в DevTools — это мощнейший инструмент, который предоставляет информацию о макете и стиле отдельного элемента:

Инструменты CSS Grid в DevTools

Эта дополнительная информация накладывается на интересующий элемент. Ранее при наведении курсора на сетку с открытым DevTools наложение показывало информацию о блочной модели, но ограничивало выделение содержимого элементами сетки без разъяснения причин. Есть две основные части, которые мы желали бы добавить для наложений CSS Grid:

мы желаем показать более полезную информацию о сетках, к примеру, созданные размеры и отступы

мы желаем сделать наложения такими, чтобы мы могли сразу смотреть на несколько сеток, и могли созидать наложения, обновляющие информацию сетки, когда мы меняем стили частей

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

Сделанные размеры против вычисленных размеров

Одна из сложных частей отладки CSS Grid — это огромное количество способов определения размеров ячеек сетки. К примеру, вы можете использовать комбинацию значений пикселей, процентных значений, дробей, функции repeat и функции minmax для сотворения универсальных размеров:

CSS

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

Инструменты CSS Grid в DevTools

Строчка перед точкой — это созданные значение, а строчка после точки представляет фактическое вычисленное значение.

Ранее в DevTools не было способности получать созданные значения. Теоретически мы могли бы каким-то образом без помощи других проанализировать созданные значения в DevTools и вычислить их в согласовании со спецификацией CSS Grid. Это потребовало бы огромного количества сложных сценариев и, по сути, было бы просто дублированием усилий. Потому с помощью команды Blink Style, мы получили новый API из движка стилей, который предоставляет «каскадные значения».

Каскадное значение является окончательным действенным значением. Это значение, которое будет задействовано после того, как движок стилей скомпилирует все таблицы стилей, но до фактического вычисления каких-то значений, например процентов, дробей и т. д. Мы используем API для отображения сделанных значений в наложениях сетки.

Неизменные наложения

До использования инструментов CSS Grid наложение в DevTools было обычным: вы наводите курсор на элемент или на панели DOM Tree от DevTools, или непосредственно на проверяемой странице, и вы видите наложение, описывающее этот элемент. Вы убираете курсор, и наложение исчезает. Для наложений сетки мы желали чего-то другого: несколько сеток могут быть выделены сразу, а наложения сетки могут оставаться включенными, в то время как обыденные наложения при наведении по-прежнему работают. К примеру:

Инструменты CSS Grid в DevTools

Но наложения в DevTools не были разработаны с учетом этого многоэлементного механизма (он был сотворен много лет назад). Поэтому нам пришлось реорганизовать дизайн наложения, чтоб все заработало. Мы добавили новый GridHighlightTool в имеющийся набор инструментов выделения, который позже перевоплотился в глобальный PersistentTool для одновременного выделения всех неизменных наложений. Для каждого типа постоянных наложений (Grid, Flex и т. д.) мы сохраняем соответственное поле конфигурации. Каждый раз, когда маркер наложения инспектирует, что рисовать, он также включает эти конфигурации.

Чтоб DevTools мог управлять тем, что необходимо выделить, мы создали новую команду CDP для неизменного наложения Grid:

CSS

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

Значки сетки в реальном времени

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

Инструменты CSS Grid в DevTools

Конфигурации в дереве DOM

Так как Grid значки — не единственные значки, которые мы желали бы отображать в дереве DOM, мы желали бы максимально упростить добавление значков.

Класс ElementsTreeElement, отвечающий за создание и управление отдельными элементами дерева DOM в DevTools, был обновлен несколькими новыми общественными методами для настройки значков. Если для 1-го элемента имеется несколько значков, они сортируются по категориям, а потом по именах в алфавитном порядке, если они находятся в одной категории. Доступные категории включают Security, Layout и т. д.

Как мы получаем обновления стиля в реальном времени?

Многие конфигурации DOM отражаются в дереве DOM DevTools в реальном времени. К примеру, вновь добавленные узлы мгновенно появляются в дереве DOM, а имена удаленных классов также одномоментно исчезают. Мы хотим, чтобы статус значка Grid отражал ту же самую животрепещущую информацию. Однако это оказалось трудным для реализации, поэтому что DevTools не мог получать извещения, когда элементы, отображаемые в дереве DOM, получали вычисленные обновления стиля. Единственный имеющийся способ узнать, когда элемент становится либо перестает быть контейнером сетки, — это повсевременно запрашивать у браузера актуальную информацию о стиле каждого элемента. Это было бы очень дорого.

Чтобы пользовательскому интерфейсу было легче выяснить, когда у элемента обновлен стиль, мы добавили новый способ CDP для опроса обновлений стиля . Чтоб получать обновления стиля узлов DOM, мы начинаем с того, что сообщаем браузеру, какие объявления CSS мы желаем отслеживать. В случае значков Grid мы просим браузер выслеживать:

CSS

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

Панель Layout

Несмотря на то что значки DOM Tree помогают обнаружить доступность CSS-сетки, время от времени мы хотим увидеть список всех CSS-сеток на определенной страничке и легко включать и выключать наложения для отладки их макетов. Потому мы решили создать отдельную боковую панель только для инструментов сборки. Это дает нам выделенное пространство для сбора всех контейнеров сетки и для опции всех параметров наложений сетки. Панель Layout также позволяет нам располагать будущие инструменты для создания макетов (к примеру, Flexbox, запросы контейнера).

Поиск элемента по вычисленным стилям

Чтоб отобразить список контейнеров CSS Grid на панели Layout , нам необходимо найти узлы DOM по вычисленным стилям. Это тоже оказалось тяжело, потому что не все узлы DOM известны DevTools, когда DevTools открыт. Заместо этого DevTools знает только небольшое подмножество узлов, обычно на верхнем уровне иерархии DOM, просто для того, чтоб запустить Devtools DOM Tree. По суждениям производительности другие узлы будут извлечены только по дополнительному запросу. Это значит, что нам нужна новая команда CDP, чтоб собрать все узлы на странице и отфильтровать их по вычисленным стилям:

CSS

Это позволяет веб-интерфейсу DevTools получать перечень контейнеров CSS Grid на странице, и показывать их на панели макета.

Заключение

CSS Grid Tooling были одним из первых проектов инструментов DevTools, поддерживающих функцию веб-платформы. Они дебютировали со многими базовыми инструментами в DevTools, например, постоянными наложениями, значками DOM Tree и панелью Layout, и проложили путь для будущих инструментов в Chrome DevTools, таких как Flexbox и контейнерные запросы. Они также заложили базу для редакторов Grid и Flexbox, которые позволяют разработчикам изменять выравнивание Grid и Flexbox в интерактивном режиме. Мы познакомимся с ними в будущем.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *