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

Содержание

Добавьте заголовки в ваш документ, чтобы сгенерировать содержание.

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

В панели Дизайн вы можете настроить 109 основных свойств элементов. Custom Properties расширяют количество параметров до 363 свойств. Доступны почти все свойства CSS, поддерживаемые большинством современных браузеров.

Важно: В пользовательских свойствах вы можете задать любые параметры стилей, включая те, что недоступны для изменения на панели стилей. Но будьте осторожны: неправильные настройки могут повлиять на верстку. Проверяйте совместимость параметров, чтобы избежать ошибок!

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

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

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

Блок Пользовательские свойства на панели Дизайна

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

Добавьте новое свойство

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

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

Выберите или введите название свойства

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

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

Введите значение свойства

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

Значение свойства не введено

Значение свойства введено неверно

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

Свойство float: left применилось к элементу

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

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

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

Нажмите «+», а затем Ctrl + V

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

Добавленные пользовательские свойства

Из скопированного списка будут добавлены только валидные свойства. Если в названии свойства или его значении будут ошибки, то свойство не будет добавлено.

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

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

Свойство width недоступно для редактирования в стилях

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

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

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

Элементу заданы два пользовательских свойства

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

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

Удаление добавленного свойства через клавишу Shift

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

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

Например:

aspect-ratio — задает соотношение сторон для элемента и позволяет вычислить незаданную сторону, исходя из размера уже известной.

clip-path — позволяет задать нестандартные формы обрезки элемента.

float — используется для позиционирования элемента и позволяет сделать обтекание текста для изображений и блоков.

единицы измерения dvh, lvh, svh и др. — очень полезны для адаптивного дизайна.

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

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

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

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

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

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

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

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

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

Готово! Теперь текст обтекает картинку справа. Вам не нужно больше использовать два отдельных текстовых блока для текста справа и снизу.

Еще больше примеров использования Custom Properties в Taptop — смотритездесь.