От автора: пользовательские свойства CSS удобны для создания настраиваемых компонентов и тем, но это не единственный вариант использования. Иногда вы можете захотеть использовать совместную работу CSS и JavaScript.
В прошлом я делал что-то вроде этого, чтобы получить текущую контрольную точку без запроса ширины window:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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'; } } |
1 2 3 4 5 |
function getBreakpoint() { return getComputedStyle(document.querySelector('body'), ':before') .getPropertyValue('content') .replace(/\"/g, ''); } |
Этот подход хорошо справляется с задачей, но с помощью пользовательских свойств CSS мы можем получить немного больше гибкости, и использование свойств для отправки значений кажется… ну… более правильным.
Функция getCSSCustomProp
Мне нужно было посмотреть, поддерживается ли привязка прокрутки CSS в компоненте JavaScript и с поиском решения на JavaScript было слишком долго возиться. До меня дошло, что CSS может для меня сделать это и передать статус обратно в JavaScript с помощью небольшой магии.
Я установил значение по умолчанию для компонента следующим образом:
1 2 3 |
.my-component { --supports-scroll-snap: 0; } |
Затем, используя @supports, я могу сделать это:
1 2 3 4 5 |
@supports (scroll-snap-type: x mandatory) { .my-component { --supports-scroll-snap: 1; } } |
Затем, наконец, JavaScript запускает это:
1 2 |
const myComponent = document.querySelector('.my-component'); const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean'); |
Это все работает от этой функции:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/** * Передаем элемент и его пользовательское свойство CSS, значение которого вы хотите получить. * Опционально вы можете указать, какой тип данных вы получите. * * @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, и, надеюсь, она вам поможет.
Автор: Andy
Источник: //andy-bell.design
Редакция: Команда webformyself.