От автора: за последние несколько итераций 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.