15
Авг
2019

Использование пользовательских атрибутов CSS, сгенерированных JavaScript, в качестве механизма передачи

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

В прежние времена HTML создавал структуру, CSS-стиль, а JavaScript — интерактивность. Или, как я сказал в своей книге в 2006 году, если бы ваш сайт был фильмом, HTML был бы сценарием, CSS — режиссурой, а JavaScript — спецэффектами.

В настоящее время CSS гораздо более мощный. У нас есть анимация, переходы, calc() и гораздо более гибкие значения, такие как em, rem, vw, vh и другие. У нас также есть интерактивность с помощью псевдо-селекторов, таких как hover, focus, и состояния интерактивных элементов, таких как кнопки. Мы можем даже хакнуть чек-боксы, чтобы писать полноценные игры на чистом CSS.

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

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

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

Раньше единственным способом сделать это было хранить классы в родительских элементах или удалять классы при выполнении определенных условий. Но с пользовательскими свойствами («переменные CSS») стало намного проще взаимодействовать между JavaScript и CSS.

Пользовательские свойства позволяют устанавливать «переменные» в CSS и использовать их позже. Например:

::root {
 — company-blue: #369;
}h1 {
 color: var( — company-blue);
}

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

Как объясняет мой коллега Грег Витворт: «Это не совсем верно в отношении пользовательских реквизитов. Проблема, на которую, я думаю, вы в первую очередь ссылаетесь, — это потенциальные ограничения в CSS в целом, хотя я заметил, что Шиме уже показал вам, что конкатенация может быть выполнена, но, вероятно, не во всех сценариях, где единственное желание состоит в том, чтобы объединить реальные строки (например: “bar” calc(5 + 8) будет преобразовано \”foo\” calc(58), так как оно не является допустимым calc и, следовательно, они также преобразуются в строку, но с экранированными кавычками. Все в переменной разбивается на токены Таким образом, это может быть строка или нет, в зависимости от того, какое значение определено токенизатором. Если это не недопустимый идентификатор, но не тот, который может быть сопоставлен, то он преобразуется в строку для использования в CSS. Все, что передано в JS, преобразуется в строку. Вы можете увидеть это в этом JSBin«.

Самый простой способ изменить пользовательские свойства CSS — это использовать calc(), чтобы умножить их на значение:

::root {
 --startwidth: 200;
}h1 {
 width: (var( --startwidth) * 1px);
}
h2 {
 width: (var( --startwidth) * 0.5px);
}

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

window.addEventListener('scroll', (e) => {
 document.body.style.setProperty(' --scrolly', window.scrollY);
});

h1 {
 position: fixed;
 width: calc(var( — scrolly)*1px); 
 background: #339;
}

Вы можете посмотреть этот JSBin. Это ни в коем случае не разумная демонстрация, но мне действительно нравится тот факт, что вы можете использовать JavaScript, чтобы достичь того, чего не может в CSS, и все же позволить CSS быть основным драйвером и определителем интерактивности.

Автор: Christian Heilmann

Источник: https://medium.com

Редакция: Команда webformyself.

Share

Тебе может это понравится...

Добавить комментарий