⁣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-проверки, но требует строгого контроля над глубиной вложенности и браузерной поддержкой.