Математика в CSS: что и зачем считать для стилей

Прочитал только что на CodeFest доклад про то, зачем и как можно применять математику в CSS. С демками, мемасиками, полезными ссылками — всё как обычно.

Делюсь с вами слайдами. А когда появится видео доклада, поделюсь и им.

https://mefody.dev/talks/math-css/

Построй свой <подставить_нужное>

Андрей Ситник считает, что лучший способ что-то изучить — это построить это с нуля. Поэтому он в твиттере поделился ссылкой на репозиторий со ссылками на туториалы, как можно построить собственные базы данных, докеры, редакторы текста и так далее. А я делюсь этой же ссылкой с вами.

https://github.com/codecrafters-io/build-your-own-x

Storybook 9

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

- Много возможностей для тестирования. Интерактивное тестирование (буквально можно накликать и проверить поведение компонента), тестирование доступности (под капотом axe-core), скриншотное тестирование.
- Анализ покрытия кода компонентов тестами. Требует подключения Vitest, смотрит только на сами истории, но всё равно полезное улучшение.
- Уменьшение размера бандла в 2 раза. Почистили зависимости, в анонсе есть впечатляющий граф. Для всяких CI/CD — ускорение работы, соответственно.
- Поддержка Svelte 5 и React Native.
- Генератор Story. Можно прямо из интерфейса накликать состояние компонента и сохранить это состояние как отдельный тест.

Я пока что демками впечатлён, хочу попробовать обновить где-нибудь в проектах рядом и оценить, как оно на самом деле. Хотя бы уменьшение размера бандла того стоит.

https://storybook.js.org/blog/storybook-9/

«Идёт загрузка…», или Как доставлять нужное вовремя

Видео выходного дня. Организаторы конференции DUMP выдали спикерам ссылки на видео их докладов, поэтому делюсь с вами своим. Рассказывал, на что могут влиять разработчики, чтобы пользователи не смотрели на спиннеры, а максимально быстро начинали потреблять контент.

https://youtu.be/mWR07BSGAVc

CSS-фигуры при помощи функции shape()

Темани Афиф написал аж три статьи с множеством демок, в которых он объясняет возможности функции shape() в CSS. Это такая функция, при помощи которой можно рисовать полноценные векторные формы, но не в сложночитаемом для новичков синтаксисе SVG-путей, а чуть ли не человеческим языком. Отличное решение для всяких динамических фигур, которые зависят от CSS-переменных на странице.

- Часть 1. Про линии и дуги
- Часть 2. Ещё про дуги
- Часть 3. Про кривые

Обсуждали с Полиной Гуртовой во вчерашнем 478 эпизоде подкаста «Веб-стандарты» третью статью. После записи подкаста прочитал её внимательнее — стал чуть-чуть лучше понимать кривые Безье.

State of CSS 2025

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

Прохожу его каждый год, в этот раз тоже прошёл. Про все фичи знал (спасибо подкасту «Веб-стандарты»), не все применял на практике.

Разработчики браузеров и спецификаций точно смотрят на результаты этих опросов, поэтому это ваша возможность повлиять на веб, не упустите.

https://survey.devographics.com/ru-RU/survey/state-of-css/2025

Новый способ стилизовать гэпы

В Chrome 139 за Origin Trial и за флагом выехала возможность стилизовать отступы между ячейками в гридах и флексах. Теперь можно ещё удобнее стилизовать гриды под таблицы, если вам вдруг такое нужно.

Синтаксис не самый простой, нужно освоить новую группу свойств column-rule-* и row-rule-*, но демки выглядят интересно.

https://developer.chrome.com/blog/gap-decorations

Свет: оживляем 3D-объекты

Видео выходного дня. Юлия Миоцен объясняет и показывает, как для 3D-графики на CSS создать реалистичное освещение и тени. На примере кубической курицы.

Если любите творить магию при помощи CSS, видео Юли помогут прокачаться.

Видео:
https://youtu.be/2FEgcYfiTEM?si=w-kgixEhBlwC_0eB

Статья и демо:
https://miocene.io/post/light-and-shadow-in-css/

Порядок свойств внутри transform и анимации

Джейк Арчибальд, как у него в блоге часто бывает, разбирает такой сниппет кода:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Простая на первый взгляд анимация, при добавлении класса должно случиться масштабирование в 3 раза и смещение центра картинки на сколько-то процентов. Так и происходит, но почему-то в процессе картинка движется по дуге, а не по прямой линии. Причём дуга чем-то напоминает график изинга ease. Совпадение?

Собственно, в статье на примерах Джейк и объясняет, что под капотом пытается сделать браузер, как правильно полечить это поведение и почему добавление rotate(0) в изначальное состояние тоже внезапно всё чинит.

https://jakearchibald.com/2025/animating-zooming/

Зернистые градиенты

Ана Тюдор делится рецептом, как при помощи CSS и SVG-фильтров сделать эффект зернистости для изображений и теней.

https://frontendmasters.com/blog/grainy-gradients/

Как быть в курсе новых возможностей CSS

Саша Грейф поделился списком ресурсов, откуда он узнаёт новости про CSS. В списке даже ChatGPT есть, который уже не так сильно отстаёт по свежести знаний, как это было всего полтора года назад.

https://css-tricks.com/how-to-keep-up-with-new-css-features/

А я поделюсь с вами своим списком, откуда сам беру новости.

1. Релизы браузеров. Спецификации могут долго зависать на стадии обсуждений, а вот релиз фичи в браузере — это уже повод с ней поиграться.
- Chrome
- Firefox
- Safari

2. Социальные сети нынешних и бывших браузерных деврелов. Юна Кравец, Джен Симонс, Адам Аргайл, Томас Штайнер и другие. Часто деврелы вкидывают в обсуждение спеку ещё на этапе глубокого черновика, но уже тогда можно ознакомиться с идеей.

3. Личные блоги крутых веб-разработчиков. Подписался через Feedly на RSS-ленты блогов, раз в неделю проверяю, что новенького у них появилось.

4. Подкаст «Веб-стандарты» (@webstandards_ru). Все ведущие скидывают в редакторский чатик разные полезные ссылки, некоторые сам бы я не нашёл. Из них мы потом формируем сценарий подкаста. Некоторые вещи я приношу сюда в канал.

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

llms.txt

Если готовить сайты для поисковиков мы уже давно научились (SSR, sitemap.xml, robots.txt и прочее), то для LLM пока только учимся.

Полина Гуртовая поделилась интересной ссылкой на пропозал 2024 года. Если сайт хочет быть обработанным LLM-краулером, то достаточно в корень сайта положить файл /llms.txt с текстовым представлением всего, что нужно знать о сайте. Оформлять можно в Markdown, роботы с ним очень хорошо работают.

Пока что это пропозал от отдельного комьюнити, формально в процесс стандартизации от W3C или WHATWG его даже тяжело поместить, так как сфера AI ещё слишком юная, стандарты придумываются на ходу. Но тем не менее даже без стандарта наличие такого файла не повредит. Скоро SEO превратится в LLMEO, можно начать готовиться.

https://llmstxt.org/

Блобы на CSS

Не уверен, как корректнее перевести Blob. Капля, пятно, клякса? Пусть будет блоб.

Хуан Диего Родригез делится тремя способами сделать блобы на CSS.

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

2. SVG-фильтры. Популярный рецепт: рисуете фигуры любым способом, добавляете размытие по Гауссу и фильтр контрастности. Размытие уберёт чёткие границы, а контрастность придаст блобу форму.

3. Новая функция shape(). Тут всё просто: как нарисуете, так и будет выглядеть.

Мне пока больше всего нравится способ №2 для анимаций, когда на фоне капли сливаются и перемещаются. Но устройства от таких анимаций начинают греться. А способ №3 пока не везде работает, нужно ждать Baseline Widely Available, чтобы не бояться.

https://css-tricks.com/css-blob-recipes/

WebVM

Если что, это не название очередного формата видео или изображений, а Web Virtual Machine. Linux x86 в браузере.

То есть где-то есть сервер на Linux, на котором запущен сайт, в котором открывается виртуальная машина Linux, на которой можно запустить сайт...

На самом деле, это хороший пример того, как современные возможности браузеров и WebAssembly в частности позволяют запускать в вебе почти что угодно. В 2022 году, когда я первый раз услышал про WebVM, в нём работал только консольный режим. А сейчас есть полноценная графическая оболочка и поход в сеть. Впечатляет.

Из полезных применений:
- Обучение основам Linux без установки ОС.
- Удобный дебаг линуксового в Windows и не только.
- REPL для кода без боязни сломать систему.

Если захотелось внедрить к себе, внимательно ознакомьтесь с лицензией на CheerpX, который, как я понимаю, всё-таки платный для коммерческого использования.

https://github.com/leaningtech/webvm

TypeScript 5.9 Beta

Команда TypeScript занимается не только миграцией на Go, но и добавляет новые функции.

- Обновили поведение tsc --init. Если раньше создавался tsconfig.json с избыточным количеством опций, то теперь по умолчанию собирается компактный конфиг с несколькими закомментированными блоками. Если нужно добавить ещё, можно изучить опции на сайте.

- Поддержали import defer * as … from …; — новую возможность EcmaScript по отложенному выполнению модуля.

- Для совместимости с особенным поведением модулей в Node.js 20 добавили флаг --module node20. Напомню, в 20-й ноде можно через require() импортировать ES-модули внутри CommonJS-модулей.

- Для DOM API рядом со ссылкой на документацию в MDN добавили краткое саммари, основанное на этой документации. Удобно, меньше отвлечений в состоянии потока.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-9-beta/

Satisfies в TypeScript

Адам Ракис на примерах объясняет пользу ключевого слова satisfies в TypeScript.

Если коротко, это что-то вроде assert для типов. Представьте, что у вас есть тип с опциональным полем.

type Item = {
  name: string;
  description?: string;
};

function insertItems(items: Item[]) {}

insertItems(
  backendItems.map(item => {
    return {
      name: item.item_name,
      description_new: item.item_description,
    };
  })
);

В этом коде есть неприятный баг. TypeScript смотрит на типы и пытается их пересечь. Из-за опциональности поля description ошибки в коде нет с точки зрения типов. Но если дальше массив в рантайме передаётся с клиента на бэкенд, получим, вероятно, ошибку.

Как словить эту ошибку вовремя? Помимо явного указания типов вообще везде, где только можно вписать тип, можно сделать так:

insertItems(
  backendItems.map(item => {
    return {
      name: item.item_name,
      description_new: item.item_description,
    } satisfies Item;
  })
);

Здесь TS проверит реальное соответствие типу и ругнётся на лишнее поле. При этом автовыведение типов всё ещё работает.

Подробнее — по ссылке.

https://frontendmasters.com/blog/satisfies-in-typescript/

Марсианский LaunchKit

Давайте уже признаем, что лендинги технопроектов почти все одинаковые. Сверху Hero-картинка, дальше кнопка большая продающая, затем карточки с иконками и числами, потом FAQ и ссылки на соцсети. Отличается только наполнение. И по мне так это даже хорошо: я сразу знаю, где мне искать нужную мне информацию.

Злые Марсиане собрали готовый шаблон, который можно просто взять и склонировать на GitHub. Статика, в которой достаточно заменить контент — работать будет быстрее любых генераторов React-сайтов. Если нужно изменить стили, в репозитории есть инструкция.

https://launchkit.evilmartians.io/

Почему важно знать про перфоманс-плато

Тэмми Эвертс рассказывает о таком эффекте, как плато производительности. Это ситуация, когда вы ускоряете метрики Core Web Vitals, делаете LCP на несколько секунд быстрее (это много) — а метрики бизнеса почти никак при этом не меняются.

Например, есть такая метрика, Bounce Rate — процентное соотношение тех, кто покинул сайт после просмотра первой страницы, к общему количеству посетителей. Ей часто пользуются маркетологи и продакт-менеджеры. Она должна быть низкой.

Так вот, если у вас на сайте LCP был равен 10 секундам, а стал 4 секунды, то Bounce Rate может никак не измениться. Потому что пользователям всё равно слишком медленно. А вот если был 4 секунды, а стал 2 секунды, то может внезапно измениться кардинально. Один и тот же сайт, одни и те пользователи, но после некоторой отметки хуже уже не сделать.

И что вам делать с этой информацией? На самом деле, если вы любите оптимизировать перфоманс страниц, то можно собрать графики на реальных пользовательских данных, на которых совместить метрики Core Web Vitals и продуктовые метрики. Так у вас появится доказательная база, почему в производительность нужно (или не нужно) вкладываться. Ни один адекватный менеджер не проигнорирует собранные данные, по которым будет видно, что вклад ресурсов в быструю загрузку страницы может вырастить бизнесовые метрики без новых доработок продукта.

А дополнительно вы будете знать, почему иногда значительные усилия по оптимизации производительности не приносят значимого результата — потому что нужно ещё больше оптимизировать. Либо у вас и так всё оптимальнее некуда, но это скорее исключение из правил.

https://www.speedcurve.com/blog/web-performance-plateau/

new Date("wtf")

Думаете, что знаете, как работает класс Date в JavaScript? Пройдите тест.

Набрал 8/28 верных ответов. И очень радуюсь, что с нами Temporal.

https://jsdate.wtf/

Ленимся с view-transition-old и view-transition-new

Сид Штумпель на демках показывает, как View Transition API помогает делать красивые преобразования списков минимумом кода.

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

Что по дефолту делает View Transition API с элементами, на которые он завязан:
- Считает координаты и размеры элемента до перехода.
- Считает координаты и размеры элемента после перехода.
- Делает плавную анимацию изменения размеров и координат через прозрачность и режимы смешивания во время перехода.

Получается, для красивых анимаций внутри списков вам всего лишь нужно разметить при помощи CSS элементы этого списка как анимируемые (через view-transition-name и подобные свойства). Profit!

https://cydstumpel.nl/being-lazy-with-view-transition-old-and-new/