Пользовательские свойства CSS удобны для создания настраиваемых компонентов и стилей CSS. Но сфера их применения этим не ограничивается. Используя пользовательские свойства, можно обрабатывать информацию в JavaScript
В прошлом, чтобы получить текущую контрольную точку без запроса ширины окна чаще всего делали что-то подобное:
CSS:
body::before {
content: 'mobile';
display: none;
}
@media screen and (min-width: 30rem) {
body::before {
content: 'large-mobile';
}
}
@media screen and (min-width: 70rem) {
body::before {
content: 'desktop';
}
}
JavaScript:
function getBreakpoint() {
return getComputedStyle(document.querySelector('body'), ':before')
.getPropertyValue('content')
.replace(/"/g, '');
}
Данный подход хорошо справляется со своей задачей. Но пользовательские свойства CSS обладают большей гибкостью.
Функция getCSSCustomProp
Нужно было посмотреть, поддерживается ли Scroll Snap в моем компоненте JavaScript. Потом было понятно, что CSS может предоставить решение для этого вопроса.
Было установлено значение по умолчанию для компонента следующим образом:
.my-component {
--supports-scroll-snap: 0;
}
Потом, используя @supports, можно сделать следующее:
@supports (scroll-snap-type: x mandatory) {
.my-component {
--supports-scroll-snap: 1;
}
}
Затем JavaScript обрабатывает полученные данные:
const myComponent = document.querySelector('.my-component');
const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean');
Все это работает благодаря приведенной ниже функции:
/**
* Передаем элемент и его пользовательские свойства, значение которого нам необходимо.
* Мы можем определить, какой тип данных получим в итоге.
*
* @param {String} propKey
* @param {HTMLELement} element=document.documentElement
* @param {String} castAs='string'
* @returns {*}
*/
const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => {
let response = getComputedStyle(element).getPropertyValue(propKey);
// Если нужно, приводим в порядок строку
if (response.length) {
response = response.replace(/"/g, '').trim();
}
// Преобразуем возвращаемые данные в любой желаемый тип
switch (castAs) {
case 'number':
case 'int':
return parseInt(response, 10);
case 'float':
return parseFloat(response, 10);
case 'boolean':
case 'bool':
return response === 'true' || response === '1';
}
// Возвращаем результат
return response;
};
Заключение
Надеюсь, эта статья была вам полезна. Этот метод отличается от того, что его использовали для точек остановки в body. Основное отличие состоит в том, что мы передаем реальные свойства, а не скрываем значения. Так код стал намного чище.
Можете взять эту функцию из Gist, и, надеюсь, когда-нибудь она вам пригодится.
#js #javascript #it #css