⁣CSS-анимация auto высоты и ширины: интерполяция ключевых слов без костылей

Плавное раскрытие блоков с динамическим контентом — одна из самых частых задач в production: аккордеоны, выпадающие меню, модалки. Раньше это решалось через max-height с запасом, grid-трюками или ручным JS-расчётом, но каждый вариант имел компромиссы по предсказуемости layout или производительности. Новая возможность interpolate-size: allow-keywords меняет подход, позволяя анимировать height: auto напрямую.

Как это работает

Свойство interpolate-size: allow-keywords на контейнере разрешает браузеру интерполировать ключевые слова (auto, min-content, max-content, fit-content) как числовые значения. Например, для аккордеона:

.accordion-item {
  interpolate-size: allow-keywords;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion-item.open {
  height: auto;
}

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

Где применять и типичная ошибка

Используйте в UI-компонентах с непредсказуемой высотой: выпадающие списки, дроверы, панели с динамическими данными. Ошибка — применять interpolate-size глобально на * или на всех элементах, где не нужна анимация ключевых слов. Это может сломать встроенную интерполяцию браузера в сложных layout, особенно при использовании min-height в сетках. Лучше ограничивать область действия конкретными компонентами.

Production-контекст и trade-offs

Поддержка пока ограничена: Chrome 130+ и Safari Technology Preview. Firefox требует флага в about:config. В production это только progressive enhancement — если браузер не поддерживает, блок раскроется без анимации. Используйте @supports:

@supports (interpolate-size: allow-keywords) {
  .panel { interpolate-size: allow-keywords; }
}

Это не влияет на доступность (скринридеры видят контент сразу) и производительность (браузер оптимизирует анимацию нативного рефлоу). Но не подходит для случаев, где нужна анимация между двумя разными ключевыми словами (например, auto к min-content) — это пока не реализовано.

Вывод: interpolate-size: allow-keywords убирает главный компромисс между живым контентом и плавными анимациями, но требует осторожного внедрения с фоллбэком для неподдерживающих браузеров.

⁣CSS light-dark(): встроенная поддержка светлой и тёмной темы без пользовательских свойств и media-запросов

Долгое время реализация тёмной темы на production требовала custom properties, JS-тогглов и media-запросов prefers-color-scheme. Но с ноября 2024 года в CSS появилась нативная функция light-dark(), которая избавляет от этой инфраструктурной головной боли.

Как это работает
Функция принимает два аргумента: первый — цвет для светлой темы, второй — для тёмной. Она автоматически выбирает нужное значение, ориентируясь на свойство color-scheme, которое задаётся на документе или контейнере. Достаточно прописать :root { color-scheme: light dark; } и заменить все цветовые значения на light-dark(). Никаких media-запросов, классов переключения или @media (prefers-color-scheme: dark) — браузер сам всё решает.

Production-пример и практический совет
На лендингах и в design-системах часто нужно менять фоны, текст и декоративные элементы под тему. Вместо десятка custom properties и дублирования правил под media-запросы используйте light-dark():

.card {
  background: light-dark(#fff, #1e1e1e);
  color: light-dark(#1a1a1a, #e0e0e0);
  border: 1px solid light-dark(#ccc, #444);
}

Совет: если нужно принудительно переключить тему для части интерфейса (например, в админке с собственным тогглом), задайте color-scheme: light или color-scheme: dark на контейнере — light-dark() подстроится под него, а не под системную тему.

Типичная ошибка и trade-off
Многие верстальщики пытаются использовать light-dark() для градиентов или сложных цветовых комбинаций вроде box-shadow: light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1)). Но функция не поддерживает градиенты — там по-прежнему нужны custom properties или JS. Ошибка: применять light-dark() к свойству background-image с градиентом — это сломает вёрстку в Safari и Chrome. Ещё один минус: поддержка у Firefox пока экспериментальная (за флагом), так что для production с аудиторией на этом браузере лучше оставить fallback через media-запрос.

Поддержка браузеров
Chrome 133+, Edge 133+, Safari 18.2+ уже нативно поддерживают light-dark(). Firefox — в 135+ под флагом (но обычно в production можно использовать с progressive enhancement: зарезервировать цвет по умолчанию, а для современных браузеров — перебить через light-dark()).

Вывод: Используйте light-dark() для простых цветовых пар — это уменьшает код, исключает ошибки специфичности и делает тему стабильной без лишней JS-инфраструктуры, но помните про ограничение на градиенты и тестируйте поддержку Firefox.

⁣CSS initial-letter: буквицы без float и подгонок

Типографика в вебе всё ещё страдает, когда дело доходит до буквиц. В production — будь то лонгриды, премиальные лендинги или медиа-сайты — верстальщики часто мучаются с float, магическими font-size и line-height, чтобы буква не вылезла за границы. Решение есть в спецификации CSS Inline Layout Level 3: свойство initial-letter.

Как это работает
Свойство задаёт, на сколько строк должна растянуться первая буква. Браузер автоматически вычисляет размер шрифта и позицию, без float и подгонок. Пример:

p::first-letter {
  initial-letter: 3;
}

Если нужно смещение вниз, добавляется второй параметр:

p::first-letter {
  initial-letter: 3 1;
}

Первая цифра — высота в строках, вторая (опционально) — смещение. Буква не вылезает за границы абзаца.

Практический совет
Используйте initial-letter в лонгридах, книжной вёрстке или премиальных лендингах. Оно идеально сочетается с font-family и color, а если браузер не поддерживает (Safari — да, Firefox и Chrome — пока нет), работает graceful degradation: остаётся обычная первая буква. Это избавляет от сложных кастомных решений в дизайн-системах.

Типичная ошибка
Пытаться эмулировать буквицу через float и line-height с магическими числами. Это ломается при изменении шрифта, размера или межстрочного интервала, а доступность страдает, так как трудно предсказать переполнение. initial-letter решает проблему предсказуемости layout и визуальной стабильности без костылей.

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

⁣View Transitions API в production: нативная SPA-подобная навигация без JS

Когда в MPA нужна плавная смена страниц, большинство инженеров тянут React Router с анимациями или jQuery-плагины. Но браузер уже умеет это нативно, причем без единой строчки скриптов. View Transitions API — это не игрушка, а рабочая техника для лендингов, документаций и каталогов, где важен UX даже на медленных каналах.

Как работает и базовая активация

View Transitions API делает снимки старого и нового DOM-состояния, затем анимирует наложение слоев. Включение — один CSS-блок:

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 0.35s ease-in both fade-out;
}
::view-transition-new(root) {
  animation: 0.3s ease-out both fade-in;
}

Браузер сам ловит момент перехода между страницами одного origin. Код минимальный, без библиотек и inline-скриптов.

Индивидуальная анимация для элементов

Типичная ошибка: перезапуск всего layout при навигации, из-за чего шапка «прыгает». Решение — задать view-transition-name: header на <header>. Браузер анимирует этот блок отдельно от остального контента. Заголовок остается на месте, а основной блок плавно заменяется.

Trade-off: не назначайте одно и то же имя разным элементам — сломанная селективность даст сбой анимации.

Production-ready: выборочные переходы и fallback

Firefox и Safari на десктопе (до 18.2) полностью игнорируют API. В продакшене обязателен fallback:
- Условия активации через @media (prefers-reduced-motion) или :has() для разных страниц. Например, на каталоге скролл-эффект, на карточке — только fade.
- Если браузер не поддерживает — страница должна загружаться мгновенно, без ошибок блокировки.

Пример для списка статей: article { view-transition-name: entry; }. При клике на заголовок — масштабирование карточки в новую страницу, а не моргание всей вьюпорта.

Практическая ловушка: cross-document с data-атрибутами

Cross-document переходы работают между разными HTML-файлами одного origin. Но если у вас ленивая загрузка изображений или динамический контент через AJAX — API может захватить неполный снимок. Всегда задавайте view-transition-class или style="view-transition-name" явно, не полагаясь на CSS-селекторы до мутации DOM.

Предупреждение: не используйте на страницах с интерактивными картами или iframe — их состояния не захватываются корректно.

Вывод: View Transitions API дает нативную, предсказуемую анимацию навигации для MPA, но требует явного задания имен, fallback для старых браузеров и отказа от декоративных эффектов на сложных виджетах.

⁣CSS anchor-positioning: теперь тултипы и попапы без единой строчки JS-координат

Тултипы, дропдауны и контекстные меню в production-интерфейсах (кабинеты, дизайн-системы, e-commerce) часто страдают от ручных расчётов координат через getBoundingClientRect. Типичная ошибка: забыли обновить позицию при скролле или ресайзе, и на мобильном устройстве компонент улетает за край экрана. CSS anchor-positioning решает это системно.

Как это работает
Якорному элементу задаёшь CSS-свойство anchor-name: --anchor-id (или атрибут anchor). Прикреплённому элементу — position-anchor: --anchor-id и inset-area: top center для привязки по стороне. Координаты рассчитывает браузер, без JS.

.button {
  anchor-name: --anchor-btn;
}
.tooltip {
  position: absolute;
  position-anchor: --anchor-btn;
  inset-area: top center;
  margin-top: 8px;
}

<button class="button">Наведи</button>
<div class="tooltip">Я тултип!</div>

Production-пример с попапом
В связке с popover можно открывать меню вообще без JS. Атрибут popovertarget на кнопке + popover на блоке. Браузер сам приклеивает попап к якорю и двигает его при переполнении окна. Это снижает визуальную регрессию и упрощает поддержку в компонентных библиотеках.

Типичная ошибка и trade-off
Не путай inset-area с anchor(). Первое — это готовое правило для одной из 12 сторон (top center, left middle и тд). Второе — функция для гибкой привязки к конкретной стороне якоря, если нужна нестандартная позиция. Ошибка: пишут inset-area, потом переопределяют его через транслейты в position-try-fallbacks. Лучше сразу использовать anchor() для сложных вариантов.

.tooltip {
  position: absolute;
  position-anchor: --anchor-btn;
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

Предупреждение о поддержке и fallback
Chrome 125+ и Edge 125+ работают стабильно. Firefox и Safari — за флагами. Всегда оборачивай новое поведение в @supports (anchor-name: --x). Если условие не сработало — оставляй старый JS-подход с useEffect или ResizeObserver. Не обещай pixel-perfect в старых браузерах.

Вывод: CSS anchor-positioning убирает ручные расчёты координат и делает позиционирование предсказуемым при скролле и ресайзе — это шаг к стабильным интерфейсам без координатного спагетти.

В /code-review от Claude Code глубину анализа теперь можно выбирать самому

Под каждый уровень ревью зашили свою логику. Если воткнуть низкий — /code-review выцепит больше проблем, чем конкуренты, и при этом сожрет меньше токенов. А высокий уровень выдаст более жирный recall, если нужно реально прокопать код.

Раньше был один фикс-промпт на всё, тупо и без вариаций. Теперь под каждый уровень — своя стратегия. Система автоматом берет уровень, который висит на сессию, или можно ткнуть пальцем: /code-review high.

На низком уровне — один проход по diff, достаточный, чтобы гонять перед каждым push. На среднем уже анализ с контекстом: несколько проходов поиска и проверка каждого бага. Высокий — там агенты поиска и проверки запускаются как сабагенты с чистым контекстом. x‑high проверяет, как изменение влияет на всё, что за пределами diff. И есть ultra: толпа агентов-ревьюеров независимо размножает каждую проблему. В Anthropic этот режим гоняют для каждого PR.

Подробнее

👉 Логово Верстальщика

⁣CSS :has(): Условная стилизация родителя и соседей без JavaScript-классов

Долгое время задача стилизовать родителя на основе его потомка или соседний элемент по состоянию соседа решалась только через JavaScript с ручным добавлением/удалением классов. Селектор :has() навсегда закрывает этот пробел, позволяя описывать такие паттерны декларативно, прямо в CSS, устраняя классы-костыли и снижая риск визуальных артефактов.

Как это работает и синтаксис

Селектор :has() применяет стили к элементу, если внутри его DOM-дерева есть другой элемент, удовлетворяющий заданному условию. Классический пример — подсветка списка при наличии выполненной задачи:

ul:has(li.done) {
  border: 2px solid green;
}

Всё, никаких дополнительных классов на <ul> — браузер сам проверяет вложенность. Это радикально упрощает поддержку компонентов.

Conditional соседей и респонсив

:has() работает и с соседними селекторами, что открывает сценарии управления отступами или визуальной иерархией без JavaScript. Пример:

.card:has(+ .featured) {
  margin-bottom: 24px;
}

Здесь margin-bottom у карточки добавляется только если сразу после неё идёт элемент с классом featured. Это идеально для списков в e-commerce или карточек в кабинетах, где порядок определяется бекендом, а визуальные отступы должны адаптироваться.

Типичная ошибка: перегрузка сложными селекторами

Самая частая проблема — использовать :has() для проверки глубоко вложенных условий внутри большой страницы, например:

body:has(.sidebar.open) .main {
  margin-left: 300px;
}

Такой селектор заставляет браузер при каждом изменении проверять всех потомков <body>. На статичных страницах это почти незаметно, но на динамических интерфейсах с частыми ре-рендерами (лендинги с анимациями, панели управления) может дать задержку. Практический совет: ограничивай глубину проверки до 1-2 уровней и избегай зацикливания через :has() внутри :has() — это гарантированно сломает layout.

Production-ориентированный пример: формы и валидация

Один из самых полезных сценариев — подсветка всей формы при невалидном поле без JS:

form:has(input:invalid) {
  border: 2px solid #e53e3e;
  box-shadow: 0 0 0 1px rgba(229, 62, 62, 0.3);
}

Это даёт пользователю мгновенный визуальный фидбек: если в форме есть ошибка, весь её контейнер выделяется красной рамкой. Для accessibility важно не забыть aria-атрибуты на самой форме, но это уже вопрос семантики. Основное trade-off: :has(input:invalid) работает только в современных браузерах (Safari 15.4+), поэтому для поддержки старых версий нужна progressive enhancement.

Вывод: :has() — инженерный инструмент, который делает верстку более предсказуемой, убирая лишние JS-проверки, но требует строгого контроля над глубиной вложенности и браузерной поддержкой.