«Анимируемые и не анимируемые CSS свойства»: предыстория задумки

Это важная информация и важный опыт, которыми я решил поделиться. Тем более я уверен: это точно пригодится фронтендерам и верстальщикам.

  • CSS (cascading style sheets, каскадные таблицы стилей) — это язык, который используют, чтобы задать визуальное отображение веб-страницам. CSS работает в связке с языком разметки HTML. С его помощью можно менять цвет текста, задавать шрифты, раскрашивать кнопки, добавлять к отдельным элементам фон или поля и верстать сайт в соответствии с дизайнерским макетом. Благодаря CSS разработчики могут сделать привлекательнее веб-страницу или привести ее к единому стилю, улучшить ее или адаптировать.

Итак, список свойств CSS, которые можно анимировать, используя CSS-анимации или переходы. Я сделал проект на замену удаленного списка с MDN — я с ним периодически сверялся, когда хотел анимировать что-то в верстке. В какой-то момент заметил, что списка на MDN больше нет, а вместо него осталась статья про типы анимаций.

  • MDN — гигантская энциклопедия о веб-технологиях и программном обеспечении, содержит подробную документацию о языках программирования и инструментах веб-разработки.

Сначала подумал, что документ удалили по ошибке, но после переписки с разработчиками выяснилось, что его убрали по техническим причинам. Тогда я решил сделать свою версию списка и опубликовать его. Тема, конечно, довольно узкая, но равно настолько же и интересная.

Задачу поставил себе так: создать веб-страницу со всеми CSS свойствами и подсказками, как эти свойства можно анимировать (можно ли вообще). Мне хотелось, чтобы с документом могли сверяться фронтенд-специалисты при работе над своими кейсами.

Начало работы

Стал думать, как лучше реализовать идею. Для начала просто попробовал поработать с их API. На этапе экспериментов делал все прямо во фронтенде, на чистом JS. API работал нормально, правда пришлось покопаться, чтобы получить все данные в нужном виде. Дело усложнялось тем, что CSS спецификации (в отличие скажем от HTML) состоят из большого количества отдельных модулей и уровней. Некоторые данные там дублируются, например, с браузерными префиксами, некоторые идут под разными именами и т.п.

Frontend-разработка в 2024: расскажем как принципиально меняется подход к созданию всего, что нас окружает в интернете. Бесплатный вебинар по теме.

В процессе стало ясно, что делать этот проект на чистом фронтенде, при всей моей любви к нему, не выйдет. Прежде всего потому, что запрос данных с каждого клиента может слишком нагрузить API (тут я конечно скорее переживал, что страницу забанят, чем что людей будет реально слишком много). А обновлять этот список нужно будет регулярно, ведь в CSS все меняется очень быстро и постоянно появляются новые свойства. Но делать это вручную я точно не собирался.

Соответственно появились новый технические требования: проект должен сам собираться в статику, получая свежие данные из API, например, раз в день. И я приступил к сборке.

Что-то на техническом

Сборку я решил в итоге делать на платформе Node.js — просто потому, что в нее можно переносить JS код даже на этапе экспериментов (тут суть в том, что Node.js это — тот же JavaScript только для бэкэнда). Модулей я пытался использовать по минимуму. Не стал усложнять ситуацию подключением DOM к ноде. Структура страницы просто описана внутри template literal — такой сложной строки, в которую можно вставлять еще кусочки из переменных, и даже включить для нее подсветку синтаксиса расширениями в VS Code.

Так как весь процесс получения данных требовал какого-то времени, пришлось ввести ряд задержек в код, иначе не работало. Ну и это тот случай, когда лучше перестраховаться. Собственно, в первый день, пока я не ввел серию дополнительных мер, страница часто собиралась без данных из API.

Остался вопрос сервера и собственно запуска сборки. Популярный сервис GitHub Pages вроде как не позволяет сделать бэкэнд. Но можно было использовать Actions на гитхабе (скрипты для автоматизации задач), чтобы запустить node.js код по таймеру. Моя версия списка получилась гораздо подробнее оригинальной.

Я решил разделить список на 4 раздела. Полноценно анимируемые свойства (то есть с плавным переходом), свойства с типом discrete (то есть без плавного перехода), неанимируемые, и то, что не попало в остальные категории. Повторы и лишнее отсеивалось автоматически.

Верстка и пункт назначения

На верстку я потратил меньше всего времени: это же просто список ссылок и какого-то сложного оформления тут не требовалось. Ну и хотелось, чтобы было похоже на оригинал с их колонками. Поэтому использовал древние CSS column, за которые в наше время редко хватаюсь. Из UI и UX фишек еще добавил sticky-заголовки, потому что списки длинные и в мобильной версии могло быть непонятно, в каком разделе они находятся. И конечно сделал кнопку «Вернуться в начало»: это тот случай, когда действительно нужна.

Список уже опубликован на Github Pages на моем аккаунте. Он идеален для фронтендеров и верстальщиков. И хоть посещает его небольшое количество людей, но зато они заходят со всего мира[V1] . Большая часть из них просто из поисковиков. Я был рад увидеть, что моя работа кому-то все-таки пригодилась.

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

Ссылка на список с анимируемыми CSS свойствами: https://vallek.github.io/animatable-css/

Связаться с Валерой:

Email: vwebdis@gmail.com

Telegram: @webval

Портфолио: https://vallek.github.io/