Что значит custom css

Пользовательские свойства CSS. Основы

Это перевод “CSS Custom Properties — The Basics” — первой из серии статей Серджио Гомеса о пользовательских свойствах CSS. В ней рассказываются самые основы: что такое пользовательские свойства и как ими пользоваться.

Вы уже слышали о пользовательских свойствах CSS (также известных как CSS переменные) или даже имеете о них некоторое представление? Возможно, вы знаете о них из поста на developers.google.com? Если вы ещё не разобрались в особенностях их поддержки браузерами, не слышали о лучших практиках и не знаете чем они лучше переменных в Sass или Less — читайте дальше!

Поддержка браузерами

Начнём с главного: где работают пользовательские свойства CSS? На самом деле поддержка уже довольно хорошая: полная в Chrome, Opera, Firefox и Safari; Edge в разработке. Отслеживать можно на Can I use CSS Variables (Custom Properties).

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

Задайте значение, любое значение

Что же такое пользовательское свойство? Если коротко, это CSS свойство, которое может быть названо и использовано разработчиком. В отличии от встроенных свойств, таких как color или position, каждое из которых браузер понимает определённым образом, у пользовательского свойства нет иного значения, кроме того, которое ему зададите вы.

Пользовательские свойства отличаются от обычных просто по имени — у них есть префикс ‘ — ’. Браузер ничего не делает с новым свойством. Если задать значение свойству color , то у элементов, соответствующих селектору изменится цвет текста, если задать значение свойству —text-color , то немедленных изменений не произойдёт.

В пользовательских свойствах CSS можно хранить любое валидное CSS значение.

Используйте повторно

От пользовательских свойств было бы мало толку, если бы вы могли только задавать им значения. Как минимум, нужно ещё и получать их обратно!

Для этого есть функция var() .

Здесь мы присваиваем фону кнопки значение, которое хранится в пользовательском свойстве —theme-color . Поначалу может казаться, что нет большой разницы между этим способом и прямым присваиванием значения. Но преимущества становятся более явными, когда мы начинаем использовать —theme-color во многих селекторах и свойствах.

Значения по-умолчанию

Что если —theme-color нигде не задано? var() может принимать необязательный второй параметр, значение которого используется по-умолчанию.

Важно: Если вы хотите использовать в качестве значения по-умолчанию другое пользовательское свойство, корректный синтаксис background-color: var(—theme-color, var(—fallback-color)) ;

Область видимости и каскад

Где нужно задавать эти значения, прежде чем использовать? Пользовательские свойства следуют стандартным правилам насчёт области видимости и каскадирования, так что вы уже знаете как это работает!

Например, для чего-то вроде —theme-color лучше всего использовать глобальную область видимости, чтобы значение было доступно везде. Проще всего это сделать с помощью псевдо-класса :root :

Значение будет доступно в любом месте документа и его смогут использовать все ваши кнопки, заголовки и картинки.

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

И конечно, вы всегда можете сделать исключения, задавая такие сложные селекторы, какие вам нужны.

Математика CSS

В функции calc() часто совмещают разные единицы измерения:

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

Ещё один козырь в рукаве calc() — его можно использовать с пользовательскими свойствами! Такая комбинация может быть очень полезна, поэтому ей уделено особое внимание в спецификации пользовательских свойств.

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

Взаимодействие CSS и JavaScript

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

Пользовательские свойства любого элемента доступны для методов getPropertyValue и setProperty .

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

Более подробно эта тема и лучшие практики использования пользовательских свойств в следующей статье.

Приложение: плагины PostCSS

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

Примите во внимание, что это сработает для организации и повторного использования CSS, но динамическая функциональность, такая как изменение пользовательских свойств с помощью JavaScript будет недоступна.

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

Функциональность	Пример кода	postcss-custom-properties	postcss-css-variables
Определение в области видимости :root	:root	Да.
Определение в других областях видимости	body	Нет.	Да. Может привести к неправильному поведению
Получение значения	.foo	Да.
Получение значения с фолбэком	.foo	Да.
Определение внутри директивы	@media (min-size: 600px) < :root < --color: red; >>	Нет.	Да. Может привести к неправильному поведению
Использование внутри псевдоселектора	.foo:hover	Нет.	Да. Может привести к неправильному поведению
Вычисления	.foo	Да, с помощью postcss-calc.
Изменение с помощью JavaScript	el.style.setProperty( ‘—color’, ‘red’);	Нет. Невозможно с помощью препроцессоров.

Меня зовут Юля. Я работаю верстальщиком и время от времени что-нибудь перевожу.

Источник

Введение в пользовательские CSS-свойства

Автор курса Нетологии «HTML-верстка» Стас Мельников рассказал, что такое пользовательские CSS-свойства и почему их стоит изучить.

Стандарт CSS Custom Properties изменил CSS. Появились безумные возможности, о которых раньше мы могли только мечтать. Рассказываем, какие именно и почему новичкам стоит изучить их как можно быстрее.

Что такое пользовательское свойство

Пользовательское свойство — это CSS-свойство, которое создал сам разработчик. Браузер ничего не знает о таком свойстве, пока его не объявили.
Объявление пользовательского свойства начинается с двойного дефиса, после которого указывают название, ставят двоеточие и добавляют значение.

Для примера объявим пользовательское свойство —netologyBrandColor со значением purple для элемента button :

Теперь браузер знает о нашем свойстве, но в чем его польза?

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

Первая фишка — функция var . С помощью этой функции мы можем сказать браузеру, чтобы он взял значение из объявленного пользовательского свойства и добавил его для встроенного свойства.

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

Для примера добавим пользовательское свойство для встроенных свойств border и color :

В браузере кнопка будет выглядеть так:

Зачем изучать пользовательские свойства, если есть переменные в Sass и они полностью устраивают?

Переменные в препроцессорах, таких как LESS и Sass, помогают организовать код, чтобы нам было проще поддерживать его. Например, в следующем коде я использую переменную $netologyBrandColor , в которой хранится основной цвет бренда:

После преобразования кода в браузере мы увидим следующий код:

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

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

Теперь, если у кнопки сработает состояние hover , значения у свойств border и color изменятся. Именно из-за этой особенности пользовательские свойства и называют «живыми»: они могут изменяться прямо в браузере, и соответственно менять значения встроенных свойств, к которым они применяются.

В качестве еще одного примера изменю значение пользовательского свойства при состоянии focus .

Способность динамического изменения пользовательских свойства можно сочетать с Sass-переменными или LESS-переменными.

Пользовательские свойства и media-выражения

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

Для примера создадим два пользовательских свойства: —mq и —textColor . При помощи первого выведем название медиафункции на страницу, а второе нужно для переключения цвета. На экранах с шириной до 768px текст будет пурпурным, а от 769px — красным.

Пользовательские свойства и функция calc

В CSS есть функция calc , с помощью которой можно выполнять арифметические операции. Она также может работать и с пользовательскими свойствами. Например, мы можем контролировать количество дочерних элементов в ряду:

Если добавить значение 5 для пользовательского свойства —childCount в браузере, увидим следующую картину:

Для разнообразия изменю 5 на 7 и элементы перестроятся.

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

Еще одна возможность пользовательских свойств — с их помощью можно задать значение для таких SVG-свойств, как fill , stroke , stroke-width и других. Это можно сделать двумя способами.

В первом способе будем использовать атрибуты fill , stroke и stroke-width , к которым в качестве значения определим пользовательские свойства.

И добавим в CSS значения для пользовательских свойств:

Слева иконка без стилизации, а справа с нашими настройками. Вот так просто мы можем настраивать графику.

Второй способ — убрать атрибуты их и заменить на CSS-свойства.

Я специально добавил для свойств fill , stroke и stroke-width другие значение, чтобы визуально была заметна разница между примерами.

Поддержка браузерами

Согласно caniuse.com, пользовательские свойства работают в большинстве современных браузеров, кроме IE11.

Если на вашем проекте много пользователей с IE11, не применяйте пользовательские свойства. Я мог бы рассказать, как сделать фоллбэки, но опираясь на свой опыт, считаю, что лучше просто их не использовать.

Если же вам не нужно поддерживать IE11, смело используйте все возможности пользовательских свойств.

Заключение

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

Источник

Кастомные свойства

Удобный способ сохранить повторяющееся значение и потом использовать его в разных местах кода. Как переменные в языках программирования.

Время чтения: 7 мин

Обновлено 21 декабря 2021

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

Конкретный оттенок чёрного #18191C используется по всей странице в совершенно разных элементах: заголовках, тексте, кнопках, полях ввода. Кажется, что это не должно создавать никаких проблем, но на самом деле есть ряд неудобств, которых хотелось бы избежать.

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

Во-вторых, приходится копировать и вставлять HEX-значение цвета, ну или запоминать первые несколько символов, чтобы текстовый редактор сумел нам подсказать.

Все эти неудобства уходят, если использовать CSS-переменные. Чаще их называют кастомные свойства.

Что это и как пишется?

Кастомное свойство — это произвольное свойство с определённым значением. Оно отличается от стандартного CSS-свойства способом записи. Чтобы применить кастомное свойство, нужно передать его в CSS-функцию var() .

Кастомных свойств не существует в спецификации CSS. По способам применения они больше всего похожи на переменные в языках программирования. Если мы определили кастомное свойство, то в дальнейшем можно его переиспользовать сколько угодно раз.

Наследование кастомных свойств

Как и обычные наследуемые свойства (например, font-size ), кастомные свойства наследуются вниз по дереву. Определив переменную в родительском элементе, мы сможем переиспользовать её в любом дочернем элементе:

В примере мы переопределяем значение переменной для карточки с классом .card—primary , и все дочерние элементы меняют цвет. В этом и кроется основная мощь CSS-переменных. Изменяем значение в одном месте, а затрагиваем все места, где используется переменная.

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

В первом примере цвет #18191C используется в самых разных элементах страницы. Мы можем назначить этот цвет кастомному свойству с осмысленным названием и дальше везде использовать именно это свойство. Очень удобно, ведь запомнить название свойства проще, чем HEX-код цвета:

Обратите внимание: кастомные свойства, объявленные в :root , тоже при необходимости могут быть переопределены:

Запасные значения

Если по какой-то причине значение переменной не определено, мы можем передавать в функцию var() второй параметр, который станет «запасным» значением. По аналогии со свойством font-family . Если не найдено первое значение, браузер будет подставлять следующее:

В качестве запасного значения может быть передана функция var() , которая в свою очередь также может иметь запасное значение:

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

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

Используем HEX-запись цвета для свойства color . Это правильно.

Используем размерную величину для свойства color . Это неправильно.

У кастомных свойств всё иначе. Значения вычисляются в браузере непосредственно перед отрисовкой страницы. Браузер заранее не знает, в каком месте будет применено кастомное свойство, поэтому по умолчанию считает любую переменную корректной. И только после подстановки значения свойству браузер узнаёт, правильно ли мы его применили. Для такого поведения есть причины, рассмотрим пример:

В этом примере браузер подставляет значение переменной —big-header ( 20px ) в качестве значения свойства color , но это не имеет смысла. В такой ситуации браузер делает две вещи:

• Проверяет, является ли свойство наследуемым. Если да, то значение для него ищется выше по дереву.
• Если свойство не наследуемое или значение не найдено выше по дереву, то берётся начальное значение по умолчанию ( initial ). Для свойства color у заголовка это будет black .

Использование в JavaScript

В JavaScript значения кастомных свойств используются точно так же, как и значения стандартных CSS-свойств.

Чтобы получить значение:

Чтобы задать значение:

Подсказки

Кастомные свойства можно использовать в любых других функциях. Например, в функции calc() .

В этом примере мы задали значение по умолчанию, равное 1 . Если будет использоваться только класс .logo , браузер установит —size: 1 . Если будет применён один из классов-модификаторов, значение —size будет переопределено, и ширина и высота элемента будут пересчитаны благодаря использованию calc() .

А вот так можно применить CSS-переменную в функции linear-gradient .

На практике

Денис Ежков

🛠 Можно эффективно использовать кастомные свойства при разработке дизайн-системы:

🛠 Кастомные свойства сильно упрощают жизнь, если нужны цветовые схемы или ночная тема:

🛠 Можно даже применять кастомные свойства в инлайновых стилях:

Источник