Отладка CSS Grid как профи

Отладка CSS Grid как профи

От создателя: сейчас вы сможете применять Chrome DevTools для зрительной проверки CSS-сеток и их отладки.

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

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

Иными словами, CSS Grids сначала приносит пользу как разрабам, так и дизайнерам. Потому в данной для нас статье я проведу вас через проверку и отладку заморочек макета странички при помощи Chrome DevTools, помогая обеим сторонам.

Отладка CSS-сеток при помощи Chrome DevTools

Когда вы разрабатываете интернет-страницы, вы когда-нибудь ощущали, что для вас необходимо созидать, как перекрываются полосы сетки, номера строк либо наименования областей сетки? Было бы весьма полезно осознать, что происходит за кулисами CSS Grid, правильно?

Итак, не плохая новость в том, что Chrome DevTools выпустила поддержку отладки CSS-сетки в октябре 2020 года.

Сейчас давайте поглядим, как мы можем инспектировать и отлаживать задачи с макетом при помощи Chrome DevTools.

Начать работу с отладкой Grid весьма просто! Когда display:grid либо display:inline-grid использовано к HTML — элементу, рядом с элементом на панели частей можно узреть значок grid. Если вы наведете указатель мыши на значок сетки, вы увидите, что над элементом возникает наложение, схожее сетке, для отображения положения его линий сетки и треков.

Отладка CSS Grid как профи

Значок сетки в панели Элементы

Видите ли, в представлении «Макет» панели CSS возник новейший раздел под заглавием «Сетка», содержащий ряд характеристик, которые посодействуют для вас лучше изучить сетку.

READ
Джон Мюллер о ссылках как о факторе ранжирования Google

Совет. Если представление «Макет» не возникло в нижней части Chrome DevTools, откройте «Показать опыты» в меню установок (Ctrl + Shift + P) и установите флаг «Включить новейшие функции отладки CSS Grid». Может быть, для вас будет нужно перезагрузить DevTools, чтоб применить конфигурации.

Сейчас давайте разглядим разные характеристики, доступные в разделе «Сетка». Этот раздел состоит из 2-ух подразделов.

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

Этот раздел содержит перечень всех сеток, присутствующих на страничке, с флагом, и, включая и выключая наложения сетки, вы сможете избрать сетки, которые желаете отлаживать. В наложениях сетки вы сможете:

Включить наложение нескольких видов сеток.

Отладка CSS Grid как профи

Несколько сеток включены в наложениях сетки

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

Настроить цвет наложения сетки.

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

Отладка CSS Grid как профи

Настройка цвета наложения сетки при помощи цветовой палитры

Выделить сетку

Вы сможете сходу выделить элемент HTML, к которому относится определенная запись сетки, щелкнув значок выделения.

Отладка CSS Grid как профи

Выделение параметра сетки в наложениях сетки

Ой! Я упоминал, что вы сможете настроить наложение сетки? Что ж, сейчас ты можешь это создать. Характеристики отображения наложения, 2-ой подраздел посвящен разным свойствам, которые помогают лучше визуализировать и отлаживать сетку.

Опции отображения наложения

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

Показать номера строк

По дефлоту номера строк показываются в наложенной сетке.

Отладка CSS Grid как профи

Параметр Показать номера строк в настройках отображения наложения

Показать имена линий

READ
Почему не стоит часто редактировать редиректы на сайте

При выбирании этого параметра из перечня заместо номеров будут отображаться имена строк.

Отладка CSS Grid как профи

Параметр Показать имена линий в настройках отображения наложения

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

Скрыть метки линий

Буквально так же у вас есть возможность скрыть метки линий и номера линий для всякого наложения сетки.

Отладка CSS Grid как профи

Параметр «Скрыть метки линий» в настройках отображения наложения

Показать размеры линий

Включив эту опцию, вы сможете просмотреть размер дорожки сетки. DevTools показывает [authored size].[computed size] для каждой метки строчки, где сделанный размер — это размер, определенный в таблице стилей, а вычисленный размер — это фактический размер на дисплее.

Отладка CSS Grid как профи

Параметр Показать размер линий в настройках отображения наложения

Как вы сможете созидать выше, для каждой метки строчки столбца показываются как авторские, так и вычисленные размеры. Но для меток строк строк можно узреть лишь вычисленный размер. Это поэтому, что color-box размеры столбцов определены в CSS, а для строк в таблице стилей не определен размер строчки.

Показать имена областей

Вы сможете переключаться меж отображением либо скрытием имени области в случае сеток с именованными областями сетки. Как вы сможете созидать в последующем примере, в сетке есть четыре области: top1, top2, top3 и bottom.

Отладка CSS Grid как профи

Параметр отображения имени области в настройках отображения наложения

Продлить полосы сетки

По дефлоту полосы сетки можно узреть лишь снутри элемента, с установленными на нём display: Grid либо display: inline-grid. Включив эту опцию, вы сможете продлить полосы сетки до края области просмотра вдоль оси.

READ
Главная страница сайта может отображаться в выдаче вместо других

Отладка CSS Grid как профи

Параметр наружных линий сетки в настройках отображения наложения

Видите ли, все характеристики, упомянутые выше, помогают нам найти, какой блок и где рендерить.

Заключение

Хотя бессчетные инструменты помогают Front-End разрабам создавать сайты на базе сетки, введение в CSS Grid Layout является принципиальным моментом.

Не считая того, CSS Grid прошел длинный путь с момента собственного возникновения в 2011 году. Сейчас он поддерживается всеми главными браузерами.

С ростом популярности результаты исследования State of CSS Survey в 2020 году демонстрируют, что внедрение CSS Grid возросло на 18,6% по сопоставлению с 2019 годом.

Благодаря недавнешней поддержке DevTools процесс отладки стал наиболее удобным, чем когда-либо до этого. Как я уже упоминал ранее, DevTools упрощает работу с сетью CSS. Вы сможете визуализировать все данные сетки, инспектировать и отлаживать возникшие задачи одним нажатием клавиши. Не считая того, познание характеристик панели макета поможет для вас отлаживать сетку CSS как профи! Спасибо за чтение!

Создатель: Nethmi Wijesinghe

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий