Изначально это было опубликовано на моем собственном сайте.
На прошлой неделе я сделал сайт для подкаста Clearleft. Дизайн в основном взят прямо с остальной части веб-сайта Clearleft. Главное отличие — это топ. Если окно браузера достаточно широкое, справа есть фоновое изображение.
Я в основном добавил это, потому что мне казалось, что дизайн был немного несбалансированным без чего-то там. На главной странице моя фотография. Какой-то сырный. Но изображение можно заменить. На других страницах есть разные фотографии. Все, что для этого требуется, — это другое имя класса на этой шапке.
Я думал о том, чтобы изображение было полностью случайным (и я все еще мог бы сделать это). Мне пришлось бы использовать немного JavaScript, чтобы случайным образом выбрать имя класса из списка возможных значений. Что-то вроде этого:
var names = ['jeremy','katie','rich','helen','trys','chris'];
var name = names[Math.floor(Math.random() * names.length)];
document.querySelector('.masthead').classList.add(name);(Вы можете вставить это в консоль инструментов разработчика, чтобы увидеть его в действии на сайте подкастов.)
Потом я прочитал что-то совершенно не относящееся к делу. Кэсси написала на своем сайте фантастическую статью под названием Making lil’ me — part 1. В нем она описывает, как она сделала управляемую мышью анимацию своего аватара в нижнем колонтитуле своей домашней страницы.
Это такая хорошо написанная техническая статья. Она объясняет логику того, что делает, и переводит эту логику в код. Затем, познакомив вас с нативным кодом, она покажет, как можно использовать библиотеку Greeksock для достижения того же эффекта. Вот как это сделать! Вместо того, чтобы сказать: «Вот библиотека, которая сэкономит вам время — не беспокойтесь о том, как она работает!», она говорит: «Вот она работает без библиотеки; вот как это работает с библиотекой; теперь вы можете сделать осознанный выбор того, что использовать». Это очень вдохновляющий подход.
Как бы то ни было, в статье Кэсси демонстрирует, как можно использовать настраиваемые свойства в качестве моста между JavaScript и CSS. JavaScript считывает положение мыши и соответствующим образом обновляет некоторые пользовательские свойства. Те же пользовательские свойства используются в CSS для позиционирования. Вуаля! Теперь у вас есть позиция элемента, реагирующего на движения мыши.
Вот что навело меня на мысль о фрагменте кода, который я написал выше, чтобы обновить имя класса из JavaScript. Я автоматически подумал об обновлении имени класса, потому что, честно говоря, я всегда так делал. Я бы сказал, что около 90% сценариев DOM, которые я когда-либо делал, включают в себя переключение наличия значений класса: аккордеоны, всплывающие меню, всплывающие подсказки и другие шаблоны постепенного раскрытия.
Это нормально. Но на самом деле я должен стараться вообще не касаться DOM. Это может повлиять на производительность, возможно, вызывая ненужные перерисовки и перекомпоновки.
Теперь с пользовательскими свойствами существует прямая связь между JavaScript и CSS. Нет необходимости использовать HTML в качестве курьера.
Это заставило меня осознать, что мне нужно знать об автоматическом поиске решения только потому, что так я делал что-то в прошлом. Я должен сделать шаг назад и подумать о более эффективных решениях, которые возможны сейчас.
Это также заставило меня осознать, что «переменные CSS» — это очень ограничивающий способ мышления о пользовательских свойствах. Тот факт, что их можно обновлять в режиме реального времени — в CSS или JavaScript — делает их гораздо более мощными, чем, скажем, переменные Sass (которые больше похожи на константы).
Но я тоже был виновен в том, что недооценил их. Я почти всегда называю их «настраиваемыми свойствами CSS»… но большая часть их потенциала проистекает из того факта, что они не ограничиваются CSS. С этого момента я буду пытаться называть их пользовательскими свойствами без каких-либо уточнений.
Изначально это было опубликовано на моем собственном сайте.
