Пользовательские свойства. Часть 2: значения и разбиение значений
Часть 2: Значения и разбиение значений на части
Продолжаем знакомиться с кастомными свойствами. В этой части мы поймём, что можно использовать в качестве значения свойств, и познакомимся с полезными приёмами разбиения сложных значений на части.
Кастомные свойства отличаются высокой толерантностью к значениям, которые для них указывают. Можно указывать практически любые значения, которые используются для обычных CSS-свойств, и даже больше.
Браузер не будет «ругаться» или ломать стиль страницы, если переданное значение не корректно. Если свойству присвоено некорректное значение (например, невалидный цвет), это значение просто будет игнорироваться.
Кастомные свойства полезны для работы с многокомпонентными значениями: тенями, градиентами, анимациями, цветами. Особенно, когда нужно изменять только отдельные компоненты значения.
Например, при создании цветовых тем сайта в цветовых значениях вида hsla(0, 0%, 0%, 0.5) или rgba(0, 0, 0, 0.5) часто нужно изменять альфа-канал (прозрачность).
Давайте зададим кнопке цвет фона с помощью hsla, разбитого на несколько компонентов. Польза пока не ясна.
Представьте, что нужно изменить отдельный компонент цвета в одном из состояний кнопки. И тут польза от разбиения значения становится очевидной.
Теперь при :hover и :focus можно подкрутить одно из значений и получить нужный результат.
Наведите на кнопку, чтобы сработал :hover, или сфокусируйтесь на кнопке с помощью клавиши Tab.
И также легко и непринуждённо добавить новое состояния disabled.
Так как элемент «Узнать больше» является ссылкой, то используем класс-модификатор, а не атрибут disabled, который не работает на ссылках.
А теперь взглянем как это делать «по старинке»: придётся указать свойство background-color с полным значением цвета в формате hsla для каждого элемента. Если потребуется изменить цвет, придётся это делать в каждом месте, где он используется.
Благодаря кастомным свойствам мы можем делать только то, что нужно, например подкручивать отдельные параметры hsla.
Также не сразу понятно какой из H S L A изменён у того или иного состояния кнопки. С кастомными свойствами, мы можем сразу увидеть, что именно изменяется по имени свойства, например --h. Так что и тут хорошее именование пригодилось.
Тени также можно разбить на несколько частей. При наведении на карточку товара можно изменить только некоторые компоненты тени.
Чтобы посмотреть эффект наведите на карточку товара курсором.
С помощью разбиения значения можно изменить часть линейного градиента, например, только угол поворота.
Чтобы посмотреть эффект наведите курсором на карточку.
Разделить на части можно практические всё что угодно: например гриды и трансформации.
В превью вы не увидите эффекта для работы гридов.
Разделение «простых» значений с единицами измерения на части тоже возможно. Хотя работает не совсем так, как хотелось бы.
В этом примере мы пытаемся разделить 20px на 20 и px, чтобы на планшетном разрешении поменять только число, с 20 на 24. Но текущий способ не сработает.
Значение у .card__title сейчас наследуется от body и равняется 16px.
Для решения этой задачи можно оставить только --value, а единицу измерения получить с помощью умножения на 1px в функции calc(). Очень старый метод, но он работает.
Можете поизменять ширину мини-браузера, чтобы увидеть, как меняется размер заголовка.
Вторая часть курса про кастомные свойства завершена. Давайте закрепим то, что мы узнали:
- Значением кастомного свойства может быть практически любое значение, которое может быть использовано в CSS.
- Браузер не будет ругаться на некорректные значения, а просто их проигнорирует.
- Комплексные значения можно разбить с помощью кастомных свойств на несколько частей. Приём отлично работатет для цветов, теней, градиентов, гридов, трансформаций и анимаций.
- После разбиения можно менять отдельные части комплексных значений, а не значения целиком.
- С помощью приёма с
calc() можно разбивать на части даже «простые» значения, например 20px на 20 и px.
