От автора: 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 — это мощный инструмент, который предоставляет информацию о макете и стиле отдельного элемента:
Эта дополнительная информация накладывается на интересующий элемент. Раньше при наведении курсора на сетку с открытым DevTools наложение отображало информацию о блочной модели, но ограничивало выделение содержимого элементами сетки без объяснения причин. Есть две основные части, которые мы хотели бы добавить для наложений CSS Grid:
мы хотим показать более полезную информацию о сетках, например, созданные размеры и отступы
мы хотим сделать наложения такими, чтобы мы могли одновременно смотреть на несколько сеток, и могли видеть наложения, обновляющие информацию сетки, когда мы меняем стили элементов
Давайте посмотрим, как мы достигли и того, и другого.
Созданные размеры против вычисленных размеров
Одна из сложных частей отладки CSS Grid — это множество способов определения размеров ячеек сетки. Например, вы можете использовать комбинацию значений пикселей, процентных значений, дробей, функции repeat и функции minmax для создания универсальных размеров:
.grid-cards { display: grid; width: 200px; height: 300px; grid-template-rows: 20% 0.3fr 100px minmax(100px, auto); grid-template-columns: repeat(3, minmax(200px, 1fr));
}Однако было бы трудно сопоставить эти размеры с вычисленными размерами ячеек, которые браузер рассчитал для нас. Чтобы восполнить этот пробел, мы помещаем эти два фрагмента информации рядом друг с другом на одном наложении:
Строка перед точкой — это созданные значение, а строка после точки представляет фактическое вычисленное значение.
Ранее в DevTools не было возможности получать созданные значения. Теоретически мы могли бы каким-то образом самостоятельно проанализировать созданные значения в DevTools и вычислить их в соответствии со спецификацией CSS Grid. Это потребовало бы множества сложных сценариев и, по сути, было бы просто дублированием усилий. Поэтому с помощью команды Blink Style, мы получили новый API из движка стилей, который предоставляет «каскадные значения».
Каскадное значение является окончательным эффективным значением. Это значение, которое будет задействовано после того, как движок стилей скомпилирует все таблицы стилей, но до фактического вычисления каких-либо значений, например процентов, дробей и т. д. Мы используем API для отображения созданных значений в наложениях сетки.
Постоянные наложения
До использования инструментов CSS Grid наложение в DevTools было простым: вы наводите курсор на элемент либо на панели DOM Tree от DevTools, либо непосредственно на проверяемой странице, и вы видите наложение, описывающее этот элемент. Вы убираете курсор, и наложение исчезает. Для наложений сетки мы хотели чего-то другого: несколько сеток могут быть выделены одновременно, а наложения сетки могут оставаться включенными, в то время как обычные наложения при наведении по-прежнему работают. Например:
Однако наложения в DevTools не были разработаны с учетом этого многоэлементного механизма (он был создан много лет назад). Поэтому нам пришлось реорганизовать дизайн наложения, чтобы все заработало. Мы добавили новый GridHighlightTool в существующий набор инструментов выделения, который позже превратился в глобальный PersistentTool для одновременного выделения всех постоянных наложений. Для каждого типа постоянных наложений (Grid, Flex и т. д.) мы сохраняем соответствующее поле конфигурации. Каждый раз, когда маркер наложения проверяет, что рисовать, он также включает эти конфигурации.
Чтобы DevTools мог управлять тем, что нужно выделить, мы создали новую команду CDP для постоянного наложения Grid:
# Выделение нескольких элементов с помощью наложения CSS Grid. command setShowGridOverlays parameters # Массив идентификаторов узлов и дескрипторов для отображения выделения. array of GridNodeHighlightConfig gridNodeHighlightConfigs
где каждый GridNodeHighlightConfig содержит информацию о том, какой узел рисовать и как его рисовать. Это позволяет нам добавить механизм с несколькими элементами без нарушения текущего поведения при наведении курсора.
Значки сетки в реальном времени
Чтобы помочь разработчикам легко включать и выключать наложения сетки, мы решили добавить небольшие значки рядом с контейнерами сетки в дереве DOM. Эти значки также могут помочь разработчикам идентифицировать контейнеры в своих структурах DOM.
Изменения в дереве DOM
Поскольку Grid значки — не единственные значки, которые мы хотели бы отображать в дереве DOM, мы хотели бы максимально упростить добавление значков.
Класс ElementsTreeElement, отвечающий за создание и управление отдельными элементами дерева DOM в DevTools, был обновлен несколькими новыми публичными методами для настройки значков. Если для одного элемента имеется несколько значков, они сортируются по категориям, а затем по именах в алфавитном порядке, если они находятся в одной категории. Доступные категории включают Security, Layout и т. д.
Как мы получаем обновления стиля в реальном времени?
Многие изменения DOM отражаются в дереве DOM DevTools в реальном времени. Например, вновь добавленные узлы мгновенно появляются в дереве DOM, а имена удаленных классов также мгновенно исчезают. Мы хотим, чтобы статус значка Grid отражал ту же самую актуальную информацию. Однако это оказалось трудным для реализации, потому что DevTools не мог получать уведомления, когда элементы, отображаемые в дереве DOM, получали вычисленные обновления стиля. Единственный существующий способ узнать, когда элемент становится или перестает быть контейнером сетки, — это постоянно запрашивать у браузера актуальную информацию о стиле каждого элемента. Это было бы слишком дорого.
Чтобы пользовательскому интерфейсу было легче узнать, когда у элемента обновлен стиль, мы добавили новый метод CDP для опроса обновлений стиля . Чтобы получать обновления стиля узлов DOM, мы начинаем с того, что сообщаем браузеру, какие объявления CSS мы хотим отслеживать. В случае значков Grid мы просим браузер отслеживать:
{ "display": "grid", "display": "inline-grid",
}Затем мы отправляем пул реквест, и когда на панели элементов отслеживаются обновления стиля, браузер отправляет список обновленных узлов и разрешает существующий пул реквест. Всякий раз, когда DevTools снова хочет получать уведомления об обновлениях стиля, он может отправить этот пул реквест вместо того, чтобы постоянно опрашивать серверную часть от каждого узла. DevTools также может изменять отслеживаемые объявления CSS, отправляя новый список в браузер.
Панель Layout
Хотя значки DOM Tree помогают обнаружить доступность CSS-сетки, иногда мы хотим увидеть список всех CSS-сеток на определенной странице и легко включать и выключать наложения для отладки их макетов. Поэтому мы решили создать отдельную боковую панель только для инструментов компоновки. Это дает нам выделенное пространство для сбора всех контейнеров сетки и для настройки всех параметров наложений сетки. Панель Layout также позволяет нам размещать будущие инструменты для создания макетов (например, Flexbox, запросы контейнера).
Поиск элемента по вычисленным стилям
Чтобы отобразить список контейнеров CSS Grid на панели Layout , нам нужно найти узлы DOM по вычисленным стилям. Это тоже оказалось непросто, потому что не все узлы DOM известны DevTools, когда DevTools открыт. Вместо этого DevTools знает только небольшое подмножество узлов, обычно на верхнем уровне иерархии DOM, просто для того, чтобы запустить Devtools DOM Tree. По соображениям производительности другие узлы будут извлечены только по дополнительному запросу. Это означает, что нам нужна новая команда CDP, чтобы собрать все узлы на странице и отфильтровать их по вычисленным стилям:
# Поиск узлов с заданным вычисленным стилем в поддереве .experimental command getNodesForSubtreeByStyle parameters # Node ID указывающий на корень поддерева. NodeId nodeId # Стиль для фильтрации узлов (включает узлы, если какое-либо из свойств совпадает). array of CSSComputedStyleProperty computedStyles optional boolean pierce returns # Результирующие узлы. array of NodeId nodeIds
Это позволяет веб-интерфейсу DevTools получать список контейнеров CSS Grid на странице, и отображать их на панели макета.
Заключение
CSS Grid Tooling были одним из первых проектов инструментов DevTools, поддерживающих функцию веб-платформы. Они дебютировали со многими фундаментальными инструментами в DevTools, например, постоянными наложениями, значками DOM Tree и панелью Layout, и проложили путь для будущих инструментов в Chrome DevTools, таких как Flexbox и контейнерные запросы. Они также заложили основу для редакторов Grid и Flexbox, которые позволяют разработчикам изменять выравнивание Grid и Flexbox в интерактивном режиме. Мы познакомимся с ними в будущем.
Автор: Changhao Han
Источник: developer.chrome.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен