От автора: одной из самых больших битв, которые мы наблюдаем в мире веб-разработки, все еще остается CSS против JavaScript. У обоих есть свои достоинства, собственный синтаксис и идеи, и их может быть сложно понять.
Вот почему мне нравится, что у нас есть способы совместить эти технологии и использовать каждую для того, в чем она лучше. Во-первых, меня всегда раздражало манипулирование объектом стилей элемента DOM. Это означало доступ к элементу и установку различных свойств стиля. В конце концов, это привело к появлению встроенного атрибута стиля, который вы никогда не написали бы вручную.
Для меня более понятный способ — использовать пользовательские свойства CSS. Их обычно называют CSS переменными, и вы определяете их в CSS с помощью синтаксиса —.
1 2 3 4 5 6 |
:root { --pagebackground: powderblue; } body { background: var(--pagebackground); } |
Так как это переменные, вы можете повторно использовать их в своем документе стилей. Самое интересное начинается, когда вы используете JavaScript для управления ими. В этом примере пользовательское свойство CSS устанавливается для корневого элемента документа. Итак, вы можете прочитать его с помощью JavaScript, используя следующее.
1 2 |
let bg = getComputedStyle(document.documentElement). getPropertyValue('--pagebackground'); |
И вы можете установить его с помощью JavaScript, получив доступ к стилю корневого элемента (или любого другого элемента с пользовательскими свойствами) и установив свойство.
Так как это переменные, вы можете повторно использовать их в своем документе стилей. Самое интересное начинается, когда вы используете JavaScript для управления ими. В этом примере пользовательское свойство CSS устанавливается для корневого элемента документа. Итак, вы можете прочитать его с помощью JavaScript, используя следующее.
1 |
document.documentElement.style.setProperty('--pagebackground', 'firebrick'); |
Вы можете попробовать это вживую на codepen:
Самое замечательное в этом то, что вы можете использовать возможности JavaScript, чтобы предоставить CSS то, к чему он не может получить доступ. Например, CSS не может прочитать координаты курсора мыши, а JavaScript может. В нашем CSS мы можем определить два свойства как 0:
1 2 3 4 |
:root { --mouse-x: 0; --mouse-y: 0; } |
А в JavaScript мы добавляем в документ обработчик mousemove и манипулируем этими двумя свойствами:
1 2 3 4 5 |
let root = document.documentElement document.addEventListener('mousemove', e => { root.style.setProperty('--mouse-x', e.x); root.style.setProperty('--mouse-y', e.y); }); |
И это все, что нам нужно. Поскольку пользовательские свойства CSS являются действующими и меняют свое значение, теперь мы можем, например, показать кружок, в котором находится курсор мыши в CSS, используя следующее.
Наш HTML:
1 |
<div id="ball"></div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
:root { --mouse-x: 0; --mouse-y: 0; } #ball { width: 20px; height: 20px; background: white; border-radius: 100%; transform: translate( calc(calc(var(--mouse-x) - 10) * 1px), calc(calc(var(--mouse-y) - 10) * 1px) ); } |
Здесь некоторая информация о CSS:
Мы устанавливаем ширину и высоту шара DIV равными 20 пикселей, а фон — белым.
Добавление границы-радиуса 100% гарантирует, что мы получим круг, а не квадрат.
Затем мы используем transform: translate, чтобы разместить круг на экране. Это может быть что-то вроде transform: translate (200px, 300px), чтобы расположить наш круг на 200 пикселей по горизонтали и 300 пикселей по вертикали.
Поскольку JavaScript устанавливает для пользовательского свойства CSS числовое значение, нам необходимо преобразовать его в пиксели, умножив на 1 пиксель.
А поскольку размер шара составляет 20 пикселей, мы не можем просто поместить его в точку mouse-x и mouse-y, а нам нужно вычесть из него 10, чтобы центрировать его на курсоре.
Этот трюк позволяет нам выполнять сложные вычисления, считывать состояние браузера и состояние взаимодействия в JavaScript и при этом сохранять внешний вид в CSS. Для меня это победа.
Если вы хотите увидеть это в действии, вы можете попробовать этот код. Я также добавил фоновый эффект, чтобы показать, как можно повторно использовать данные x и y мыши:
Автор: Christian Heilmann
Источник: christianheilmann.com
Редакция: Команда webformyself.