«Летающий» фокус на View Transitions API

Анимация перемещения фокуса между элементами (focus ring) делает интерфейс «живее» и помогает пользователю не терять активный элемент при навигации с клавиатуры. Раньше для этого высчитывали координаты через getBoundingClientRect, теперь всё делает браузер.

Вместо анимации самой кнопки мы анимируем только рамку фокуса. Для этого каждому интерактивному элементу добавляется вспомогательный <span>.

1️⃣ CSS: Рамка фокуса получает уникальное view-transition-name только в тот момент, когда родительский элемент находится в состоянии :focus-visible.

2️⃣ JS: Переключаем фокус программно внутри startViewTransition. Браузер увидит, что элемент с именем focus-ring переместился и изменил размер, и сам создаст плавный переход.

👉 @frontendInterview

Как убрать «висячие» строки во Flexbox: flex-wrap: balance и flex-line-count

Каждый фронтендер сталкивался с проблемой: настраиваешь flex-wrap: wrap, но при сужении экрана на последнюю строку перескакивает ровно один элемент. Раньше это костылили через медиазапросы. Теперь в Chrome есть нативные свойства flex-wrap: balance и flex-line-count.

Автобалансировка: flex-wrap: balance
Свойство распределяет элементы по строкам равномерно, убирая одиноких «сирот» в конце:

CSS
.channels {
display: flex;
flex-wrap: balance;
justify-content: center;
gap: 1rem;
}
Никаких сложных вычислений или JS — браузер всё делает сам.

Контроль строк через flex-line-count
Оно задает минимальное количество строк. Даже если места хватает для одного ряда, элементы принудительно распределятся по заданному числу:

CSS
.nav-list {
display: flex;
flex-wrap: balance;
flex-line-count: 2; /* Минимум 2 строки */
gap: 0.5rem;
}

Подробнее в статье👇

👉 @frontendInterview

🎚 «Больше или равно» в CSS без единого if

Новая CSS-функция progress(значение, от, до) показывает, где значение лежит в диапазоне: дробь от 0 до 1. Всё, что за границами, по умолчанию обрезается до 0 или 1.

Отсюда трюк. В диапазоне от 0 до порога ровно 1 выйдет, только когда значение достигло порога. Это готовый флаг.

Например, бейджи за фильмы: пороги 3, 6 и 9 в --badgeLevel, число фильмов в --movieCount:

.badge {
  --isLevelUnlocked: progress(var(--movieCount), 0, var(--badgeLevel));
}

При 2 фильмах из 6 получится 0.33, при 6 или 10 будет 1. Container style query (проверка значения переменной у родителя) показывает бейдж при style(--isLevelUnlocked: 1). Перебирать уровни в JS не нужно.

Учтите, что флаг регистрируют через @property с типом <number>, чтобы style query могла проверить его значение.

Приём годится для любого сравнения с порогом, не только для бейджей.

👉 @seniorFront

📏 Высота блока в строках, а не в пикселях

В CSS есть единица lh: 1lh равен вычисленному line-height, то есть высоте одной строки текста. Она давно существует, но о её применении рассказывают редко.

Пример: список надо обрезать по пяти строкам и плавно растворить низ. С max-height: 120px стоит увеличить шрифт, и всё ломается: строки растут, а пиксели нет. С lh размер считается в строках:

.list {
  max-height: 5lh;
  mask-image: linear-gradient(
    to bottom,
    #000,
    #000 calc(100% - 1lh),
    transparent 100%
  );
}

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

Оговорка: lh берётся от line-height самого элемента. Чтобы расчёт на родителе совпал со строками детей, задайте шрифт на родителе, а детям оставьте наследование.

В статье ещё отступы между абзацами, «тетрадные» линейки, картинки с float точно по строкам и иконки по размеру текста.

👉 @seniorFront

🚀 Два атрибута у картинки, и страница перестаёт прыгать

Пока картинка грузится, тег img занимает на странице нулевой размер. Когда файл приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер заново пересчитывает раскладку, а читатель теряет строку.

Лечится это атрибутами width и height у img, например width=800 height=600. Браузер ещё до загрузки файла знает пропорции и сразу оставляет под картинку место. В замере автора это сэкономило около 12% процессорного времени.

Одна тонкость: в CSS картинке нужно задать width: 100% и height: auto. Тогда ширина подстроится под контейнер, а высота посчитается по пропорциям. Без height: auto изображения растянутся.

А ещё в статье объяснено, почему padding-bottom и aspect-ratio автор считает худшими вариантами и как самому замерить разницу в профайлере.

👉 @seniorFront

🌈 Свечение внутри элемента, но из любого фона

Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку?

Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден.

Маска для левого и правого краёв (black в маске значит «видно»):

--inset: 30px;
mask-image: linear-gradient(
  to right,
  black 0%,
  transparent var(--inset),
  transparent calc(100% - var(--inset)),
  black 100%
);

Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.

Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.

В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.

👉 @seniorFront

🔍 Убрал повтор в скринридере и сломал кнопку

Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.

VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.

JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.

Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».

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

В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.

👉 @seniorFront

🎨 Текст, который сам подбирает цвет под фон

Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.

CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:

.card {
  --bg: var(--brand-color);
  background: var(--bg);
  color: contrast-color(var(--bg));
}

Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.

Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.

В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.

👉 @seniorFront

🧮 Поле ввода, в которое можно вписать формулу

Часто число для формы сначала надо посчитать. С обычным <input> приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.

Bramus сделал для этого веб-компонент <calc-input>. Пишешь (2 + 3) * 4, уходишь из поля, и там появляется 20. Возвращаешь фокус, и снова видна формула, её можно проверить или поправить.

Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные <input>, поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде 2 + форма не отправится.

Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут submit="result".

Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.

👉 @seniorFront

✨ CSS может заметить, что элементы вот-вот столкнутся

Сбоку от секции с карточками висит декоративный элемент, и его размер и положение меняются вместе с экраном. Медиазапросом момент наезда не поймать, а спрятать декор нужно, как только зазор станет меньше 20px.

Между декором и секцией через anchor positioning растягивается невидимый элемент .measure. Внутри у него псевдоэлемент шириной 20px и overflow-x: auto. Когда зазор меньше 20px, .measure переполняется.

Само переполнение запускает scroll-driven анимацию, прокручивать ничего не нужно. Анимация лишь ставит --touching: 1, а style container query прячет декор:

.decor {
  @container style(--touching: 1) {
    opacity: 0;
  }
}

Работает только в браузерах, где есть и scroll-driven анимации, и anchor positioning, так что это улучшение поверх обычной вёрстки.

В статье есть интерактивные демо, где можно потянуть границу и поймать момент срабатывания.

👉 @seniorFront

✨ Скроллбар, который следит за прокруткой без JavaScript

Свой скроллбар обычно рисуют так: нативный прячут, а размер и положение ползунка считают в JS на каждое событие scroll. Это дорого: scroll летит много раз в секунду, а чтение scrollHeight может вызвать reflow.

Разработчик библиотеки Taiga UI отдал эту работу CSS через scroll-driven animations. Их прогресс зависит не от времени, а от прокрутки контейнера.

Хитрее всего с высотой ползунка. Анимации его краёв растягивают на высоту контейнера (100cqb) за конец прокрутки, и в крайней точке они замирают ровно там, где нужно:

.bar {
  animation-range: 0% calc(100% + 100cqb), calc(0% - 100cqb) 100%;
  animation-fill-mode: both;
}

JS остаётся только для перетаскивания ползунка мышью.

Учтите, что на момент статьи Firefox умел это лишь в Nightly, поэтому в Taiga UI новая схема включается только там, где браузер её поддерживает.

Отдельно красиво решено, как прибить ползунки к краю контейнера: через anchor positioning.

👉 @seniorFront

🧩 Как сделать, чтобы фоновый узор не обрезался снизу

У секции повторяющийся фоновый узор, плитка 52×44px. Высота блока зависит от текста, поэтому нижний ряд плиток часто обрезается на середине.

Можно поставить background-repeat: round. Но тогда браузер сжимает или растягивает саму плитку, чтобы она уместилась целиком.

Решение аккуратнее: взять автоматическую высоту через calc-size() и округлить её функцией round() до кратного высоте плитки. Высота плитки лежит в переменной --tile-height.

.section {
  height: calc-size(auto, round(up, size, var(--tile-height)));
}

Выглядит как фиксированная высота, но работает скорее как min-height. Блок по-прежнему подстраивается под контент, просто его высота всегда кратна высоте плитки, и узор не режется.

Оговорка: на момент написания статьи это работает только в Chrome.

В оригинале есть живые демо, разбор округления вверх и вниз и то, как подогнать под узор ещё и padding.

👉 @seniorFront

✨ Рамка, которая рисует себя сама, на чистом CSS

Свойство border-image позволяет сделать рамкой элемента градиент вместо обычной линии. Но анимировать градиент напрямую не выйдет: браузер не умеет плавно двигать проценты внутри него.

Это обходится так: регистрируем свою переменную через @property и указываем её тип. Такую переменную браузер уже плавно меняет:

@property --p {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

Дальше она встаёт в градиент рамки: linear-gradient(-45deg, red var(--p), transparent 0%). Пока --p равна 0%, рамка прозрачная. При наведении --p становится 100%, красный заполняет рамку, и кажется, что её рисуют на глазах.

Есть подвох: border-image не изгибается по форме элемента, так что скруглённые углы он не повторит.

В статье тот же приём крутят дальше: conic-gradient, анимация border-image-slice и ещё куча вариаций.

👍 - если было полезно

👉 @frontendInterview

🚀 Предзагрузка, которая грузит не те данные

В TanStack Router у маршрута есть loader: он запускает запрос ещё до рендера, а компонент забирает готовые данные из кеша TanStack Query. Но параметры запроса тогда описаны дважды, и если они разойдутся, ошибки никто не покажет.

Пример из статьи. В дашборд добавили ?asOf=дата, но только в компоненте. По ссылке loader грузит данные «на сегодня», а компонент потом запрашивает снимок заново. Лишний запрос и лишнее ожидание.

Автор предлагает класть queryOptions в контекст маршрута. Их создаёт одна функция context, а loader и компонент через useRouteContext() берут один и тот же объект. Разойтись им просто негде.

Учтите, что функция context на момент статьи была новой и не описанной в документации.

В статье ещё о том, как контекст наследуют дочерние маршруты и почему лишних ререндеров не будет.

👍 - если было полезно

👉 @frontendInterview

🧩 Один инпут в Angular для строки, функции, шаблона или компонента

Когда компонент принимает кастомный контент, приходится заранее решать: хватит строки или нужен TemplateRef? Потом тип проверяют через @if и ветвят шаблон.

Библиотека Polymorpheus от команды Taiga UI убирает этот выбор. Директива *polymorpheusOutlet одинаково отрисует любой из четырёх вариантов в переданном контексте:

<ng-container *polymorpheusOutlet="content as primitive; context: { $implicit: user }">
  {{ primitive }}
</ng-container>

Строка или результат функции попадает в primitive.

Пример с тултипом: обычно в нём просто текст. Когда понадобится ссылка или кнопка, пользователь передаст шаблон, и API тултипа переделывать не придётся.

Оговорка: функцию от конструктора компонента не отличить, поэтому компонент оборачивают в PolymorpheusComponent.

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

👍 - если было полезно

👉 @frontendInterview

✨ Любой кусок страницы в окне поверх всех окон

Обычный Picture-in-Picture выносит в плавающее окошко только видео. Оно остаётся на экране, даже если переключиться на другую вкладку или программу.

Document Picture-in-Picture API делает то же самое с любым HTML: тикер акций, чат, список дел. По сути, получается веб-виджет.

Окно создаёт requestWindow(), и внутри у него свой пустой document. В статье туда клонируют тикер:

/* Select the component */
const stock = document.querySelector("#stock");

/* Clone the component and append it to the DPIP <body> */
DPIP.document.body.append(stock.cloneNode(true));

Стили сами не переедут, их копируют в head окна отдельно. А поправить вид только внутри окна поможет @media (display-mode: picture-in-picture).

Учтите, что API работает только на десктопе, а Safari на момент статьи его не поддерживал.

В статье есть полный код кнопки и разбор опций окна.

👍 - если было полезно

👉 @frontendInterview

🎯 Тултип, который сам перепрыгивает вниз, без JavaScript

Подсказка над кнопкой проста, пока кнопка не окажется у верхнего края экрана: подсказку обрезает. Обычно это чинили на JavaScript, и код выходил запутанным.

В CSS для этого есть Anchor Positioning API. Кнопке даём имя через anchor-name: --example-anchor, а подсказка привязывается к ней:

.target {
  position: fixed;
  position-anchor: --example-anchor;
  position-area: top;
  position-try-fallbacks: flip-block;
}

position-area: top ставит подсказку над кнопкой. Если там не хватает места, flip-block переворачивает её на другую сторону, вниз.

Подвох: с position: absolute переворот не сработает. Браузер ловит выход за содержащий блок, а у absolute он обычно прокручивается вместе с элементом. У fixed этот блок равен окну, поэтому край замечается.

Дальше в статье: как развернуть стрелочку тултипа и чем подстраховать старые браузеры.

👍 - если было полезно

👉 @frontendInterview

🌗 Переключателю тёмной темы хватит двух положений

Обычно на сайтах три варианта: «Системная», «Светлая», «Тёмная». Но системная тема в итоге всё равно светлая или тёмная. Поэтому один из трёх вариантов ничего видимого не делает: страница остаётся прежней.

Лиа Веру предложила оставить два состояния: «как в системе» и «наоборот». Второе сохраняется на устройстве, а возврат к первому стирает сохранённый выбор. Так каждый клик заметно меняет страницу.

Зак Лезерман поставил такой тумблер в подвал своего сайта. Режим, совпадающий с системным, подписан (auto):
Dark (auto) [Toggle] Light

Есть оговорка. Bramus в критике подхода указал на особый случай: пользователей, у которых системная тема переключается сама. Зак и сам из них, но считает простоту важнее. Это его личная оценка.

А ещё Зак уже выложил тумблер отдельным веб-компонентом Solar Eclipse Toggle.

👍 - если было полезно

👉 @frontendInterview

🎨 Перекрасить SVG-иконку внутри <img> прямо из CSS

SVG-иконку в <img> браузер кеширует, у неё есть alt и loading="lazy". Но поменять fill отдельной фигуры внутри неё из CSS нельзя. Поэтому иконки чаще вставляют инлайном и раздувают DOM.

Экспериментальная возможность CSS под названием Linked Parameters предлагает другой путь. В SVG-файле цвет берётся из переменной: fill="env(--color, #c1f07c)". А страница передаёт значение снаружи:

img {
  link-parameters: param(--color, #ff8052);
}

Браузер без поддержки просто возьмёт запасной #c1f07c, и иконка не сломается.

Оговорка: пока это работает только за флагами в Firefox Nightly и Safari Technology Preview. Когда появится во всех браузерах, неизвестно.

Если дойдёт, иконки можно будет держать отдельными кешируемыми файлами и красить их из CSS одной строкой.

👍 - если было полезно

👉 @frontendInterview