Пользовательские свойства

Пользовательские свойства (Custom Properties) — это стили, которые можно добавить для элементов дополнительно к стандартным свойствам, доступным в панели Дизайн. Они позволяют управлять дизайном практически без ограничений.

Как добавить пользовательское свойство

Чтобы добавить пользовательское свойство для элемента:

1. Выделите элемент, а затем проскрольте вниз панели Дизайна — там расположен блок Пользовательские свойства.

2. Нажмите на «+» — добавится новая строка для свойства.

3. Выберите из списка нужное CSS-свойство или введите его вручную. Можно начать вводить название для быстрого поиска по списку с последующим выбором свойства.

4. Введите нужное значение свойства вместе с единицами измерения (если они используются для этого свойства). Например, 10px.

Если вы не ввели значение свойства или ввели недопустимое значение, отображается предупредительный знак.

Если значение введено правильно, и предупреждающих знаков нет, то оно будет применено к элементу.

Как добавить список из нескольких пользовательских свойств

Вы можете добавлять в Custom properties не по одному свойству, а сразу целый список скопированных свойств, например из Figma.

Для этого скопируйте нужные свойства, нажмите на «+» в блоке Пользовательские свойства, а затем — Ctrl + V, чтобы вставить свойства.

Все скопированные свойства сразу добавятся в блок.

Особенности пользовательских свойств

1. Если свойство задано в Custom Properties, то его редактирование на панели стилей будет недоступно и перекрыто серой плашкой с подсказкой.

2. Значение, заданное для свойства в Custom Properties, перекрывает значение, заданное на панели стилей.

Например, если вы сначала зададите на панели стилей ширину блока 500px, а потом добавите для него пользовательское свойство width: 700px, то ширина блока будет 700px.

3. Одному элементу можно добавить несколько пользовательских свойств.

4. Свойства из Custom Properties можно добавлять как в локальные стили, так и в пользовательский класс.

5. Удаление свойства происходит по аналогии с другими стилями в правой панели. Можно либо нажать на иконку «–», либо зажать клавишу Shift, навести курсор и нажать Сброс.

Как использовать пользовательские свойства на практике

При помощи пользовательских свойств можно реализовать многое из того, что не получается сделать с помощью стандартной панели стилей.

Например:

• aspect-ratio — задает соотношение сторон для элемента и позволяет вычислить незаданную сторону, исходя из размера уже известной.
• clip-path — позволяет задать нестандартные формы обрезки элемента.
• float — используется для позиционирования элемента и позволяет сделать обтекание текста для изображений и блоков.
• единицы измерения dvh, lvh, svh и др. — очень полезны для адаптивного дизайна.

В итоге, если нужно задать недостающие стили элементу, можно не использовать виджет Embed или пользовательский код страницы — вы можете просто добавить нужные свойства в Custom Properties. Это делает верстку и внесение правок в стили гораздо проще — не нужно искать параметры в общем коде, можно просто зайти в настройки элемента.

Посмотрим, как использовать Custom Properties на примере.

Как сделать обтекание картинки текстом

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

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

То же самое можно сделать гораздо проще и удобнее с помощью свойства float:

1. Выберите картинку и добавьте ей свойство float со значением left.

Это означает, что картинка будет слева, а текст будет обтекать ее справа.

2. Выберите текст и задайте ему блочное отображение.