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

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

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

Обучение в онлайн-университете: курс «Старт в программировании»

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

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

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

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

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

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

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

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

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

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

border: 2px solid var(—netologyBrandColor);

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

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

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

border: 2px solid purple;

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

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

border: 2px solid var(—netologyBrandColor);

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

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

border: 2px solid var(—netologyBrandColor);

outline: 3px solid var(—netologyBrandColor);

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

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

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

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

@media (max-width: 768px) <

@media (min-width: 769px) <

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

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

width: calc(100% / var(—childCount));

Если добавить значение 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, смело используйте все возможности пользовательских свойств.

Заключение

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Источник

Пользовательские свойства 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, каждое из которых браузер понимает определённым образом, у пользовательского свойства нет иного значения, кроме того, которое ему зададите вы.

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

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

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

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

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

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

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

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

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

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

Математика CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

CSS-переменные

CSS-переменные (их ещё называют «пользовательскими свойствами») поддерживаются веб-браузерами уже почти четыре года. Я пользуюсь ими там, где они могут пригодиться. Это зависит от проекта, над которым я работаю, и от конкретных задач, которые мне приходится решать. Работать с CSS-переменными просто, они способны принести разработчику немалую пользу. Правда, часто фронтенд-программисты применяют CSS-переменные неправильно или не понимают особенностей работы с ними.

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

Готовы? Если так — приступим.

Введение

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

Стилизация элементов страницы

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

Именование переменных

Правила именования CSS-переменных не особенно сильно отличаются от правил, принятых в различных языках программирования. А именно, правильное имя CSS-переменной может включать в себя алфавитно-цифровые символы, знаки подчёркивания и дефисы. Кроме того, стоит обратить внимание на то, что имена этих переменных чувствительны к регистру.

Область видимости переменных

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

Вот схема, разъясняющая эту идею.

Область видимости CSS-переменных

Использование резервных значений

Обычно «резервные значения» используются для обеспечения работоспособности сайтов в браузерах, которые не поддерживают некие современные CSS-механизмы. Но здесь речь пойдёт не об этом, а о том, как задавать значения, используемые в том случае, если нужные CSS-переменные оказываются недоступными. Рассмотрим следующий пример:

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

Примеры и сценарии использования CSS-переменных

▍Управление размером компонентов

Компоненты разных размеров

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

▍CSS-переменные и HSL-цвета

HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота) — это цветовая модель, в которой компонент H определяет цвет, а компоненты S и L определяют параметры насыщенности и светлоты цвета.

Цвета элементов, задаваемые с использованием HSL

Если вас интересует тема использования цветов в CSS — вот моя статья об этом.

▍Изменение размеров элементов с сохранением пропорций

Если вы работали в какой-нибудь дизайнерской программе, вроде Photoshop, Sketch, Figma или Adobe XD, то вы можете знать об использовании клавиши Shift при изменении размеров объектов. Благодаря этому приёму можно избежать искажения пропорций элементов.

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

Настройка размеров элемента с помощью CSS-переменных

▍Макеты, основанные на CSS Grid

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

Настройка размеров Grid-элементов с использованием CSS-переменной

Хранение в переменных значений со сложной структурой

▍CSS-градиенты

Под «значениями со сложной структурой» я понимаю, например, нечто вроде градиентов. Если в проекте есть градиент или фон, используемые во многих местах этого проекта, то их описания имеет смысл хранить в CSS-переменных.

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

▍Позиция фона

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

Переключение между тёмной и светлой темами

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

Светлая и тёмная темы

Вот видеодемонстрация вышеозвученной идеи.

Установка значений, применяемых по умолчанию

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

Регулирование ширины элемента-контейнера

Управление шириной элемента-контейнера

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

Встроенные стили

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

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

▍Динамические Grid-элементы

Вот HTML-код элемента:

Вот стиль, применяемый к этому элементу:

Здесь можно поэкспериментировать с примером к этому разделу.

▍Аватары пользователей

Аватары разных размеров

Ещё один интересный вариант использования CSS-переменных во встроенных стилях представлен созданием элементов разных размеров. Предположим, нам, в разных ситуациях, нужно выводить аватар пользователя различных размеров. При этом мы хотим управлять его размером с использованием единственной CSS-переменной.

Проанализируем эти стили:

Медиазапросы

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

Наследование

CSS-переменные поддерживают наследование. Если в пределах родительского элемента объявлена CSS-переменная, то элементы-потомки наследуют эту переменную. Рассмотрим пример.

Тут имеется группа кнопок, к которым предъявляются следующие требования:

Ещё один пример использования механизма наследования CSS-переменных представлен настройкой CSS-анимаций. Этот пример я взял отсюда.

Валидация CSS-переменных

Схема работы браузера при обнаружении некорректного значения CSS-переменной

▍Концепция недопустимого значения, появляющегося во время вычислений

То, о чём шла речь выше, с технической точки зрения, называется «недопустимым значением, появляющимся во время вычислений» (Invalid At Computed-Value Time). Ситуация, в которой появляются такие значения, возникает, когда функции var() передаётся корректная CSS-переменная, значение которой не подходит для записи в настраиваемое с её помощью свойство.

Рассмотрим следующий пример, который я взял из этой статьи:

Вот что говорится об этом в спецификации CSS:

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

Интересные находки

▍Хранение URL в переменных

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

Так поступить не получится, так как функция url() воспринимает всю конструкцию var(—main-bg) в виде URL, а это неправильно. К тому моменту, когда браузер вычислит значение, оно уже будет некорректным, рассмотренная конструкция не будет работать так, как ожидается.

▍Хранение нескольких значений

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

Значение переменной выглядит так, как ожидается

Здесь имеется функция rgba() и RGB-значения, разделённые запятой и записанные в CSS-переменную. Эти значения используются при задании цвета. При таком подходе к использованию функции rgba() у разработчика появляется возможность воздействовать на значение, соответствующее альфа-каналу цвета, настраивая цвет различных элементов.

Вот пример использования CSS-переменной для настройки свойства background :

▍Изменение значений CSS-переменных в теле правила @keyframes

Если нам нужно обеспечить в предыдущем примере плавную анимацию, то делать это надо так, как делалось раньше. То есть — надо заменить переменную на те CSS-свойства элемента, которые нужно анимировать.

Здесь можно поэкспериментировать с примером применения этой возможности.

▍Вычисления

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

Инструменты разработчика различных браузеров и CSS-переменные

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

▍Просмотр цветов, задаваемых с помощью переменных

Я считаю полезной возможность видеть цвет, описываемый CSS-переменной. Эта возможность доступна в браузерах Chrome и Edge.

Просмотр цвета, задаваемого CSS-переменной

▍Вычисляемые значения

Для того чтобы взглянуть на вычисляемое значение CSS-переменной нужно, в зависимости от браузера, навести на переменную указатель мыши или щёлкнуть мышью по специальной кнопке.

Просмотр вычисляемых значений

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

▍Автозавершение ввода

При работе над большими проектами сложно запомнить имена всех используемых в них CSS-переменных. Но благодаря возможностям по автозавершению ввода, доступных в браузерах Chrome, Firefox и Edge, это — не проблема.

Автозавершение ввода имени переменной

Для того чтобы этот механизм заработал — достаточно начать вводить имя переменной.

▍Отключение CSS-переменных

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

Флажки для отключения CSS-переменных

Итоги

Я рассказал довольно много всего о CSS-переменных. Надеюсь, вам пригодится то, что вы сегодня узнали.

Пользуетесь ли вы CSS-переменными в своих проектах?

Источник